:root {
  --pg-verde-marca: #0A6834;
  --pg-verde-claro: #62993E;
  --pg-dorado: #D9A93A;
  --pg-negro: #111111;
  --pg-blanco: #FFFFFF;
  --pg-gris-claro: #F4F6F4;
  --pg-radio: 14px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--pg-negro);
  background: var(--pg-blanco);
}

a { color: var(--pg-verde-marca); }

.pg-btn-primario {
  background: var(--pg-dorado);
  color: var(--pg-negro);
  border: none;
  border-radius: 999px;
  padding: .6rem 1.4rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.pg-btn-primario:hover { background: #c69730; color: var(--pg-negro); }

.pg-btn-secundario {
  background: transparent;
  color: var(--pg-verde-marca);
  border: 2px solid var(--pg-verde-marca);
  border-radius: 999px;
  padding: .5rem 1.3rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.pg-btn-secundario:hover { background: var(--pg-verde-marca); color: var(--pg-blanco); }

.pg-seccion-oscura {
  background: var(--pg-verde-marca);
  color: var(--pg-blanco);
  padding: 3rem 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.pg-seccion-oscura a { color: var(--pg-blanco); }

.pg-card {
  background: var(--pg-blanco);
  border: 1px solid #e5e5e5;
  border-radius: var(--pg-radio);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pg-card-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--pg-gris-claro);
  display: block;
}

.pg-card-foto-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--pg-gris-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #99a599;
  font-size: .85rem;
  text-align: center;
}

.pg-card-cuerpo {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

.pg-chip {
  display: inline-block;
  border-radius: 999px;
  padding: .2rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  width: fit-content;
}
.pg-chip-disponible { background: #e5f3e8; color: var(--pg-verde-marca); }
.pg-chip-agotado { background: #f3e5e5; color: #a33; }