/* Club BPS — Custom CSS canonico (versionado), set custom-club-*.
   Archivos fisicos cargados via index.php del template (registerAndUseStyle + ?v=filemtime).
   NO usar el "Custom CSS" de Helix (BD) para estilos globales nuevos.
   Breakpoint off-canvas: < 768px (md). Ver header.php / features/menu.php. */

/* ============================================================
   BLOQUE 1 — Base de marca, header, navegación y hero
   ============================================================ */
:root{
  --brand-azul:#03255B;--brand-rojo:#E01225;--brand-verde:#577F30;--brand-gris:#A4A7AB;
  --azul-900:#03255B;--azul-800:#072F6F;--azul-700:#0F427D;--azul-600:#1957A4;
  --azul-500:#2470C5;--azul-100:#E5EDF7;--azul-50:#F2F6FB;
  --rojo-700:#A50C1A;--rojo-600:#E01225;--rojo-500:#E83A4B;--rojo-100:#FBE3E5;
  --verde-800:#3F5C22;--verde-700:#577F30;--verde-500:#7DA94F;--verde-100:#EAF1DE;
  --naranja-700:#9A6300;--naranja-600:#E89B0E;--naranja-100:#FEF3DC;
  --gris-900:#1A1D24;--gris-700:#444A55;--gris-600:#555555;--gris-500:#A4A7AB;
  --gris-300:#DDE3EC;--gris-100:#F5F7FA;--gris-50:#FAFBFD;--blanco:#FFFFFF;
  --shadow-xs:0 1px 2px rgba(3,37,91,.05);
  --shadow-sm:0 2px 8px rgba(3,37,91,.08);
  --shadow-md:0 8px 24px rgba(3,37,91,.12);
  --shadow-lg:0 16px 48px rgba(3,37,91,.18);
  --radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:16px;
}
/* ===== Tipografía base ===== */
body{font-family:'Roboto',system-ui,sans-serif;color:var(--gris-600);}
h1,h2,h3,h4,h5,h6{color:var(--gris-900);font-weight:700;}
a{color:var(--azul-600);text-decoration:none;transition:color .2s;}
a:hover{color:var(--azul-800);}
/* ===== Topbar refinado con accents de marca ===== */
#sp-top-bar{padding:0;font-size:14px;letter-spacing:.2px;position:relative;}
#sp-top-bar::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(to right,
    var(--azul-900) 0%,var(--azul-900) 33.33%,
    var(--rojo-600) 33.33%,var(--rojo-600) 66.66%,
    var(--verde-700) 66.66%,var(--verde-700) 100%);
  z-index:2;
}
#sp-top-bar .container{padding-top:6px;padding-bottom:6px;}
#sp-top-bar a{color:inherit;transition:color .2s,background .2s,opacity .2s;}
#sp-top-bar a:hover{color:#fff;}
/* Redes sociales: cada icono adopta el color de su marca al hover */
#sp-top-bar .sp-module ul.social-icons{display:flex;gap:6px;margin:0;padding:0;list-style:none;}
#sp-top-bar .sp-module ul.social-icons li a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  color:#fff;background:rgba(255,255,255,.06);
  transition:all .25s ease;
}
#sp-top-bar .sp-module ul.social-icons li a:hover{transform:translateY(-2px);}
#sp-top-bar .sp-module ul.social-icons li a[href*="facebook"]:hover{background:#1877F2;}
#sp-top-bar .sp-module ul.social-icons li a[href*="instagram"]:hover{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);}
#sp-top-bar .sp-module ul.social-icons li a[href*="youtube"]:hover{background:#FF0000;}
#sp-top-bar .sp-module ul.social-icons li a[href*="wa.me"]:hover,
#sp-top-bar .sp-module ul.social-icons li a[href*="whatsapp"]:hover{background:#25D366;}
.sp-contact-info{display:flex;justify-content:flex-end;gap:24px;margin:0;padding:0;list-style:none;}
.sp-contact-info > li{margin:0;display:flex;align-items:center;gap:6px;}
.sp-contact-info > li i,.sp-contact-info > li svg{color:var(--gris-300);}
@media (max-width: 767px) {
  .sp-contact-info {
    justify-content: space-between;
    width: 100%;
  }
}
/* ===== Header ===== */
.sp-header{
  background-color:#fff;
  box-shadow:var(--shadow-sm);
  transition:background-color .3s ease,box-shadow .3s ease,height .25s ease;
  /* Franja decorativa de 3 colores debajo del header (azul/rojo/verde, igual al logo) */
  border-bottom:none;
  position:relative;
}
.sp-header::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  background:linear-gradient(to right,
    var(--azul-900) 0%,var(--azul-900) 33.33%,
    var(--rojo-600) 33.33%,var(--rojo-600) 66.66%,
    var(--verde-700) 66.66%,var(--verde-700) 100%);
  z-index:2;
}
/* NOTA: ".sp-logo" no existe como clase en el DOM (el wrapper real es
   #sp-logo > .sp-column > .logo > img.logo-image.logo-default); las reglas
   de abajo apuntan a los selectores reales para que sí apliquen. */
