:root {
  /* Colores principales */
  --color-primary: #E91E63;
  --color-secondary: #00BCD4;

  /* Fondo */
  --color-background: #FAFAFA;

  /* Acento y botones */
  --color-botones: rgb(231, 140, 20);

  /* Texto base */
  --color-texto-base: #212121;
}

/* Aplicaciones generales */
body {
  background-color: var(--color-background);
  color: var(--color-texto-base);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* Botones personalizados */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: #c2185b;
  border-color: #c2185b;
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary:hover {
  background-color: #0097a7;
  border-color: #0097a7;
}

.btn-accent {
  background-color: var(--color-botones);
  border-color: var(--color-botones);
  color: #fff;
}

.btn-accent:hover {
  background-color: rgb(200, 120, 15);
  border-color: rgb(200, 120, 15);
}

/* Ejemplo específico solo para buscador */
#buscador::placeholder {
    color: var(--color-secondary);
    font-weight: 500;
}

.px-6 {
  padding-left: 5rem; /* 80px */
  padding-right: 5rem;
}