* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		body, html {
			background-color: #1D365D;
		}

		.fondo {
			position: relative;
			width: 100%;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.marco {
			position: relative;
			width: 100%;
			max-width: 1280px;
			height: 100%;
			max-height: 720px;
			background-color: #1D365D;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		#vid {
			position: relative;
			width: 100%;
			height: 100%;
			z-index: 20;
			border: 20px solid #1D365D; 
		}

		#inter {
			position: absolute;
			margin: -1px;
			width: 100%;
			max-width: 1280px;
			height: 100%;
			max-height: 720px;
			background: url(../img/car.png);
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
			z-index: 30;
		}

		#logos {
			position: absolute;
			width: 100%;
			max-width: 1280px;
			height: 100%;
			max-height: 720px;
			background: url(../img/car.svg);
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
			z-index: 40;
		}
		.texto {
			position: absolute;
			bottom: 10%;
			text-align: center;
			color: #666699;
			font-size: 20px;
			font-weight: bold;
			text-shadow: 5px 5px 5px #222222;
			z-index: 50;
		}




		#pantalla-carga {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #1D365D; /* Usamos tu color institucional azul */
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999; /* Asegura quedar por encima de tu estructura */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0.8s ease; /* Efecto difusión */
}

/* Esta clase la inyectará JavaScript cuando todo esté listo */
#pantalla-carga.oculto {
  opacity: 0;
  visibility: hidden;
}

.contenedor-carga {
  text-align: center;
}

/* Animaciones del Spinner */
.spinner {
  animation: rotarSpinner 2s linear infinite;
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}

.spinner .path {
  stroke: #ffffff;
  stroke-linecap: round;
  animation: progresoCirculo 1.5s ease-in-out infinite;
}

@keyframes rotarSpinner {
  100% { transform: rotate(360deg); }
}

@keyframes progresoCirculo {
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}