#sp-header .logo{display:flex;align-items:center;height:100%;}
#sp-header .logo-image.logo-default{transition:opacity .25s ease,transform .25s ease;height:48px;width:auto;}
@media (min-width: 992px) {
  #sp-header .logo-image.logo-default {
    height: 70px;
  }
}
/* Desde 1400px el header gana ancho (ver max-width del container-inner más
   abajo) y un logo fijo en 70px se ve chico dentro de la franja; lo escalamos
   un poco más para que acompañe. */
@media (min-width: 1400px) {
  #sp-header .logo-image.logo-default {
    height: clamp(70px, 4vw, 84px);
  }
}
/* ===== Header fluido (layout-fluid) =====
   El .container de Bootstrap salta a anchos fijos (1140→960→720) mucho más
   angostos que el viewport; logo+menú+gutters no entraban en 960/720 y la fila
   del header se partía (la columna del menú caía bajo el logo = "2da línea").
   Usamos el ancho real de la pantalla con padding fluido y prohibimos el wrap
   de la fila para que logo y menú queden SIEMPRE en una sola línea. */
#sp-top-bar > .container,
#sp-header > .container{
  max-width:none !important;
  width:100% !important;
  padding-left:clamp(16px, 3vw, 40px);
  padding-right:clamp(16px, 3vw, 40px);
}
#sp-header .container-inner > .row{
  flex-wrap:nowrap !important;
  align-items:center;
}
#sp-menu{min-width:0;}                 /* permite que la columna del menú se comprima */
/* ===== Tope de ancho centrado en pantallas grandes (≥1400px) =====
   El fix de arriba deja el .container full-bleed (fondo del header ocupa
   todo el viewport) para no romper el layout en los saltos de Bootstrap.
   Pero sin ningún tope, en monitores anchos (1400px+) el logo queda pegado
   al borde izquierdo y el menú al borde derecho con un vacío enorme en el
   medio. Acá acotamos sólo el CONTENIDO (.container-inner), centrado,
   mientras el fondo (.sp-header, franja de 3 colores) sigue full-bleed. */
