: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-terciary {
  background-color: white;
  border-color: black;
}

.btn-terciary:hover {
  background-color: #c2185b;
  border-color: #0097a7;
  color: white;
}

.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: 1rem; /* 80px */
  padding-right: 1rem;
}

.fondo_gris {
  background-color: #eee;
}


.fondo_negro {
  padding: 5px;
  border-radius: 10px;
  background-color: #212121;
  color: #FAFAFA;
}

.margin5 {
  margin-left: 5px;
}
.margin8 {
  margin-left: 8px;
}

.subtitulos {
  color: #1a79f4;
}

.enlace {
  color: inherit;
  text-decoration: none;
}
.enlace:hover{
  color: inherit;
  text-decoration: none;
}

.letraGruesa {
  font-weight: bold;
}

.envolvente{
  padding: 5px 0;
  color: white;
}

.translate-middle2 {
    transform: translate(-140%, -27%) !important;
}

.translate-middle3 {
    transform: translate(-383%, -27%) !important;
}

.translate-middle4 {
    transform: translate(-363%, -27%) !important;
}

.translate-middle5 {
    transform: translate(-434%, -27%) !important;
}

.translate-middle6 {
    transform: translate(-555%, -27%) !important;
}

.bg-purpura {
  background-color: #f780e3 !important;
}

.bg-purplerain {
  background-color: #3b0997 !important;
}