body {
    height: 100vh;
    margin: 0;
}

.col-center {
    display: float;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    margin-top: auto !important;
    margin-bottom: auto !important;
    align-items: center !important;
}

section {
    height: 100vh;
}

section:first-child {
    background: whitesmoke;
    color: black;
}

section:second-child {
    background: #aed0ec;
    color: white;
}

section:last-child {
    background: #ffffff;
    color: white;
}

.custom-p {
    opacity: 0;
    transition: opacity 6s;
}

.scroll-class {
    opacity: 1;
}

.cambioFondo {
    background-color: rgb(253, 252, 252);
    transition: background-color 8s ease-in;
}

.scroll-class-cambioFondo {
    background-color: rgb(218, 152, 53);
}

.padeador {
    padding-top: 50px;
}

.fondoPlan1 {
    background-color: #073E65;
}

.textoCeleste {
    color: #56aada;
}

.bordesRedondos {
    border-radius: 100px;
}

.letrasPeques {
    font-size: 12px;
}

.letrasNormales {
    font-size: 15px;
}

.letrasGrandes {
    font-size: 25px;
}

.letrasAzules {
    color: #073E65;
}

.letrasCelestes {
    color: #56aada;
}

.letrasFosforecentes {
    color: #c1c821;
}

.fondoCeleste {
    background-color: #56aada;
}

.letrasPlateadas {
    color: #D6DBDF;
}

.fondoFlyPanel1 {
    background-color: #D6DBDF;
    border-radius: 10px;
    margin-right: 10px;
    margin-top: 30px !important;
}

.fondoFlyPanel {
    background-color: #D6DBDF;
    border-radius: 10px;
    margin-right: 20px;
    margin-top: 10px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 97%;

    text-align: left;

}


.sombra-blanca {
    text-shadow:
        0 0 5px white,
        0 0 10px white,
        0 0 15px white,
        0 0 20px white,
        0 0 25px white;
}



.fondoFlyPanel-wrapper {
    zoom: 0.90; /* Esto reduce visual y físicamente todo */
    display: inline-block; /* Para que se ajuste al nuevo tamaño */
    width: fit-content;
    margin: 0 auto;
}

/* Efecto al pasar el mouse */
.fondoFlyPanel:hover {
    transform: translateY(-10px) scale(1.05); /* Se eleva y agranda ligeramente */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Sombra al pasar el mouse */
}

/* Animación de entrada */
.fondoFlyPanel.show {
    opacity: 1;
    transform: translateY(0);
}

/* Animaciones de los elementos internos */
.fondoFlyPanel .fade-item {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Retrasos en la animación de cada elemento interno */
.fondoFlyPanel.show .fade-item:nth-child(1) { transition-delay: 0.3s; }
.fondoFlyPanel.show .fade-item:nth-child(2) { transition-delay: 0.6s; }
.fondoFlyPanel.show .fade-item:nth-child(3) { transition-delay: 0.9s; }
.fondoFlyPanel.show .fade-item:nth-child(4) { transition-delay: 1.2s; }
.fondoFlyPanel.show .fade-item:nth-child(5) { transition-delay: 1.5s; }
.fondoFlyPanel.show .fade-item:nth-child(6) { transition-delay: 1.8s; }

.fondoFlyPanel.show .fade-item {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos adicionales */
.letrasSuaves {
    font-family: 'Quicksand', sans-serif;
    font-weight: 1000;
     font-size: 0.875rem;
}

.sombraContorno {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    padding: 3px;
}

.sombraCelesteContorno {
    box-shadow: 3px 3px 10px rgba(86, 170, 218, 0.7);
    padding: 3px;
}

/* Estilos de imagen */
.img-sombra {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease-in-out;
}

.img-sombra:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);
}
.fondoFlyPanel {
  position: relative;
  overflow: visible; /* Asegura que la imagen pueda sobresalir */
}

.fondoFlyPanel img {
  position: relative;
  top: -20px; /* Ajusta la imagen hacia arriba */
  z-index: 10;
  display: block; /* Asegura que respete el centrado */
  margin: 0 auto;
  height: auto;
}

.fondoFlyPanel:hover {
    transform: scale(1.10); /* Aumenta el tamaño en un 5% */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); /* Agrega sombra para dar profundidad */
}



.separador {
    margin-top: 50px;
}

.bordesRedondosPlus {
    border-radius: 50px;
}

.altoCarusel {
    max-height: 500px;
}

.altoImgWebHosting {
    height: 5;
}

.fondoFAQ {
    background-image: url('../img/preguntas.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 500px;
    border-radius: 75px;
}

.fondoFAQPequeno {
    background-image: url('../img/preguntasfrequentes_pequeno.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 30vh;
    border-radius: 50px;
}

.noMostrar {
    display: none;
}

.separador {
    margin-top: 40px;
}

.alturaMax {
    min-height: 650px !important;
}

.col-centerSinTexto {
    display: float;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: auto !important;
    margin-bottom: auto;
    text-align: justify !important;
    align-items: center;
}

.largoBotonesPieDePagina {
    height: 50px !important;
}


.velocidad-container {
	position: relative;
	width: 100%;         /* antes: max-content */
	max-width: 100%;     /* asegura que no se desborde */
	height: auto;
	min-height: 40px;    /* más amigable en móviles */
	overflow: hidden;    /* previene desbordamientos */
	text-align: center;
}

.estelas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}


.letra {
	position: relative;
	display: inline-block;
	z-index: 2;
	font-size: inherit; /* hereda el tamaño del contenedor padre */
}


/* Estela */
.linea-estela {
	position: absolute;
	height: 0.25em; /* Proporcional al tamaño de la letra */
	background: linear-gradient(to left, #4BB2F2, transparent);
	opacity: 0;
	border-radius: 0px;
	animation: estelaDesdeLetra 1.5s linear infinite;
	filter: blur(1px);
}

/* Animación de las estelas */
@keyframes estelaDesdeLetra {
	0% {
		transform: translateX(0) scaleY(1);
		width: 0;
		opacity: 0;
	}
	10% {
		opacity: 1;
		width: 1.5em;
	}
	60% {
		width: 4em;
		opacity: 0.8;
		transform: translateX(-3em) scaleY(0.6);
	}
	100% {
		transform: translateX(-5em) scaleY(0.3);
		width: 0;
		opacity: 0;
	}
}

/* Animación de movimiento del texto */
@keyframes correr {
	0% {
		transform: translateX(0) skewX(-8deg);
	}
	20% {
		transform: translateX(0.5em) skewX(-8deg);
	}
	40% {
		transform: translateX(0.3em) skewX(-8deg);
	}
	60% {
		transform: translateX(0.6em) skewX(-8deg);
	}
	100% {
		transform: translateX(0) skewX(-8deg);
	}
}

.velocidad-texto {
	display: flex;
	gap: 0.2em;
	font-size: clamp(1rem, 10vw, 3rem); /* más flexible */
	font-weight: 900;
	color: white;
	z-index: 2;
	position: relative;
	animation: correr 2s ease-in-out infinite;
	transform: skewX(-8deg);
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}

.col-md-7 {
justify-content: center;
display: flex;
flex-direction: column;
}