/* ==========================================================================
   BOTONES DE LA PORTADA (común a Velario y Enviaunarosa) — Fase 4
   Propuesta B elegida por el usuario: botones teñidos con su color.
   El color de cada tipo llega como variables (includes/colores.php):
     --c (borde), --c-suave (fondo), --c-fuerte (fondo al pasar el ratón),
     --c-texto, --c-halo.
   Se carga después de candles.css y gana por especificidad (#buttonstop …),
   así que las reglas antiguas por id (#add_candle_button…) quedan sin efecto.
   ========================================================================== */
#buttonstop .col-sm-12 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

#buttonstop .boton-tipo,
#buttonstop .boton-eterna,
#buttonstop .boton-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin: 0;
  padding: 0 24px;
  border-radius: 14px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}

/* --- Tipos de vela/rosa: tono suave + borde del color --- */
#buttonstop .boton-tipo {
  background-color: var(--c-suave);
  border: 1.5px solid var(--c);
  color: var(--c-texto);
}
#buttonstop .boton-tipo:hover,
#buttonstop .boton-tipo:focus-visible {
  background-color: var(--c-fuerte);
  border-color: var(--c);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px var(--c-halo), 0 8px 20px rgba(0, 0, 0, 0.45);
  outline: none;
}
#buttonstop .boton-tipo:active { transform: translateY(0); }

/* --- Eterna: oscura con borde dorado que brilla --- */
#buttonstop .boton-eterna {
  background-color: #1a1408;
  border: 2px solid #e9b949;
  color: #f6d77d;
  font-weight: 700;
}
#buttonstop .boton-eterna:hover,
#buttonstop .boton-eterna:focus-visible {
  background-color: #2a210c;
  border-color: #f6d77d;
  color: #ffe9a8;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(233, 185, 73, 0.25), 0 0 26px rgba(233, 185, 73, 0.35);
  outline: none;
}

/* --- Botón con el color de la web (p. ej. «Regala un ramo») --- */
#buttonstop .boton-marca {
  background-color: var(--marca, #a8203f);
  border: 1.5px solid var(--marca, #a8203f);
  color: #ffffff;
}
#buttonstop .boton-marca:hover,
#buttonstop .boton-marca:focus-visible {
  background-color: var(--marca-fuerte, #c42e4f);
  border-color: var(--marca-fuerte, #c42e4f);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.45);
  outline: none;
}

#buttonstop .icono-boton { flex: 0 0 auto; }

/* Salto de línea forzado entre grupos (perfil: 'salto') */
#buttonstop .salto-botones { flex-basis: 100%; height: 0; }

@media (max-width: 575px) {
  #buttonstop .col-sm-12 { gap: 10px; }
  #buttonstop .boton-tipo,
  #buttonstop .boton-eterna,
  #buttonstop .boton-marca { font-size: 1rem; padding: 0 18px; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  #buttonstop .boton-tipo,
  #buttonstop .boton-eterna,
  #buttonstop .boton-marca { transition: none; }
  #buttonstop .boton-tipo:hover,
  #buttonstop .boton-eterna:hover,
  #buttonstop .boton-marca:hover { transform: none; }
}