body {
    font-family: 'Segoe UI', sans-serif; /* Se define la feunte  */
    margin: 0; /* Elimina los espacios en blanco de la  pagina*/
    background-color: #f6d3d3; /*color del background (es color rojo flojo ya que me recuerda a japon ese color)*/
}

header {
    background-color: #dc5454; /* Color del encabezado*/
    color: white; /*color del texto */
    text-align: center; /* centrar el titulo*/
    padding: 30px;  
}

.flotante {
    position: fixed; /*La posicion sea fija*/
    top: 0px; /*altura en la que se mostrara para que noquede por debajo del bootstrap*/
    right: 0px; 
    background: rgb(253, 80, 80); 
    color: rgb(255, 255, 255);
    padding: 7px 9px; /*separaciones */
    border: rgb(255, 255, 255) 2px solid; /*color del borde*/
    text-decoration: none; /*se quite el enlace*/

}
.principal {
    display: flex; /*Hace que se pongan al lado una columna de la otra*/
    flex-wrap: wrap; /* Para que en el móvil se pongan una debajo de la otra */
    gap: 20px; /*Espacio en tre columnas*/
    padding: 20px; /*Separacion con los bordes de las pantallas*/

}

.lado_izq { 
    flex: 1; /* crece y se encoge en proprocion 1*/
    min-width: 200px; /*tamaño minimo antes de que se mueva*/
    background: white; /*color del fondo*/
    padding: 15px; 
  
}
.centro { 
    flex: 3; /*proporción 3 */
    min-width: 200px; /*tamaño minimo antes de que se mueva*/
    background: white; 
    padding: 20px; 
   
}
.lado_derch { 
    flex: 1.2; /*proporción 1.2 */
    min-width: 200px; /*tamaño minimo antes de que se mueva*/
    background: white; 
    padding: 15px; 
 
}
.lado_derch a { /*apartado derecho a */
     text-decoration: none; /*quita la linea del enlace */
     color: #dc5454; /* color de la letra rojo*/ 
     font-weight: bold; /*negrita la letra */
}


.lado_izq ul { /*apartado ul*/
    list-style: none; /* Se quitan los puntos de la lista debido a que se quita la estetica  */
    padding: 0; 
}
.lado_izq li a { /*apartado li a */
    text-decoration: none; 
    color: #dc5454; 
    font-weight: bold; 
    display: block; /*ocupa el 100% espacio en bloque*/
    padding: 10px 0; 
     
}


.rejilla {
    display: grid; /* modo reejilla */
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    gap: 15px; /*espacio entre fotos*/
}


.rejilla img { /*imagenes de la rejilla*/
    width: 100%;       /* Ocupa todo el ancho de la caja */
    height: 180px;     /* Altura para que todas sean iguales */
    object-fit: cover; /* Recorta la imagen para que no se estire */
    border-radius: 60px;
}



.cajas {  /*cajas de las noticias*/
    
    border: 1px solid #ddd; 
    padding: 15px; 
    margin-bottom: 20px; 
    border-radius: 8px; 
    background: #fafafa;
 }

.cajas img { /*imagenes de las cajas*/
    width: 100%;       /* Se adapta al ancho de la ficha */
    height: auto;
    border-radius: 30px;
    margin: 10px 0;
}
.conten{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea las 2 columnas */
    gap: 20px; /* Espacio entre las cajas */
    margin-top: 20px;
}

.conten .cajas {
    margin-bottom: 0; 
    display: flex;
    flex-direction: column;
    height: 100%; /*altura*/
}

.noticia { /* notiicas*/
    margin-bottom: 20px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 10px; 
}
.noticia img { /*noticias img*/
    width: 100%; /*altura igual para todos los bloques*/
    height: 100px; 
    object-fit: cover;  
}
.noticia p { /* notiicas p */ /*apartado para elimnar una aprte de las noticias y que se pongan automaticamente puntos*/
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis;
}

.noticia h4 { /*noticias h4*/
    color: #dc5454; 
    margin: 10px 0 5px 0; }

.footer {
    text-align: center; /*texto en el centro*/
    background-color: #000000; /* El mismo rojo de tu header */
    color: rgb(255, 255, 255);
    padding: 20px;
    font-family:'Courier New', Courier, monospace
}

@media (max-width: 800px) { /*ipad*/
    .lado_izq, .lado_derch, .centro   {
         flex: 100%;  /*se apilan las columnas una debajo de la otra*/
    }     
    .rejilla { 
        grid-template-columns: repeat(2, 1fr);  /*la galeria de imagenes pasa a ser 2 columnas*/
    } 
}
@media (max-width: 480px) {
    .rejilla { 
        grid-template-columns: 1fr; /* la galería pasa a 1 columna */
    } 
    .conten { 
        grid-template-columns: 1fr; /* el turismo a una columna */
    } 
    .flotante { 
        font-size: 12px; top: 10px; padding: 5px; /*ajuste del flotante debido a que quedaba muy grande*/
    }
}