@media (min-width: 1400px) {
  #sp-top-bar > .container > .container-inner,
  #sp-header > .container > .container-inner{
    max-width: 1760px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ===== Sticky: header azul institucional + logo blanco ===== */
.sp-header.header-sticky,
.sp-header.is-sticky{
  background-color:var(--azul-900) !important;
  box-shadow:var(--shadow-md);
}
/* ===== Header Transparente para Home (Video Hero) =====
   :not(.view-article) — pageclass_sfx del Itemid de Home ("header-transparent")
   se hereda en cualquier artículo enlazado sin ítem de menú propio (llega con
   ?Itemid=413 en la URL). view-article lo agrega Joomla en TODA vista de
   artículo sin importar el Itemid heredado, así que sirve para excluir el
   efecto ahí sin tocar el menú ni el plugin. */
body.header-transparent:not(.view-article) .header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
/* Top bar: Azul institucional con transparencia sutil */
body.header-transparent:not(.view-article) #sp-top-bar {
  background-color: rgba(3, 37, 91, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body.header-transparent:not(.view-article) #sp-header {
  /* Degradado sutil de negro a transparente */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: blur(4px); /* Reducido para que sea más leve */
  border-bottom: none;
  background-color: transparent;
  box-shadow: none;
}
/* Asegurar que el contenido principal no sea empujado hacia abajo */
body.header-transparent:not(.view-article) #sp-main-body {
  padding-top: 0 !important;
}
/* Quitar la franja decorativa de 3 colores en modo transparente para no tapar el video */
body.header-transparent:not(.view-article) #sp-header::after {
  display: none;
}
/* Header Transparente: Textos del menú y contacto en blanco para contraste */
body.header-transparent:not(.view-article) .sp-megamenu-parent > li > a,
body.header-transparent:not(.view-article) .sp-contact-info > li,
body.header-transparent:not(.view-article) .sp-contact-info > li a,
body.header-transparent:not(.view-article) #offcanvas-toggler .burger-icon > span {
  color: #fff !important;
}
body.header-transparent:not(.view-article) #offcanvas-toggler .burger-icon > span {
  background-color: #fff !important;
}
/* Cuando el header transparente se vuelve sticky, recupera su color sólido */
#sp-header.header-sticky,
body.header-transparent:not(.view-article) #sp-header.header-sticky {
  position: fixed !important;
  top: 0 !important;
  margin-top: 0 !important;
  background: var(--azul-900) !important;
  background-color: var(--azul-900) !important;
  backdrop-filter: none !important;
  display: block !important;
  box-shadow: var(--shadow-md) !important;
  z-index: 9999 !important;
}
/* Fix Logo en Sticky: Ocultar default/phone y mostrar sticky (blanco) en todas las resoluciones */
#sp-header.header-sticky .logo-default,
#sp-header.header-sticky .logo-image-phone,
body.header-transparent:not(.view-article) #sp-header.header-sticky .logo-default,
body.header-transparent:not(.view-article) #sp-header.header-sticky .logo-image-phone {
  display: none !important;
}
#sp-header.header-sticky .logo-sticky,
body.header-transparent:not(.view-article) #sp-header.header-sticky .logo-sticky {
  display: inline-block !important; /* Fuerza mostrar el logo blanco incluso en móvil */
  height: 40px; /* Tamaño del logo en sticky */
  width: auto;
}
/* Centrado vertical del menú en Sticky: Asegurar que la fila ocupe el alto del header */
#sp-header {
  display: flex;
  align-items: center;
}
#sp-header > .container,
#sp-header .container-inner,
#sp-header .container-inner > .row {
  height: 100%;
}
/* Asegurar visibilidad del icono off-canvas en sticky */
#sp-header.header-sticky #offcanvas-toggler .burger-icon > span,
body.header-transparent:not(.view-article) #sp-header.header-sticky #offcanvas-toggler .burger-icon > span {
  background-color: #fff !important;
}
#sp-header.header-sticky::after,
body.header-transparent:not(.view-article) #sp-header.header-sticky::after {
  display: block !important;
}
/* Usar logo normal (blanco o color según corresponda) en móvil en vez de isotipo */
#sp-header:not(.header-sticky) .logo-default {
  display: inline-block !important;
}
#sp-header:not(.header-sticky) .logo-image-phone {
  display: none !important;
}
/* La franja de 3 colores se mantiene debajo */
#sp-header.header-sticky::after,
#sp-header.is-sticky::after{
  background:linear-gradient(to right,
    var(--rojo-600) 0%,var(--rojo-600) 50%,
    var(--verde-700) 50%,var(--verde-700) 100%);
}
/* Sticky: textos del menú en blanco */
#sp-header.header-sticky .sp-megamenu-parent > li > a,
#sp-header.is-sticky .sp-megamenu-parent > li > a{color:#fff !important;}
/* Sticky: texto del menú permanece blanco; el underline rojo aparece debajo */
#sp-header.header-sticky .sp-megamenu-parent > li:hover > a,
#sp-header.header-sticky .sp-megamenu-parent > li.active > a,
#sp-header.header-sticky .sp-megamenu-parent > li.current > a,
#sp-header.header-sticky .sp-megamenu-parent > li.current-item > a,
#sp-header.is-sticky .sp-megamenu-parent > li:hover > a,
#sp-header.is-sticky .sp-megamenu-parent > li.active > a,
#sp-header.is-sticky .sp-megamenu-parent > li.current > a,
#sp-header.is-sticky .sp-megamenu-parent > li.current-item > a{
  color:#fff !important;
  text-decoration-color:var(--rojo-600) !important;
}
#sp-header.header-sticky #offcanvas-toggler .burger-icon > span,
#sp-header.is-sticky #offcanvas-toggler .burger-icon > span{background-color:#fff !important;}
/* ===== Megamenú: altura correcta + NO-WRAP fluido (≥md) =====
   Requisito: hasta que aparezca el off-canvas (<768px) el menú NUNCA
   pasa a segunda línea. El espaciado (padding) y la tipografía se
   reducen de forma fluida con clamp() al achicar el viewport. */
