/* ============================================================
   TRABAJOS REALIZADOS — GALERÍAS + MODAL
   (Compatible con tu style.css + footer .pie)
   ============================================================ */

/* ✅ Si ya tienes reset global en style.css, puedes borrar esto */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================
   GALERÍA (CONTENEDOR)
   ========================== */
.contenedor-padre-limpieza{
  max-width: 1200px;
  min-height: 250px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: 20px;
  margin: auto;
  padding: 30px 15px;
  margin-bottom: 50px;

  border-radius: 15px;
}

/* ==========================
   TARJETAS (IMÁGENES)
   ========================== */
.contenedores-hijos{
  position: relative;
  width: 260px;
  height: 170px;

  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);

  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

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

.contenedores-hijos:hover{
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 18px 35px rgba(255,255,255,0.23);
  filter: brightness(1.05);
}

/* ==========================
   TÍTULOS
   ========================== */
h2{
  text-align: center;
  padding-top: 160px; /* espacio por navbar fijo */
  font-size: 40px;
  padding-bottom: 15px;
}

.titulos{
  color: #000000;
  text-align: center;
  padding-bottom: 15px;
  font-size: 40px;
}

/* ==========================
   MODAL (:target)
   ========================== */
.modal{
  display: none;
  position: fixed;
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100vh;

  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;

  z-index: 9999;
  padding: 16px;
}

.modal img{
  max-width: 92%;
  max-height: 88vh;
  border-radius: 20px;
}

.modal:target{
  display: flex;
}

/* Botón cerrar */
.cerrar{
  position: absolute;
  top: 16px;
  right: 16px;

  color: #ffffff;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.35);

  width: 38px;
  height: 38px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  font-size: 18px;
  text-decoration: none;
}

/* ==========================
   RESPONSIVE
   ========================== */

/* ✅ TABLET ( 992px) */
@media (max-width: 992px){

  .contenedor-padre-limpieza{
    max-width: 100%;
    margin-inline: 10px;
  }

  /* 2 tarjetas por fila */
  .contenedores-hijos{
    width: 45%;
    height: 170px;
  }

  h2,
  .titulos{
    font-size: 32px;
    padding-top: 120px;
  }
}

/* ✅ TABLET VERTICAL ( 768px) */
@media (max-width: 768px){

  .contenedor-padre-limpieza{
    gap: 15px;
    padding: 20px 10px;
  }

  .contenedores-hijos{
    width: 48%;   /* 2 por fila en tablet vertical */
    height: 160px;
  }

  h2,
  .titulos{
    font-size: 28px;
    padding-top: 100px;
  }

  /* ✅ Menú móvil: más seguro con ~ */
  .label-check{
    display: block;
  }

  .nav-links{
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    background-color: #253944;
    gap: 0;
    padding: 10px 0;
  }

  .nav-links li a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
  }

  .nav-links li a:hover{
    background-color: #bdbdbd;
  }

  .check-menu:checked ~ .nav-links{
    display: flex;
  }
}

/* ✅ MÓVIL ( 576px) */
@media (max-width: 576px){

  /* 1 tarjeta por fila */
  .contenedores-hijos{
    width: 90%;
    height: 180px;
  }

  h2,
  .titulos{
    font-size: 24px;
    padding-top: 90px;
  }

  .cerrar{
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* ✅ MÓVILES PEQUEÑOS (≤ 480px) */
@media (max-width: 480px){

  .contenedores-hijos{
    width: 100%;
    height: 170px;
  }

  h2,
  .titulos{
    font-size: 22px;
    padding-top: 80px;
  }
}