/* ============================================================
   Club BPS — Custom CSS (canónico, versionado)
   Archivo físico cargado vía PHP desde index.php del template
   (registerAndUseStyle + ?v=filemtime). NO usar el "Custom CSS"
   de Helix (BD) para estilos globales nuevos.
   Ruta esperada: templates/<template>/css/custom-club.css
   ------------------------------------------------------------
   Breakpoint off-canvas: < 768px (md). Ver header.php / features/menu.php.
   ------------------------------------------------------------
   BLOQUE 1: variables + utilidades de marca + header/topbar/
             megamenú/off-canvas/video hero (estilos existentes).
   BLOQUE 2: clases reutilizables para contenido SPPB
             (eyebrow, títulos de sección, prosa, cards de
             directiva, stats) — página Institucional y resto.
   ============================================================ */

/* ============================================================
   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;
  --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;
}
.sp-header .sp-logo{display:flex;align-items:center;height:100%;}
.sp-header .sp-logo img{transition:opacity .25s ease,transform .25s ease;height:48px;width:auto;}
@media (min-width: 992px) {
  .sp-header .sp-logo img {
    height: 70px;
  }
}
/* ===== 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 */
/* ===== 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) ===== */
body.header-transparent .header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
/* Top bar: Azul institucional con transparencia sutil */
body.header-transparent #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 #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 #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 #sp-header::after {
  display: none;
}
/* Header Transparente: Textos del menú y contacto en blanco para contraste */
body.header-transparent .sp-megamenu-parent > li > a,
body.header-transparent .sp-contact-info > li,
body.header-transparent .sp-contact-info > li a,
body.header-transparent #offcanvas-toggler .burger-icon > span {
  color: #fff !important;
}
body.header-transparent #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 #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 #sp-header.header-sticky .logo-default,
body.header-transparent #sp-header.header-sticky .logo-image-phone {
  display: none !important;
}
#sp-header.header-sticky .logo-sticky,
body.header-transparent #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 #sp-header.header-sticky #offcanvas-toggler .burger-icon > span {
  background-color: #fff !important;
}
#sp-header.header-sticky::after,
body.header-transparent #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 */
  padding-inline:clamp(6px, 1.1vw, 18px) !important;
  font-size:clamp(0.7rem, 1vw + 3.5px, 15px);
  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-md) !important;
  border:1px solid var(--gris-300) !important;
  padding:8px 0 !important;
  margin-top:6px;
  background:#fff !important;
  /* Borde superior con accent del brand */
  border-top:3px solid var(--azul-900) !important;
}
.sp-megamenu-parent .sp-dropdown-items{margin:0;padding:0;list-style:none;}
.sp-megamenu-parent .sp-dropdown-items > li > a{
  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-header .sp-logo img,
  #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;
}
/* 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::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%);
}
#sp-footer a,#sp-bottom a{color:var(--gris-300);}
#sp-footer a:hover,#sp-bottom a:hover{color:#fff;}
/* ===== 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;
  }
}

/* ============================================================
   BLOQUE 2 — Clases reutilizables para contenido SPPB
   (página Institucional y reutilizables en el resto del sitio)
   ============================================================ */

/* ---- Encabezado de sección (eyebrow + título + lead) ----
   Reemplaza los estilos inline repetidos en 5 secciones. */
.bps-eyebrow{
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--azul-900);
  font-weight:600;
  margin:0 0 10px 0;
}
.bps-eyebrow--light{ color:rgba(255,255,255,.65); }

