/* ========================
   Ocultar todo al inicio
   ======================== */
body {
  visibility: hidden; 
  background: url(../imagen/1115-fondo-concreto.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #7a7a7a;
}

/* ========================
   Loader: solo el logo
   ======================== */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* transparente para que se vea la página blanca de fondo */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease;
}

#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none; /* para que no bloquee la interacción */
}

/* Logo principal */
.logo {
  display: flex;
  align-items: center; /* centrado vertical */
  justify-content: center; /* centrado horizontal interno si tiene hijos */
  font-family: 'Arial Black', sans-serif;
  font-weight: bold;
  color: #666;
  font-size: 180px;
  max-width: 80vw;
  position: relative;
  animation: pulse 1.2s infinite;
  letter-spacing: -22px;
}

/* Punto rectangular (opcional) */
.logo .dot {
  width: 20px;
  height: 20px;
  background: #373737;
  border-radius: 5px;
  margin: 26px 10px;
}

/* Texto "arquitectura" en vertical */
.logo .side-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 15px;
  margin: 14px 13px 11px 0px;
  letter-spacing: 1px;
  color: #666;
  padding: 25px 14px;
}

/* ========================
   Página principal
   ======================== */
.page {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.page.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* ========================
   Animación del logo
   ======================== */
@keyframes pulse {
  0% { opacity: 0.3; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.3; transform: scale(0.95); }
}


/* Loader */
/* ========================
   Ocultar todo al inicio
   ======================== */
body {
  visibility: hidden; 
  background: url(../imagen/1115-fondo-concreto.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #7a7a7a;
}

/* ========================
   Loader: solo el logo
   ======================== */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* transparente para que se vea la página blanca de fondo */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease;
}

#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none; /* para que no bloquee la interacción */
}

/* Logo principal */
.logo {
  display: flex;
  align-items: center; /* centrado vertical */
  justify-content: center; /* centrado horizontal interno si tiene hijos */
  font-family: 'Arial Black', sans-serif;
  font-weight: bold;
  color: #666;
  font-size: 180px;
  max-width: 80vw;
  position: relative;
  animation: pulse 1.2s infinite;
  letter-spacing: -22px;
}

/* Punto rectangular (opcional) */
.logo .dot {
  width: 20px;
  height: 20px;
  background: #373737;
  border-radius: 5px;
  margin: 26px 10px;
}

/* Texto "arquitectura" en vertical */
.logo .side-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 15px;
  margin: 14px 13px 11px 0px;
  letter-spacing: 1px;
  color: #666;
  padding: 25px 14px;
}

/* ========================
   Página principal
   ======================== */
.page {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.page.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* ========================
   Animación del logo
   ======================== */
@keyframes pulse {
  0% { opacity: 0.3; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.3; transform: scale(0.95); }
}

.logos {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    gap: 20px;
    margin-top: 40px;
}

.logos img {
    width: 100px;
    height: auto;
}

/* Asegura que la clase .loading o style visibility actúe como fallback */
body.loading { visibility: hidden; }

/* Ejemplo de loader: transición de opacidad */
#loading-screen { opacity: 1; transition: opacity .6s ease; }
#loading-screen.fade-out { opacity: 0; pointer-events: none; }

/* Fade-in de la página */
.page { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.page.fade-in { opacity: 1; transform: none; }

/* Fallback visible si un componente no carga */
.component-error { padding: 16px; background: #fff0f0; color: #900; border: 1px solid #f0bcbc; }