/* Club BPS — parte del set custom-club-* (CSS global del sitio).
   Cargado como archivo fisico via index.php del template (registerAndUseStyle + ?v=filemtime).
   Partido desde el antiguo custom-club.css monolitico; un archivo por BLOQUE. */

/* ============================================================
   BLOQUE 8 — Slide del home con contenido alineado a la derecha
   El slide en sí (.sp-item.slider-content-vercally-center) es un flex
   container con align-items:center que SPPB usa para TODOS los slides,
   sea cual sea su alineación horizontal — no se puede tocar ese
   align-items sin mover también los slides con texto centrado/izquierda.
   Por eso el override va en el flex ITEM que envuelve específicamente
   al contenido "align-right" (vía :has, ya que la clase de alineación
   la trae el hijo, no el propio .sp-slider-content-wrap), con
   align-self:flex-end para bajarlo al fondo sin afectar otros slides.
   Las flechas de navegación (.sp-nav-control) viven en otra rama del
   DOM (hermanas del slide, no hijas del flex de contenido), así que
   siguen centradas verticalmente sin necesidad de ningún ajuste.
   !important porque SPPB genera un <style> propio por addon con selector
   por ID (#sppb-addon-XXX .sp-slider .sp-slider-content-wrap) que fija
   margin-bottom:0 con más especificidad que una clase. */
.sp-slider-content-wrap:has(.sp-slider-content-align-right) {
  align-self: flex-end;
  margin-bottom: 60px !important;
}
@media (min-width: 992px) {
  .sp-slider-content-wrap:has(.sp-slider-content-align-right) {
    margin-bottom: 140px !important;
  }
}

/* ============================================================
   BLOQUE 8b — Botón CTA del slide del home
   El addon sp_slider SÍ trae estilo propio para su botón, pero no
   en el <a class="sppb-sp-slider-button"> sino en el <span
   class="sp-slider-btn-text"> de adentro, vía un <style> propio
   por addon con selector encadenado de 3 IDs (color/padding/radio
   configurados a mano en el admin de SPPB para este slide, mismo
   mecanismo ya documentado en BLOQUE 8 para margin-bottom). Esa
   regla gana por especificidad a cualquier clase simple, así que
   acá SÍ hace falta !important — pero sólo en las propiedades de
   "forma" (radio, padding, borde) para unificar el look con el
   resto de botones del sitio (pill, sombra, lift en hover); el
   color de fondo NO se fuerza para no romper la personalización
   por slide que ya permite el admin de SPPB (este slide en
   particular ya viene configurado en rojo de marca).
   El <a> exterior queda como wrapper sin chrome propio para no
   generar una "caja dentro de la caja" (bug visto al estilizar
   directo el <a>: quedaba el pill azul del <a> con el span rojo
   adentro, sin usar el mismo radio).
   Genérico: aplica a cualquier slide futuro con botón, tenga o no
   personalización propia, sea align-right/left/center.
   ============================================================ */
.sppb-sp-slider-button {
  display: inline-block;
  text-decoration: none;
}
.sppb-sp-slider-button .sp-slider-btn-text {
  display: inline-block;
  background: var(--azul-600);
  color: #fff;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  border: none !important;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  transition: background .2s, box-shadow .2s, transform .15s;
}
.sppb-sp-slider-button:hover .sp-slider-btn-text,
.sppb-sp-slider-button:focus .sp-slider-btn-text {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
@media (max-width: 767.98px) {
  .sppb-sp-slider-button .sp-slider-btn-text {
    padding: 10px 22px !important;
    font-size: 13px;
  }
}