.bps-section-title{
  font-size:clamp(22px,2.8vw,32px);
  font-weight:800;
  color:var(--azul-900);
  line-height:1.2;
  margin:0 0 20px 0;
}
.bps-section-title--light{ color:#fff; }
.bps-section-title--tight{ margin-bottom:6px; }

.bps-section-lead{
  font-size:15px;
  color:var(--gris-600);
  margin:0 0 24px 0;
}

/* Título hero de página (el H1 "Institucional" sobre fondo azul) */
.bps-page-hero-title{
  font-size:clamp(32px,5vw,52px);
  font-weight:800;
  color:#fff;
  line-height:1.1;
  margin:0;
}

/* ---- Prosa institucional (párrafos largos legibles) ---- */
.bps-prose p{
  font-size:16px;
  color:var(--gris-700);
  line-height:1.85;
  margin:0 0 16px 0;
}
.bps-prose p:last-child{ margin-bottom:0; }
.bps-prose strong{ color:var(--gris-900); }
.bps-prose--light p{ color:rgba(255,255,255,.82); }
.bps-prose--light strong{ color:#fff; }

/* ---- Cards de cargos (Comisión Directiva) ----
   Reemplaza los 11 bloques con estilos inline idénticos. */
.bps-cargo-card{
  background:var(--azul-50);
  border-radius:var(--radius-md);
  padding:12px 16px;
  border-left:3px solid var(--azul-900);
  margin-bottom:8px;
}
.bps-cargo-card__label{
  font-size:11px;
  font-weight:700;
  color:var(--azul-900);
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.bps-cargo-card__name{
  font-size:16px;
  font-weight:700;
  color:var(--gris-900);
  margin-top:2px;
}

/* Lista simple de vocales / nombres */
.bps-roster__heading{
  font-size:11px;
  font-weight:700;
  color:#697586;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin:16px 0 10px 0;
}
.bps-roster__item{
  border-bottom:1px solid var(--gris-300);
  padding:8px 0;
  font-size:16px;
  font-weight:600;
  color:var(--gris-900);
}
.bps-roster__item:last-child{ border-bottom:0; }

/* ---- Tabla institucional (histórica / de datos) ----
   Variante con thead azul; complementa la regla global
   .sppb-text-block table que ya tenías. */
.bps-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  background:#fff;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--gris-300);
  margin:0 0 20px 0;
}
.bps-table th{
  background:var(--azul-900);
  color:#fff;
  font-weight:700;
  font-size:13px;
  letter-spacing:.5px;
  text-align:left;
  padding:12px 18px;
}
.bps-table td{
  padding:12px 18px;
  color:var(--gris-700);
  border-bottom:1px solid var(--gris-300);
}
.bps-table tr:last-child td{ border-bottom:0; }
.bps-table tbody tr:nth-child(even){ background:var(--azul-50); }
/* Primera celda de cada fila resaltada (rol / cargo) */
.bps-table td:first-child{ font-weight:700; color:var(--azul-900); }
.bps-table .bps-badge-actual{
  display:inline-block;
  background:var(--azul-900);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:2px 10px;
  border-radius:20px;
  margin-top:4px;
  letter-spacing:.5px;
}

/* ---- Stats / estadísticas (fallback si NO se usa el addon
   nativo Animated Number). El addon nativo ya trae sus estilos;
   estas clases sirven para versión raw_html si hiciera falta. */
.bps-stat{ text-align:center; padding:10px 0; }
.bps-stat__num{
  font-size:clamp(36px,4vw,52px);
  font-weight:800;
  color:#fff;
  line-height:1;
}
.bps-stat__label{
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,.75);
  margin-top:10px;
}

/* Da color de marca al número del addon nativo Animated Number
   cuando vive en una sección de fondo azul institucional. */
.bps-stat-native .sppb-animated-number,
.bps-stat-native .sppb-animated-number-title{ color:#fff !important; }
.bps-stat-native .sppb-animated-number-title{ color:rgba(255,255,255,.75) !important; }
/* ============================================================
   BLOQUE 3 — Título/Subtítulo NATIVOS de sección (row) SPPB
   Estiliza el markup que genera SP Page Builder cuando se usa
   el campo "title"/"subtitle" a nivel de SECCIÓN (no addon).
   Markup nativo:
     .sppb-section > .sppb-row-container > .sppb-section-title
        > h2.sppb-section-title-heading   (el "title")
        > .sppb-section-title-desc         (el "subtitle")
   (Algunas versiones usan .sppb-title-heading / .sppb-title-subheading;
    cubrimos ambas variantes.)
   ============================================================ */
.sppb-section-title-heading,
.sppb-title-heading,
.sppb-section-title > h1,
.sppb-section-title > h2,
.sppb-section-title > h3{
  font-size:clamp(22px,2.8vw,32px);
  font-weight:800;
  color:var(--azul-900);
  line-height:1.2;
  margin:0 0 12px 0;
}
.sppb-section-title-desc,
.sppb-title-subheading,
.sppb-section-title-description{
  font-size:15px;
  color:var(--gris-600);
  font-weight:400;
  margin:0 0 24px 0;
}
/* Sección oscura (fondo azul institucional): título y subtítulo en blanco.
   Marcada con la clase .bps-section--dark en los settings de la row. */
.bps-section--dark .sppb-section-title-heading,
.bps-section--dark .sppb-title-heading,
.bps-section--dark .sppb-section-title > h1,
.bps-section--dark .sppb-section-title > h2,
.bps-section--dark .sppb-section-title > h3{
  color:#fff;
}
.bps-section--dark .sppb-section-title-desc,
.bps-section--dark .sppb-title-subheading{
  color:rgba(255,255,255,.82);
}

/* ============================================================
   BLOQUE 4 — NOTICIAS HOME (genérico)
   Aplica a la sección .section-noticias-home y a cualquier
   bloque similar que use los mismos addons dinámicos.
   Paleta del sitio: azul #1957A4 / título #03255B / texto #555
   Tipografía: Roboto
   ============================================================ */

/* ---------------------------------------------------------
   CABECERA — Título + botón "Ver más" en línea.
   El título (.sppb-section-title) y el botón (.addon-root-button)
   viven en contenedores hermanos distintos. El botón se ancla a
   .sppb-column-addons (su offsetParent real, ya position:relative)
   y se sube con bottom:100% hasta la línea del título.
   --------------------------------------------------------- */

/* --- TÍTULO de la sección de noticias --- */
.section-noticias-home .sppb-section-title {
  position: relative;
  margin: 0 0 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e6ebf2;
}

.section-noticias-home .sppb-section-title .sppb-title-heading {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 14px;
  font-family: Roboto, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  color: #03255b;
}

/* Subrayado de acento bajo el título */
.section-noticias-home .sppb-section-title .sppb-title-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 3px;
  background: #1957a4;
  border-radius: 2px;
}

/* --- BOTÓN "Ver más" subido a la línea del título ---
   Vive dentro de .sppb-column-addons (offsetParent real), justo antes
   de la colección. bottom:100% lo sube por encima de las tarjetas; el
   margin-bottom lo lleva a la línea del título. Si el título cambia de
   tamaño en otra sección, ajustar ese valor. */
.section-noticias-home .addon-root-button {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin: 0 0 96px 0;
  z-index: 3;
}

.section-noticias-home .addon-root-button .sppb-button-wrapper {
  margin: 0;
  text-align: right;
}

.section-noticias-home .addon-root-button a.sppb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #1957a4;
  background-color: transparent;
  border: 1.5px solid #1957a4;
  border-radius: 30px;
  text-transform: none;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.section-noticias-home .addon-root-button a.sppb-btn:hover {
  background-color: #1957a4;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(25, 87, 164, 0.28);
  transform: translateY(-2px);
}

.section-noticias-home .addon-root-button a.sppb-btn::after {
  content: "\203A";
  font-size: 18px;
  line-height: 0;
  transition: transform .2s ease;
}
.section-noticias-home .addon-root-button a.sppb-btn:hover::after {
  transform: translateX(3px);
}

/* En tablet/móvil el botón vuelve al flujo normal, bajo el título. */
@media (max-width: 767px) {
  .section-noticias-home .sppb-section-title {
    margin-bottom: 24px;
    padding-bottom: 12px;
  }
  .section-noticias-home .sppb-section-title .sppb-title-heading {
    font-size: 24px;
    display: block;
  }
  .section-noticias-home .addon-root-button {
    position: static;
    margin: 0 0 24px;
  }
  .section-noticias-home .addon-root-button .sppb-button-wrapper {
    text-align: left;
  }
  .section-noticias-home .addon-root-button a.sppb-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* --- Colección: grid de tarjetas --- */
.section-noticias-home .sppb-dynamic-content-collection {
  gap: 30px;
}

/* --- TARJETA: contenedor del artículo --- */
.section-noticias-home .sppb-dynamic-content-collection__item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid #eef1f5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(3, 37, 91, 0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.section-noticias-home .sppb-dynamic-content-collection__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(3, 37, 91, 0.14);
  border-color: #dfe6ef;
}

/* --- IMAGEN (genérico por addon) --- */
.section-noticias-home .addon-root-dynamic-content-image,
.section-noticias-home .addon-root-dynamic-content-image .clearfix {
  margin: 0;
  padding: 0;
}

.section-noticias-home .addon-root-dynamic-content-image .sppb-dynamic-content-image-wrapper {
  margin: 0;
  overflow: hidden;
}

.section-noticias-home .addon-root-dynamic-content-image .sppb-dynamic-content-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .5s ease;
}