.sp-megamenu-parent{
  align-items:center;
  height:100%;
  margin:0;padding:0;list-style:none;
  flex-wrap:nowrap !important;          /* garantía dura: sin segunda línea */
}
/* Visible como flex sólo desde md; por debajo manda el .d-none de Bootstrap
   (la UL trae "d-none d-md-block") y se usa el off-canvas. */
@media (min-width:768px){
  .sp-megamenu-parent{display:flex !important;}
}
.sp-megamenu-parent > li{
  margin:0;                              /* el padding del enlace separa los ítems */
  display:flex;align-items:center;height:100%;
  flex:0 0 auto;
}
/* line-height normal + height 100% + flex center => el menú no estira el header */
.sp-megamenu-parent > li > a{
  display:flex !important;
  align-items:center;
  height:100%;
  white-space:nowrap;                    /* cada ítem en una sola línea */
  /* Espaciado y tamaño FLUIDOS: se comprimen al bajar el ancho, sin wrap.
     Topes levemente más altos (20px/16px) para que acompañen el header
     centrado en pantallas grandes (ver max-width del container-inner). */
  padding-inline:clamp(6px, 1.1vw, 20px) !important;
  font-size:clamp(0.7rem, 1vw + 3.5px, 16px);
  letter-spacing:.2px;
  line-height:1.4 !important;
  font-family:'Roboto',sans-serif;
  font-weight:500;
  text-transform:none;
  color:var(--gris-900);
  /* Underline pegado al texto via text-decoration nativo:
     transparente por defecto, rojo institucional al hover/active. */
  text-decoration:underline solid transparent 2px;
  text-decoration-thickness:2px;
  text-underline-offset:6px;
  transition:color .25s ease,text-decoration-color .25s ease,padding .2s ease,font-size .2s ease;
}
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.current > a,
.sp-megamenu-parent > li.current-item > a{
  text-decoration-color:var(--rojo-600);
}
/* ===== Dropdown del megamenú ===== */
.sp-megamenu-parent .sp-dropdown,
.sp-megamenu-parent .sp-mega-group{
  border-radius:var(--radius-md) !important;
  box-shadow:var(--shadow-sm) !important;
  padding:8px 0 !important;
  margin-top:6px;
  background:#fff !important;
  /* Borde superior con accent del brand — más fino que antes para que
     el panel se lea más liviano */
  border-top:2px solid var(--azul-900) !important;
  /* Ancho fijo (180px) pisado: viene de un inline style que pone Helix
     desde el parámetro "dropdown_width" del Template Style — con items
     largos ("Proyecto de Magallanes") queda partido en 2 líneas.
     width:auto (ajustado al contenido) se descartó: el hover de cada
     link suma 4px de padding-left (ver regla más abajo), y como el ancho
     se recalcula en vivo contra el contenido, ese único ítem forzaba un
     "crecimiento" visible del panel al pasar el mouse. Un ancho fijo con
     margen de sobra (280px, cubre "Proyecto de Magallanes" + el padding
     extra del hover) evita el recálculo por completo. */
  width:280px !important;
}
.sp-megamenu-parent .sp-dropdown-items{margin:0;padding:0;list-style:none;}
.sp-megamenu-parent .sp-dropdown-items > li > a{
  white-space:nowrap;
  display:block;
  padding:10px 18px !important;
  margin:2px 8px;
  border-radius:var(--radius-sm);
  font-weight:400;
  font-size:14px;
  color:var(--gris-900);
  transition:background .2s ease,color .2s ease,padding-left .2s ease;
}
.sp-megamenu-parent .sp-dropdown-items > li > a:hover{
  background-color:var(--azul-100) !important;
  color:var(--azul-900) !important;
  padding-left:22px !important;
}
.sp-megamenu-parent .sp-dropdown-items > li.active > a{
  background-color:var(--azul-100);
  color:var(--azul-900);
  font-weight:500;
}
/* ===== <768px: se usa el off-canvas (burger d-md-none) =====
   El menú horizontal queda oculto por el .d-none de Bootstrap.
   Header móvil: logo a la IZQUIERDA y grande (~100px de alto); el burger
   del off-canvas queda bien a la derecha (la .sp-column ya es justify-end).
   Un logo de 100px no entra en el header móvil base (50/60px): hay que
   agrandar el alto del header y de su ancla .logo, y centrar verticalmente.
   El sticky-header-placeholder lo ajusta solo el JS (mide outerHeight). */
