@import url('common.css');

body {
   padding-top: 80px;
}

header {
   background: transparent;
}

.filtros-container {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 12px;
   padding: 20px;
   background-color: #000;
   flex-wrap: wrap;
   animation: fadeIn 0.8s ease;
}

.filtro-btn {
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
   backdrop-filter: blur(10px);
   color: #fff;
   border: 2px solid rgba(255, 255, 255, 0.15);
   padding: 3px 16px;
   font-family: "Zain", sans-serif;
   font-size: 13px;
   font-weight: 400;
   cursor: pointer;
   overflow: hidden;
   transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   letter-spacing: 0.9px;
}

.filtro-btn:hover {
   background: #fff;
   color: #000;
}

.filtro-btn.activo {
   background: #fff;
   color: #000;
   transform: translateY(-2px) scale(1.05);
}

.filtro-btn:active {
   transform: translateY(0) scale(0.98);
}

.contenedor-obra {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   width: 100%;
   max-width: 600px;
   margin: 0 auto;
   padding: 30px 20px;
   background-color: #000;
   animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}

.card-box {
   background-color: #000;
   border: 1px solid #000;
   overflow: hidden;
   transition: transform 0.3s ease;
   cursor: pointer;
   break-inside: avoid;
   display: flex;
   flex-direction: column;
}

.card-box:hover {
   transform: translateY(-5px);
}

.obra {
   width: 100%;
   background-color: #111;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   position: relative;
}

.obra img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
}

.nombre_obra {
   background-color: #fff;
   color: #000;
   padding: 15px;
   text-align: center;
   font-size: 14px;
   font-weight: 500;
   min-height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.paginacion {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
   padding: 30px 20px;
   background-color: #000;
}

.paginacion button {
   background: transparent;
   color: #fff;
   border: none;
   padding: 12px 24px;
   font-family: "Numans", sans-serif;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.paginacion button:hover:not(:disabled) {
   background-color: #fff;
   color: #000;
}

.paginacion button:active:not(:disabled) {
   transform: translateY(-1px) scale(1.02);
}

.paginacion button:disabled {
   opacity: 0.2;
   cursor: not-allowed;
}

.paginacion .info-pagina {
   color: #fff;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0.5px;
}

.loading {
   text-align: center;
   color: #fff;
   padding: 50px;
   font-size: 18px;
   grid-column: 1 / -1;
}

@media (max-width: 480px) {
   .filtros-container { gap: 8px; padding: 15px 10px; }
   .filtro-btn { font-size: 13px; padding: 8px 16px; }
}

@media (max-width: 767px) {
   .contenedor-obra {
      display: block;
      column-count: 2;
      column-gap: 15px;
      padding: 20px 15px;
      max-width: 100%;
   }
   .card-box {
      break-inside: avoid;
      display: inline-block;
      width: 100%;
      margin-bottom: 15px;
   }
   .nombre_obra { font-size: 13px; padding: 10px; }
   .paginacion { flex-wrap: wrap; gap: 10px; }
   .paginacion button { padding: 8px 15px; font-size: 14px;}
}

@media (min-width: 768px) and (max-width: 1023px) {
   .contenedor-obra {
      display: block;
      column-count: 3;
      column-gap: 25px;
      max-width: 900px;
      padding: 40px 30px;
   }
   .card-box {
      break-inside: avoid;
      display: inline-block;
      width: 100%;
      margin-bottom: 25px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   .card-box:hover { transform: translateY(-3px); }
   .nombre_obra { font-size: 15px; padding: 18px; }
   .paginacion button { padding: 14px 16px; font-size: 17px;}
}

@media (min-width: 1024px) and (max-width: 1439px) {
   .contenedor-obra {
      display: block;
      column-count: 3;
      column-gap: 25px;
      max-width: 900px;
      padding: 40px 30px;
   }
   .card-box {
      break-inside: avoid;
      display: inline-block;
      width: 100%;
      margin-bottom: 25px;
      border-width: 2px;
   }
   .card-box:hover { transform: translateY(-5px) scale(1.01); }
   .nombre_obra { font-size: 16px; padding: 20px; min-height: 60px; }
   .paginacion { padding: 40px 20px; gap: 20px; }
   .paginacion button { padding: 14px 30px; font-size: 18px; }
   .paginacion .info-pagina { font-size: 18px; }
}

@media (min-width: 1440px) and (max-width: 1919px) {
   .contenedor-obra {
      display: block;
      column-count: 5;
      column-gap: 25px;
      max-width: 1200px;
      padding: 40px 30px;
   }
   .card-box {
      break-inside: avoid;
      display: inline-block;
      width: 100%;
      margin-bottom: 25px;
      border-width: 2px;
   }
   .card-box:hover { transform: translateY(-10px) scale(1.01); }
   .nombre_obra { font-size: 17px; padding: 22px; min-height: 65px; }
   .paginacion { padding: 50px 20px; gap: 25px; }
   .paginacion button { padding: 16px 35px; font-size: 19px; }
   .paginacion .info-pagina { font-size: 19px; }
}

@media (min-width: 1920px) {
   .contenedor-obra {
      display: block;
      column-count: 4;
      column-gap: 30px;
      max-width: 1500px;
      padding: 40px 30px;
   }
   .card-box {
      break-inside: avoid;
      display: inline-block;
      width: 100%;
      margin-bottom: 25px;
      border-width: 2px;
   }
   .card-box:hover { transform: translateY(-10px) scale(1.01); }
   .nombre_obra { font-size: 18px; padding: 25px; min-height: 70px; font-weight: 600; }
   .paginacion { padding: 60px 20px; gap: 30px; }
   .paginacion button { padding: 18px 40px; font-size: 20px; font-weight: 600; }
   .paginacion button:hover:not(:disabled) { transform: translateY(-5px); }
   .paginacion .info-pagina { font-size: 20px; font-weight: 600; }
}

@media (min-width: 1200px) {
   .contenedor-obra { max-width: 1600px; }
}