/* Imagen clicleable (la envuelve el JS en a.news-image-link) */
.section-noticias-home .addon-root-dynamic-content-image .news-image-link {
  display: block;
  cursor: pointer;
}

/* Zoom sutil de la imagen al pasar el mouse por la tarjeta */
.section-noticias-home .sppb-dynamic-content-collection__item:hover
  .addon-root-dynamic-content-image .sppb-dynamic-content-image {
  transform: scale(1.06);
}

/* --- TEXTO (genérico por addon: título h4, cuerpo y botón) --- */
.section-noticias-home .addon-root-dynamic-content-text {
  margin: 0;
  padding: 0 22px;
}

/* Primer bloque de texto (título) — algo más de aire arriba */
.section-noticias-home .addon-root-dynamic-content-image
  + .addon-root-dynamic-content-text {
  padding-top: 20px;
}

/* TÍTULO de la tarjeta */
.section-noticias-home .addon-root-dynamic-content-text h4.sppb-dynamic-content-text {
  font-family: Roboto, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: #1a1d24;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s ease;
}

.section-noticias-home .sppb-dynamic-content-collection__item:hover
  h4.sppb-dynamic-content-text {
  color: #1957a4;
}

/* CONTENIDO / DESCRIPCIÓN */
.section-noticias-home .addon-root-dynamic-content-text .sppb-dynamic-content-text,
.section-noticias-home .addon-root-dynamic-content-text .sppb-dynamic-content__is-rich-text {
  font-size: 15.5px;
  line-height: 1.65;
  color: #555;
  margin: 0 0 18px;
}

