/* SECCIÓN BELLEZA */
#belleza {
  text-align: center;
  padding: 0px 10px;
}

#belleza h1 {
  color: #7f6000;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-size: 50px;
}

#belleza p {
  color: #555;
  margin-bottom: 30px;
  font-size: 20px;
}

/* Responsivo */
@media (max-width: 768px) {
  #belleza h1 {
    font-size: 30px;
  }
}
/* ---------- */

/* ===== Estilos para la lista de negocios ===== */
/* ===== DISEÑO GENERAL ===== */

.lista-negocios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin: 30px auto;
  max-width: 1000px;
}

/* ===== BLOQUE NO PULSADO ===== */

.negocio {
  background: #fff;
  border: 2px solid #7f6000;
  border-radius: 16px;
  padding: 15px;
  transition: all 0.3s;
  cursor: pointer;
}

.negocio:hover {
  background: #fffaf0;
}

/* imagen + texto en la misma fila */
.info-breve {
  display: flex;
  align-items: center;
  gap: 15px;
}

.foto-circular {
  width: 120px;
  height: 120px;
  border-radius: 10%;
  object-fit: cover;
  border: 2px solid #7f6000;
  flex-shrink: 0;
}

.texto-breve {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.texto-breve h2 {
  font-size: 20px;
  text-align: left;
  color: #7f6000;
  margin: 0;
  padding-left: 0px;
}

.texto-breve p {
  font-size: 18px;
  font-weight: lighter;
  color: #555;
  margin: 0;
}

/* ---------- BLOQUES ALINEADOS ---------- */
    .alineado {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 5px;
      padding-left: 0px;
    }

    .fila {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .campo {
      width: 50px; /* ancho fijo para alinear */
      text-align: left;
      font-weight: lighter;
      color: black;
    }

    .valor::before {
      content: ": ";
      margin-left: 2px;
    }

    .valor {
      flex: 1;
      color: black;
    }


/* Animación */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* ===== Responsivo ===== */
@media (max-width: 768px) {
  .negocio {
    width: 100%;
  }
  .lista-negocios {
    grid-template-columns: 1fr;
    gap: 10px;
    width: 95%;
  }
  .imagen-derecha {
    margin-top: 10px;
  }
  #belleza {
    padding: 0px 10px;
  }
  #belleza h1 {
    font-size: 45px;
  }
}

/* ===== Ocultar etiquetas (.campo) en móviles ===== */
@media (max-width: 768px) {
  .fila .campo {
    display: none;
  }

  /* Ajuste para que el texto de valor ocupe todo el ancho */
  .fila .valor {
    flex: 1;
    color: black;
  }

  /* Quita los dos puntos automáticos antes del texto */
  .valor::before {
    content: "";
  }

  .alineado {
    margin-left: 0px;
    text-align: left;
  }
}

/* === BANNER ESPECIAL PUBLICIDAD === */
.banner-publicidad {
  width: 100%;
  max-width: 1200px;          /* igual que el ancho visual de la lista */
  margin: 0 auto;          /* separación arriba/abajo y centrado */
}

.banner-publicidad img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* En celular, que coincida con el ancho de cada card */
@media (max-width: 768px) {
  .banner-publicidad {
    width: 95%;
    max-width: 95%;
  }
}

/* En laptop, que coincida con el ancho de cada card */
@media (min-width: 768px) {
  .banner-publicidad {
    width: 48%;
    max-width: 48%;
  }
}