.principal__imagen{

    position:relative;
    min-width:100vw;

}
/*
.principal__titulo{

    position: absolute;
    top:400px;
    left:45px;
    background-color: #000000aa;
    padding:0px 20px 10px 20px;


}
.principal__titulo > a{
    font-weight: 200;
    font-size: 40px;
    color: #ffffff;
    line-height: normal;
}
.principal__titulo >a:visited{color:#ffffff;}
.principal__imagen > a > img{

    
    min-width:100%;

}*/
.principal__titulo{

    text-align:right;
    width:90%;
    /*color:var(--cabecera-color);*/
    font-family: var(--tipografia-titulo_1);
    font-size: 33px;
    text-transform:uppercase;
    padding-bottom: 10px;
    padding-top:10px;

}


.principal__titulo > h1{ 
    font-family: var(--tipografia-titulo_1);
    font-size: 28px;
    text-transform:uppercase;
    padding-bottom: 20px;}

    .principal__texto > p {
        font-family:var(--tipografia-titulo_1);
        font-size:14px;
        margin:10px 10px;
    }
/*Estilos de Movil*/
@media screen and  (max-width:800px) {
    

    .principal__titulo{display:none;}

    .principal__texto > p {
      
        font-size:12px;
      
    }
    




                    
                }

/*Fin Estilos de Movil*/

















/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

:root{
--item-w: 330px;
--item-h: 180px;
--gap: 16px;
--cols: 3;
}


html,body{
height:100%;
margin:0;
font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background:#fafafa;
color:#111;
}


.wrap{
min-height:100%;
display:flex;
align-items:center;
justify-content:center;
padding:32px;
box-sizing:border-box;
}


/* Usamos CSS Grid : 3 columnas fijas, filas automáticas */
.grid-container{
display:grid;
grid-template-columns: repeat(3, var(--item-w));
grid-auto-rows: var(--item-h);
gap:var(--gap);
background:linear-gradient(180deg, #ffffffcc, #f7f9fccc);
padding:16px;
border-radius:12px;
box-shadow: 0 6px 18px rgba(16,24,40,0.06);
box-sizing:border-box;
justify-content:start; /* asegura que la última fila se alinee a la izquierda */
}


.grid-item{
display:flex;
align-items:center;
/*justify-content:center;*/
background: #fff;
border: 1px solid #e6e9ef;
border-radius:0px;
box-shadow: 0 1px 2px rgba(16,24,40,0.04);
font-weight:600;
font-size:14px;

user-select:none;


 background: var(--soft-color);


      font-family: var(--tipografia-titulo_1);
    font-size: 33px;
    text-transform:uppercase;
    color:var(--cabecera-color);
    line-height: 30px;
    padding-left: 8px;
    padding-top:8px;

    margin-bottom: 30px;
    background-position: right center; background-repeat: no-repeat; background-size: contain; background-blend-mode: luminosity;






}


.label{

}
.label > a  {font-family: var(--tipografia-titulo_1);}
.label > a, .label > a:visited {color:var(--base-color);}
.label > a:hover{color:var(--base-color);}
.label {width:30%;}

@media (max-width: 600px){
.grid-container{
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
justify-content:stretch;
}

.grid-item{
font-size:15px;
background-color: var(--soft-color-low-opacity);
background-blend-mode: lighten;

}


}