.contenedor-principal{
    width:50%;
    height:10%;
     display: flex;
    align-items: flex-end;
    flex-direction: column;
     justify-content: flex-end;
     
}


.logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Centra horizontalmente los elementos */
    width: 100%;
}

.right-content{
    width:91.5%;
    margin-left:4.5rem;
}


.logotipo{
    width:100%;
    height:100%;
   display: flex;
    align-items: flex-end;
    flex-direction: column;
     justify-content: flex-end;
     
}
.logotipo-container {
    width:42%;
    height:100%;
   display: flex;
    flex-direction: row; 
    align-items: flex-end;
    font-family: qatar2022, Arial, sans-serif;
    justify-content: center;  /* Centra los elementos horizontalmente */
    margin-left: auto;
    margin-right:auto;
    
}



.letras{
    width:100%;
 display: flex;
    flex-direction: row; 
    align-items: flex-end;  
     justify-content: flex-end;
}

.letras-mn {
    width:100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0;  /* Elimina espacio entre letras */
}

/* Ajustes para las letras */
.letter-m, .letter-n {
    display: flex;
    margin-right: -15px;  /* Superposición controlada */
}


.logo-mn .letter-m, .logo-mn .letter-n {
    height:auto;
    display: flex;
    align-items: flex-end;
    
}

.url{
     display: flex;
    align-items: flex-end;
    
    
}


.logo-mn .rectangle, .logo-mn .rectangle.middle {
    width: 40px;   /* 2.5rem * 16px */
    height: 90px;  /* 5.625rem * 16px */
    margin: 0 10px;  /* 0.625rem * 16px */
    border: 3px solid #007bff;  /* 0.1875rem * 16px */
    border-radius: 0 5px 5px 5px;  /* 0.5rem * 16px */
    transform: skewY(0deg) skewX(20deg);
}

.logo-mn .rectangle-n {
    width: 35px;   /* 2.1875rem * 16px */
    height: 80px;  /* 5rem * 16px */
    margin: 0 10px;  /* 0.625rem * 16px */
    border: 3px solid #b3b3b3;  /* 0.1875rem * 16px */
    border-radius: 0 5px 5px 5px;  /* 0.5rem * 16px */
    transform: skewY(0deg) skewX(20deg);
}

.rectangle-n {
    border: solid #b3b3b3;
    width: 40px;   /* 2.5rem * 16px */
    height: 90px;  /* 5.625rem * 16px */
}



.nombre-sitio{
    height:2rem;
  border:none;
  padding:0;
  width: 100%;
    text-align: center;  /* Centra el texto */
    margin-top: 10px;  /* Espacio entre letras y texto */
    letter-spacing: 0.4em;
    font-size: 1.2em;
    color: #ff0000;
    font-family: 'qatar2022', Arial, sans-serif;
}

@media screen and (max-width: 768px) {
    
    .right-content{
        position: fixed;
        top:20px;
    width:50%;
    height:8%;
    margin-left:0;
    background-color:#f0f0f0;
    z-index:3;
}

    
    .logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Centra horizontalmente los elementos */
    width: 100%;
}


 .logotipo{
    width:40%;
    height:10%;
   display: flex;
    align-items: flex-end;
    flex-direction: column;
     justify-content: flex-end;
     position: absolute;
     top:1px;
}
.logotipo-container {
     width:30%;
    height:10%;
   display: flex;
    flex-direction: row; 
    align-items: center;
    font-family: qatar2022, Arial, sans-serif;
    justify-content: center; 
    
}
.letras{
    width:100%;
 display: flex;
    flex-direction: row; 
    align-items: flex-end;  
     justify-content: flex-end;
}

.logo-mn .letter-m, .logo-mn .letter-n {
    height:auto;
    display: flex;
    align-items: flex-end;
    
}



.url{
     display: flex;
    align-items: flex-end;
    
    
}


.logo-mn .rectangle, .logo-mn .rectangle.middle {
    width: 18px;   /* 2.5rem * 16px */
    height: 36px;  /* 5.625rem * 16px */
    margin: 0 3px;  /* 0.625rem * 16px */
    border: 1.5px solid #007bff;  /* 0.1875rem * 16px */
    border-radius: 0 3px 3px 3px;  /* 0.5rem * 16px */
    transform: skewY(0deg) skewX(20deg);
}

.logo-mn .rectangle-n {
    width: 18px;   /* 2.1875rem * 16px */
    height: 31px;  /* 5rem * 16px */
    margin: 0 3px;  /* 0.625rem * 16px */
    border: 1.5px solid #b3b3b3;  /* 0.1875rem * 16px */
     border-radius: 0 3px 3px 3px;  /* 0.5rem * 16px */
    transform: skewY(0deg) skewX(20deg);
    
}


.nombre-sitio{
    width: 100%;
    height:1.5rem;
     font-family: 'qatar2022';
    font-size: 1em; /* Tamaño de fuente deseado */
    color: #ff0000;
  text-align: right;
  letter-spacing: .1em;
  padding:0;
  border:none;
}

.letras-mn {
        gap: 10px;
    }
    
    .letter-m, .letter-n {
        margin-right: -8px;
    }
    
    .nombre-sitio {
        font-size: 0.9em;
        letter-spacing: 0.2em;
        margin-top: 5px;
    }
}