.section-noticias-home .addon-root-dynamic-content-text .sppb-dynamic-content__is-rich-text p {
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* BOTÓN "Leer más" — empujado al fondo y alineado a la derecha */
.section-noticias-home .addon-root-dynamic-content-text:last-child {
  margin-top: auto;
  padding-bottom: 24px;
  padding-top: 4px;
  text-align: right;
}

.section-noticias-home a.sppb-dynamic-content-text__link.sppb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  background-color: #1957a4;
  border: 1px solid #1957a4;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: .3px;
  box-shadow: 0 4px 12px rgba(25, 87, 164, 0.22);
  transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.section-noticias-home a.sppb-dynamic-content-text__link.sppb-btn:hover {
  background-color: #134382;
  border-color: #134382;
  box-shadow: 0 6px 18px rgba(25, 87, 164, 0.32);
  transform: translateY(-2px);
}

.section-noticias-home a.sppb-dynamic-content-text__link.sppb-btn::after {
  content: "\203A";
  font-size: 20px;
  line-height: 0;
  transition: transform .2s ease;
}
.section-noticias-home a.sppb-dynamic-content-text__link.sppb-btn:hover::after {
  transform: translateX(3px);
}

/* El <p> interno del botón hereda color y queda sin margen */
.section-noticias-home a.sppb-dynamic-content-text__link.sppb-btn p {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* RESPONSIVE de las tarjetas */
@media (max-width: 991px) {
  .section-noticias-home .sppb-dynamic-content-collection {
    gap: 24px;
  }
  .section-noticias-home .addon-root-dynamic-content-image .sppb-dynamic-content-image {
    height: 200px;
  }
}

@media (max-width: 575px) {
  .section-noticias-home .addon-root-dynamic-content-text {
    padding-left: 18px;
    padding-right: 18px;
  }
}