@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Josefin+Sans:ital,wght@0,300;1,300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;1,300&family=Luckiest+Guy&display=swap');

body, h1, ul, li{
    padding: 0;
    margin: 0;
    
}
a{
    color: rgb(205, 183, 214);
}
ul, h4{
    text-align: center;
    color: rgb(3, 31, 36);
}

body{
    background-color:rgb(211, 248, 255);
    
    
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  
      
      
}
h1{
    color: rgb(2, 26, 26);
    font-family: "Luckiest Guy", serif;
    font-size: 50px;
   
    
    
}
div{
    width: 800px;
    max-width: 95%;
    margin: 0 auto ; 
}
header{
    background-color: rgb(111, 182, 200);
    text-align: center;
    padding: 25px;

   
}

article {
    background-color: rgb(180, 227, 240);
    color: rgb(4, 54, 54);
    padding: 5px;
    margin: 10px auto;  /* centrado */
    width: 800px;       /* ancho fijo */
    max-width: 95%;     /* adaptable en pantallas chicas */
    box-sizing: border-box; /* evita que el padding agrande el ancho */
}
footer{
    color: rgb(3, 7, 23);
    background-color: rgb(136, 201, 217);
    padding: 25px;
    text-align: center;
}
.destaca-azul{
    color: rgb(255, 255, 255);
}
.centrada{
    display:block;
    margin-left: auto;
    margin-right: auto;
}

.adaptable{
     width: 100%;
     height: auto;
}
nav li {
    display: inline-block;
}
nav a {
    text-decoration:none;
    color: rgb(22, 53, 61);
    background-color: rgb(136, 201, 217);
    padding: 10px;
    display:inline-block;
}
nav a:hover { 
    color: rgb(136, 201, 217);
    background-color:rgb(22, 53, 61);
}
html {
    scroll-behavior: smooth;
}

.celda {
    display: flex;
    gap: 5px;
    
}
.celdaa{
display: flex;

}

article img.adaptable {
    display: block;
    width: 100%;
    height: auto;
}

.cuadro-filas-simple {
  width: 800px;
  max-width: 95%;
  margin: 20px auto;
  display: flex;
  flex-direction: column; /* cada fila una debajo de otra */
  gap: 10px;
}

.fila {
  display: flex;         /* pone los <p> en línea */
  gap: 10px;             /* espacio entre columnas */
}

.fila p {
  flex: 1;               /* todas las columnas iguales */
  background-color: rgb(131, 205, 225);
  color: rgb(4, 29, 29);
  padding: 10px;
  border-radius: 5px;
  margin: 0;             /* quita márgenes de los <p> */
  text-align: center;
}

.fila.encabezado p {
  font-weight: bold;
  background-color: rgb(45, 190, 190);
}