/* ESTILOS GENERALES */
   body {
    font-family: Arial, sans-serif;
    background-color: #ffd6fd; 
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #0c2630; 
  }
  
/* ENCABEZADO (Header) */
   header {
    background-image: url("./p3.jpg");
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 3rem 1rem;
  }
  
  header h1 {
    font-size: 2rem;
    margin: 0;
    color: #5c4033; 
    text-shadow: 1px 1px 2px #d9ebf0; 
  }
  
  .frase-inicial {
    font-style: italic;
    color: #8b5e3c;
    margin-top: 0.5rem;
    text-shadow: 1px 1px 1px #fff8ec;
  }

/* NAVEGACIÓN */
   nav {
    background-color: #e2a6e7; 
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    flex-wrap: wrap;
  }
  
  nav a {
    color: #fff8ec;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
  }
  
  nav a:hover {
    color: rgb(107, 235, 252);
  }
/* TABLA */
     th {
     background-color: rgb(228, 184, 253);
     }
     th, td {
     border: 1px solid rgb(199, 150, 183);
     padding: 0.5rem;
     }
     table {
     width: 100%;
     border-collapse: collapse;
     }
     tr:hover {
      background-color: #acf0fc;
      transition: background-color 0.3s ease;
    }
/* GALERÍA */
     img {
     max-width: 20%;
     margin-top: 1rem;
     border: 4px solid #b1def8;
     border-radius: 8px;
     }
     #galeria .contenedor-galeria {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }
    .tarjeta-obra {
      border-radius: 8px;
      overflow: hidden;
      transition: transform 0.3s ease;
    }
    
    .tarjeta-obra:hover {
      transform: scale(1.02);
    }
    
    .tarjeta-obra img {
      width: 100%;
      height: auto;
    }
    

/*****main******/
.contenedor {
    display: flex;
    gap: 20px; /* Espacio entre contenido y aside */
  }
 
  .contenido {
    display: flex;
    flex-direction: column; /* Apila las secciones verticalmente */
    flex: 1; /* Ocupa el espacio disponible */
  }
 
  section {
    padding: 10px;
    border: 1px solid #d1fdff;
    margin-bottom: 10px;
    background-color: #dcf8fa;
  }
 
  aside {
    width: 250px;
    padding: 10px;
    background-color: #f3cafc;
  }

  /* Pie de página*/
  footer {
    background-color: #bbe0ffe1;
    color: #f746ee;
    text-align: center;
    padding: 1rem;
  }