@media (max-width:767.98px){
  #sp-header{height:112px !important;}
  #sp-header .container-inner > .row{min-height:112px;}
  /* Ancla del logo + columna: que ocupen el alto del header y centren */
  #sp-header .logo,
  #sp-header .logo a{height:auto !important;}
  #sp-logo{
    display:flex;
    align-items:center;
    height:112px;
    margin:0;
    padding:0;
  }
  #sp-logo > .sp-column{display:flex;align-items:center;height:100%;}
  /* Logo móvil (isotipo) a ~100px de alto, ancho proporcional */
  #sp-logo .logo-image-phone,
  #sp-logo .logo-image{
    height:100px !important;
    max-height:100px !important;
    width:auto !important;
  }
  /* Burger centrado verticalmente en el header más alto, a la derecha */
  #offcanvas-toggler{height:112px !important;line-height:112px !important;}
}
/* ===== Off-canvas (habilitado) =====
   La mecánica de slide/overlay la provee template.css vía
   body.offcanvas-active. Acá sólo el restyle de marca. El fondo
   institucional (#03255b) viene del param offcanvas_menu_bg_color. */
.offcanvas-menu::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(to right,
    var(--azul-900) 0%,var(--azul-900) 33.33%,
    var(--rojo-600) 33.33%,var(--rojo-600) 66.66%,
    var(--verde-700) 66.66%,var(--verde-700) 100%);
  z-index:1;
}
.offcanvas-menu .offcanvas-inner{padding:24px 16px;}
.offcanvas-menu ul.menu > li > a{
  padding:14px 18px !important;
  border-radius:var(--radius-md);
  font-size:16px;
  font-weight:500;
  color:#fff !important;
  transition:background .2s ease;
}
.offcanvas-menu ul.menu > li > a:hover,
.offcanvas-menu ul.menu > li.active > a{
  background-color:rgba(255,255,255,.1);
  color:#fff !important;
}
/* Ícono de "tiene subcategorías" a la derecha del todo — el template
   trae la variante "offcanvas-arrow-left" activa (clase en .offcanvas-menu)
   que fuerza left:0, pegando la flecha casi contra el texto en vez del
   extremo derecho de la fila. */
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler{
  left:auto !important;
  right:8px !important;
}
/* Sub-ítems (ej. subcategorías de Noticias): más aire vertical. El default
   los deja como <a> INLINE, así que el padding vertical sangra pero NO empuja
   el layout y las filas se enciman (gap negativo → aspecto apretado). Con
   display:block el padding sí genera filas reales (~38px) bien separadas. */
.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a{
  display:block;
  padding-top:10px !important;
  padding-bottom:10px !important;
}
body.ltr .offcanvas-menu .offcanvas-inner ul.menu > li ul > li > a{
  padding-left:24px !important;
}
/* Botón cerrar (X) en blanco sobre el panel azul.
   La base pinta TODOS los burger-icon en #1a1d24 al activar; acá
   forzamos blanco sólo para el de cerrar (más específico). */
