.barra-superior{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 3rem;
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(40px); /* Efecto de desenfoque en el fondo */
    position: fixed;  /* Fija la barra */
    top: 0;          /* Pegada arriba */
    left: 0;         /* Pegada a la izquierda */
    width: 100%;     /* Ancho completo */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.logo-container {
    width: 80px; /* Ancho fijo para el contenedor del logo */
    flex-shrink: 0; /* Evita que se encoja si el título es muy largo */
}

    /*Estilo imagen*/
.logo {
    width: 100%;
    object-fit: contain;
    display: block;
    transition: all 0.3s ease;
}

.logo:hover {
    transform:scale(1.03); /*Zoom*/
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.3));
}

/* Estilo del título */
h1 {
  font-size: 3.5rem;
  color: #2c3e50;
  margin: 0;
  text-align: center;
}

/* El espaciador invisible */
.spacer {
    width: 80px; /* IMPORTANTE: Mismo ancho que .logo-container */
}

.footer{
    display: flex;
    grid-template-columns: repeat(2, 1fr);
    padding-top: 25px;
    padding-bottom: 30px;
    padding-left: 50px;
    background-color: OldLace;
    bottom: 0;          /* Pegada arriba */
    left: 0;         /* Pegada a la izquierda */
    width: 100%;     /* Ancho completo */
    z-index: 1000;
    margin-top: 180px;
}

/* --- vista en vertical (Portrait) --- */
@media (orientation: portrait) {

  .barra-superior {
    padding: 12px 0.5rem 12px 1rem;
    backdrop-filter: blur(30px);
  }

  /* Reducimos el tamaño del logo y el espaciador */
  .logo-container{
    width: 60px;
  }
  .spacer {
    width: 20px;
  }

  h1 {
    font-size: 1.5rem;
  }

  /* Los estilos del footer no necesitan cambiarse para este problema */
  .footer{
    display: block;
    margin-top: 120px;
  }

  /* Sin hover animations en movil (buggean) */
  *:hover {
    animation: none;
    transition: none;
    transform: none;
  }

}