.offcanvas-active .close-offcanvas .burger-icon > span{
  background-color:#fff !important;
}
/* Logo del off-canvas en versión blanca (logo_blanco.svg, el mismo del
   header sticky). Por defecto bajo lg se mostraba el isotipo a color
   (logo-image-phone); lo ocultamos y mostramos el logo blanco completo. */
.offcanvas-menu .logo-image-phone{display:none !important;}
.offcanvas-menu .logo-sticky{display:inline-block !important;}
/* Contacto dentro del off-canvas: la regla genérica .sp-contact-info
   (row + justify-end + gap 24) desbordaba el panel de 300px y cortaba
   el teléfono. Lo apilamos en columna, alineado a la izquierda y un
   poco más grande/legible sobre el fondo azul. */
.offcanvas-menu .offcanvas-inner .sp-contact-info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:14px;
  margin:8px 0 4px;
  font-size:15.5px;
}
.offcanvas-menu .offcanvas-inner .sp-contact-info > li{
  margin:0;
  gap:11px;
  color:#fff;
  line-height:1.3;
  word-break:break-word;
}
.offcanvas-menu .offcanvas-inner .sp-contact-info > li a{color:#fff;}
.offcanvas-menu .offcanvas-inner .sp-contact-info > li a:hover{color:var(--gris-300);}
.offcanvas-menu .offcanvas-inner .sp-contact-info > li i,
.offcanvas-menu .offcanvas-inner .sp-contact-info > li .fas,
.offcanvas-menu .offcanvas-inner .sp-contact-info > li .far,
.offcanvas-menu .offcanvas-inner .sp-contact-info > li svg{
  color:rgba(255,255,255,.8) !important;
  font-size:17px;
  width:22px;
  text-align:center;
  flex-shrink:0;
}
/* Redes sociales del off-canvas: íconos circulares un poco más grandes,
   blancos, con hover de marca (igual al topbar). */
.offcanvas-menu .offcanvas-inner ul.social-icons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.offcanvas-menu .offcanvas-inner ul.social-icons > li{margin:0 !important;}
.offcanvas-menu .offcanvas-inner ul.social-icons > li > a{
  opacity:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border-radius:50%;
  font-size:19px;
  color:#fff;
  background:rgba(255,255,255,.1);
  transition:transform .25s ease,background .25s ease;
}
.offcanvas-menu .offcanvas-inner ul.social-icons > li > a:hover{transform:translateY(-2px);color:#fff;}
.offcanvas-menu .offcanvas-inner ul.social-icons > li > a[href*="facebook"]:hover{background:#1877F2;}
.offcanvas-menu .offcanvas-inner ul.social-icons > li > a[href*="instagram"]:hover{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);}
.offcanvas-menu .offcanvas-inner ul.social-icons > li > a[href*="youtube"]:hover{background:#FF0000;}
.offcanvas-menu .offcanvas-inner ul.social-icons > li > a[href*="wa.me"]:hover,
.offcanvas-menu .offcanvas-inner ul.social-icons > li > a[href*="whatsapp"]:hover{background:#25D366;}
/* ===== Goto-top button con accent rojo institucional ===== */
.scroll-up,.sp-scroll-up,#sp-scroll-up,.sp-back-to-top{
  background-color:var(--azul-900) !important;
  color:#fff !important;
  border:2px solid var(--rojo-600) !important;
  width:44px !important;height:44px !important;
  border-radius:50% !important;
  box-shadow:var(--shadow-md) !important;
  transition:all .25s ease !important;
}
.scroll-up:hover,.sp-scroll-up:hover,#sp-scroll-up:hover,.sp-back-to-top:hover{
  background-color:var(--rojo-600) !important;
  border-color:var(--rojo-600) !important;
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg) !important;
}
/* ===== Botones SPPB ===== */
.sppb-btn{transition:background .2s,color .2s,box-shadow .2s,transform .15s;font-weight:700;border-radius:var(--radius-md);}
.sppb-btn:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.sppb-btn-primary{background:var(--azul-900);color:#fff;}
.sppb-btn-primary:hover{background:var(--azul-800);color:#fff;}
.sppb-btn-danger{background:var(--rojo-600);color:#fff;}
.sppb-btn-danger:hover{background:var(--rojo-700);color:#fff;}
.sppb-btn-success{background:var(--verde-700);color:#fff;}
.sppb-btn-success:hover{background:var(--verde-800);color:#fff;}
/* Botón blanco institucional (CTA sobre fondo azul, ej. "Hacete Socio") */
.sppb-btn-light{background:#fff;color:var(--azul-900);}
.sppb-btn-light:hover{background:var(--azul-50);color:var(--azul-900);}
/* ===== Cards / imágenes SPPB ===== */
.sppb-addon-image img{transition:transform .3s ease;border-radius:var(--radius-lg);}
/* ===== Tablas SPPB (Hacete socio) ===== */
.sppb-text-block table{
  width:100%;border-collapse:collapse;background:#fff;
  border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-xs);margin:8px 0;
}
.sppb-text-block table th{background:var(--azul-900);color:#fff;padding:12px 14px;text-align:left;font-weight:600;font-size:14px;letter-spacing:.3px;}
.sppb-text-block table td{padding:11px 14px;border-bottom:1px solid var(--gris-300);font-size:14px;}
.sppb-text-block table tr:nth-child(even) td{background:var(--gris-50);}
.sppb-text-block table tr:last-child td{border-bottom:0;}
/* ===== Footer con borde superior tricolor ===== */
#sp-footer,#sp-bottom{color:var(--gris-300);position:relative;}
#sp-footer{padding-top:24px;}
#sp-footer a,#sp-bottom a{color:var(--gris-300);}
#sp-footer a:hover,#sp-bottom a:hover{color:#fff;}
/* ===== Footer builder (SPPB): logo / menú / enlaces / contacto ===== */
#sp-footer-builder{position:relative;}
#sp-footer-builder::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  z-index:20;
  background:linear-gradient(to right,
    var(--azul-900) 0%,var(--azul-900) 33.33%,
    var(--rojo-600) 33.33%,var(--rojo-600) 66.66%,
    var(--verde-700) 66.66%,var(--verde-700) 100%);
}
.footer-builder-row{background:var(--azul-700);color:rgba(255,255,255,.82);}
.footer-builder-row .footer-col-title,
.footer-builder-row .sppb-addon-title{
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.3px;
  margin:0 0 10px 0;text-transform:uppercase;
  padding-bottom:10px;
  border-bottom:2px solid rgba(255,255,255,.25);
  display:inline-block;
}
/* El addon text_block (usado en Menú/Enlaces) deja un <p></p> vacío con
   margin del navegador que duplicaba el espacio bajo el título; se oculta. */
.footer-builder-row .sppb-addon-text-block .sppb-addon-content{display:none;}
.footer-col-logo{display:flex;align-items:flex-start;}
.footer-logo-img{height:40px;width:auto;max-width:100%;}
.footer-contact-list{list-style:none;margin:0;padding:0;}
.footer-contact-list li{margin-bottom:10px;font-size:14px;line-height:1.5;}
.footer-builder-row .footer-contact-list a{color:rgba(255,255,255,.82);text-decoration:none;}
.footer-builder-row .footer-contact-list a:hover{color:#fff;text-decoration:underline;}
.footer-contact-list li i{color:var(--azul-100);margin-right:8px;width:14px;text-align:center;}
.footer-social-links{display:flex;gap:12px;margin-top:16px;}
.footer-social-links a{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:15px;transition:background .2s ease,color .2s ease;
}
.footer-social-links a:hover{background:var(--rojo-600);color:#fff;}
/* Links de menú administrables (addon "navigation" de SPPB, clase custom "nav-footer-menu") */
.footer-builder-row .nav-footer-menu ul{list-style:none;margin:0;padding:0;}
.footer-builder-row .nav-footer-menu li{margin-bottom:6px;}
.footer-builder-row .nav-footer-menu li a{
  background-color:transparent!important;
  color:rgba(255,255,255,.82)!important;
  padding:4px 0!important;
  border-radius:0!important;
  font-size:14px;line-height:1.5;text-decoration:none;
  transition:color .2s ease;
}
.footer-builder-row .nav-footer-menu li a:hover{
  background-color:transparent!important;
  color:#fff!important;
  text-decoration:underline;
}
@media (max-width:767px){
  .footer-builder-row .sppb-column{margin-bottom:28px;}
  .footer-builder-row .sppb-column:last-child{margin-bottom:0;}
}
/* ===== Helpers de marca: badges con los 3 colores institucionales ===== */
.brand-badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-pill,999px);font-size:12px;font-weight:600;letter-spacing:.3px;}
.brand-badge--info{background:var(--azul-100);color:var(--azul-900);}
.brand-badge--alert{background:var(--rojo-100);color:var(--rojo-700);}
.brand-badge--success{background:var(--verde-100);color:var(--verde-800);}
/* ===== WhatsApp link/botón en verde institucional ===== */
a[href*="wa.me"],a[href*="whatsapp"]{color:var(--verde-700);}
a[href*="wa.me"]:hover,a[href*="whatsapp"]:hover{color:var(--verde-800);}
/* ===== Page title ===== */
.sp-page-title{
  background:var(--azul-50) !important;
  padding:48px 0 !important;
  position:relative;
}
.sp-page-title::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(to right,
    var(--azul-900) 0%,var(--azul-900) 33.33%,
    var(--rojo-600) 33.33%,var(--rojo-600) 66.66%,
    var(--verde-700) 66.66%,var(--verde-700) 100%);
  opacity:.5;
}
.sp-page-title h2{color:var(--azul-900);font-size:32px;font-weight:700;}
/* ===== Selección de texto con marca ===== */
::selection{background:var(--azul-900);color:#fff;}
/* --- CONFIGURACIÓN DEL VIDEO HERO --- */
.hero-nado-subacuatico {
  position: relative;
  width: 100%;
  height: 100vh !important;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  background: #000; /* Fondo negro para el video */
}
/* Asegurar que la estructura interna de SPPB ocupe el 100% */
.hero-nado-subacuatico > .sppb-container-inner,
.hero-nado-subacuatico .sppb-row,
.hero-nado-subacuatico .sppb-row-column,
.hero-nado-subacuatico .sppb-column,
.hero-nado-subacuatico .sppb-column-addons {
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
.video-home-hero,
.video-home-hero .sppb-addon-video-local-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.video-home-hero video,
.video-home-hero iframe {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* --- CONFIGURACIÓN DEL CONTENEDOR SOBRE EL VIDEO --- */
.llamador-nado-subac {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex !important;
  align-items: flex-end; /* Posición al fondo */
  justify-content: flex-end; /* Derecha en desktop */
  padding-bottom: 80px; /* Margen desde el fondo */
  padding-right: 80px; /* Margen desde la derecha */
  pointer-events: none;
}
.llamador-nado-subac .sppb-addon-content,
.llamador-content {
  text-align: center;
  width: 90%;
  max-width: 520px; /* Más chico */
  background: rgba(0, 0, 0, 0.35); /* Menos opacidad */
  padding: 30px; /* Más compacto */
  border-radius: var(--radius-lg);
  backdrop-filter: blur(2px); /* Blur más suave */
  pointer-events: auto;
}
.llamador-titulo {
  color: var(--blanco);
  font-size: 2.2rem; /* Reducido de 2.8rem */
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}
.llamador-texto {
  color: var(--gris-50);
  font-size: 1.1rem; /* Reducido de 1.2rem */
  margin-bottom: 25px;
}
.btn-llamador {
  display: inline-block;
  background-color: var(--azul-600);
  color: var(--blanco);
  padding: 12px 30px; /* Más chico */
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 50px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn-llamador:hover {
  background-color: var(--azul-800);
  color: var(--blanco);
  transform: translateY(-2px);
  text-decoration: none;
}
/* --- AJUSTES PARA MÓVILES --- */
@media (max-width: 768px) {
  .llamador-nado-subac {
    justify-content: center; /* Centrado en móvil */
    padding-bottom: 40px; /* Menos margen en móvil */
    padding-right: 0; /* Sin margen derecho en móvil */
  }
  .llamador-content {
    padding: 20px;
    max-width: 85%;
  }
  .llamador-titulo {
    font-size: 1.6rem;
  }
  .llamador-texto {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }
  .btn-llamador {
    padding: 10px 22px;
    font-size: 0.9rem;
  }
}