/* Club BPS — parte del set custom-club-* (CSS global del sitio), cargado por plg_system_clubbps.

   ============================================================
   BLOQUE 17 — Sistema común de las páginas de contenido (2026-10-05)
   Institucional, Hacete socio, Contacto, Horarios y actividades, Salones y
   Parrilleros, Calendario anual (páginas de SP Page Builder) y las vistas de
   Joomla (Noticias, Comunicados, Información para socios).

   POR QUÉ por PATRÓN de estilo inline y no por id: el contenido de esas
   páginas vive en la BD (lo edita el club desde el admin de SPPB, en prod) y
   trae estilos inline. Reescribirlo por migración pisaría contenido que el
   club mantiene; acá se reconocen los patrones (p.ej. h2 con border-left) y
   se llevan al sistema. Un style="" inline sólo se pisa con !important: se
   usa nada más en las propiedades que el inline fija.

   Reglas del sistema (tokens en BLOQUE 1):
   - cabecera de página: banda azul a todo el ancho, una sola escala;
   - título de sección: sin franja lateral; trazo tricolor corto debajo;
   - card: --card-radius + --card-edge + --card-rest;
   - tabla: encabezado azul, divisores de fila, cifras tabulares;
   - formulario: un solo estilo de control (--control-*).
   ============================================================ */

/* ---- 1. Cabecera de página -------------------------------------------
   La sección SPPB que contiene el <h1> es la banda azul de la página (cada
   página la armó con otro padding y otra escala: el h1 medía 44/46/52 px y
   la banda 97–148 px). Una sola medida para todas, la compacta que pidió el
   club (tokens --hero-* en BLOQUE 1). */
.sp-page-builder .page-content > section.sppb-section:has(h1) {
  padding-top: var(--hero-pad-y) !important;
  padding-bottom: var(--hero-pad-y) !important;
}
.sp-page-builder .page-content > section.sppb-section h1 {
  font-size: var(--fs-hero) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em;
  margin-bottom: 0 !important;
}
.sp-page-builder .page-content > section.sppb-section h1 + p {
  max-width: 90ch;   /* la bajada es una sola oración: que entre en una línea */
  margin: 6px auto 0 !important;
  font-size: var(--fs-hero-sub) !important;
  line-height: 1.5;
  color: rgba(255, 255, 255, .86) !important;
}

/* ---- 2. Título de sección sin franja lateral -------------------------
   Hacete socio, Contacto y Salones traían <h2 style="border-left:4px solid
   …;padding-left:14px"> (en Hacete, una verde y una roja además de la azul).
   Se reemplaza por el mismo trazo tricolor corto de las secciones nuevas
   (BLOQUE 16) y la bajada deja de estar sangrada 14 px para alinear. */
.sp-page-builder h2[style*="border-left"] {
  border-left: 0 !important;
  padding-left: 0 !important;
  font-size: var(--fs-section) !important;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.sp-page-builder h2[style*="border-left"]::after {
  content: '';
  display: block;
  width: var(--rule-short-w);
  height: 3px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--tricolor);
}
.sp-page-builder h2[style*="border-left"] + p {
  margin-left: 0 !important;
  margin-top: 4px !important;
}
/* Títulos de sección de las páginas institucionales (sin franja pero con la
   misma escala inline clamp(22px,2.8vw,32px)): a la escala del sistema. */
.sp-page-builder h2[style*="clamp(22px"] {
  font-size: var(--fs-section) !important;
  letter-spacing: -.015em;
}
/* Mismo trazo tricolor corto que el resto de los títulos de sección. Sólo en
   los azules (fondo claro): sobre la sección azul el primer tercio se perdería. */
.sp-page-builder h2[style*="clamp(22px"][style*="#03255B"]::after {
  content: '';
  display: block;
  width: var(--rule-short-w);
  height: 3px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--tricolor);
}

/* Rótulo sobre el título ("NUESTRA IDENTIDAD", "DESDE 1970"…): contenido
   del club, se conserva; pierde el tracking de 3 px y queda como dato. */
.sp-page-builder p[style*="letter-spacing:3px"] {
  letter-spacing: 1.6px !important;
  font-size: 12px !important;
}
/* Sólo los rótulos azules sobre fondo claro; los de las secciones azules
   (texto blanco translúcido) conservan su color. */
.sp-page-builder p[style*="letter-spacing:3px"][style*="#03255B"] {
  color: var(--azul-700) !important;
}

/* ---- 3. Cards ---------------------------------------------------------
   Bloques con fondo blanco + radio 8 + sombra inline (cards de precios de
   Hacete socio, alquiler de canastos/toallas, documentación). */
.sp-page-builder div[style*="box-shadow"][style*="border-radius:8px"] {
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-edge), var(--card-rest) !important;
}
/* Precio de la card: cifras tabulares y un escalón más de presencia */
.sp-page-builder div[style*="box-shadow"] p[style*="font-size:28px"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-size: 32px !important;
}

/* Cargos de la Comisión Directiva (Institucional): mismo tratamiento que
   .bps-cargo-card (BLOQUE 2) — sin franja izquierda de 3 px. */
.sp-page-builder div[style*="border-left:3px solid"] {
  border-left: 0 !important;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px !important;
  box-shadow: inset 0 0 0 1px rgba(3, 37, 91, .06);
}

/* ---- 4. Tablas --------------------------------------------------------
   Cifras tabulares en todas las tablas de contenido (precios y horarios
   alineados por columna). */
.sp-page-builder table,
.article-details table {
  font-variant-numeric: tabular-nums;
}
/* "Modalidades especiales" (Hacete socio) usa la grilla con bordes de SPPB
   (.sppb-table-style): era la única tabla del sitio con cuadrícula. Pasa al
   sistema: contenedor con borde de 1 px y radio, sólo divisores de fila,
   valor a la derecha. */
.sp-page-builder table.sppb-table-style {
  border-collapse: separate !important;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--card-edge);
  overflow: hidden;
  margin-bottom: 6px;
}
.sp-page-builder table.sppb-table-style :is(td, th) {
  border: 0 !important;
  border-bottom: 1px solid var(--gris-300) !important;
  padding: 11px 16px !important;
  font-size: 15px;
}
.sp-page-builder table.sppb-table-style tr:last-child :is(td, th) {
  border-bottom: 0 !important;
}
.sp-page-builder table.sppb-table-style td:last-child {
  text-align: right;
  color: var(--azul-900);
}
/* Más aire ARRIBA de cada subtítulo que abajo: la nota de la tabla anterior
   ("50% del valor general") quedaba pegada al título siguiente. */
.sp-page-builder table.sppb-table-style + p,
.sp-page-builder div:has(> table.sppb-table-style) + p {
  margin: 0 0 28px !important;
}
.sp-page-builder .sppb-addon-content h3 + table.sppb-table-style,
.sp-page-builder .sppb-addon-content h4 + table.sppb-table-style {
  margin-top: 4px;
}

/* Notas al pie de tabla (color:#888 inline = 3.3:1, no pasa AA): al token de
   metadato (4.83:1) y a 13 px, el mínimo de los textos secundarios del sitio. */
.sp-page-builder p[style*="color:#888"] {
  color: var(--color-meta) !important;
  font-size: var(--fs-meta) !important;
}

/* ---- 5. Formularios ---------------------------------------------------
   Un solo control para todo el sitio (Contacto, Comunicados, Trabajá con
   nosotros): alto 46, borde 1.5 px, radio 8 y anillo de foco de marca. */
.sp-page-builder :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"]), select, textarea),
.cbps-comunicados :is(input, select) {
  min-height: var(--control-h);
  border: var(--control-border) !important;
  border-radius: var(--radius-control) !important;
  background-color: #fff !important;
  font-size: 16px !important;   /* 16 px: iOS no hace zoom al enfocar */
  color: var(--gris-900);
  transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}
.sp-page-builder textarea {
  min-height: 140px;
  line-height: 1.5;
}
.sp-page-builder :is(input, select, textarea):hover:not(:focus),
.cbps-comunicados :is(input, select):hover:not(:focus) {
  border-color: #9FB0C6 !important;
}
.sp-page-builder :is(input, select, textarea):focus,
.cbps-comunicados :is(input, select):focus {
  outline: none;
  border-color: var(--azul-600) !important;
  box-shadow: 0 0 0 3px rgba(25, 87, 164, .16);
}
.sp-page-builder ::placeholder,
.cbps-comunicados ::placeholder {
  color: var(--color-meta);   /* 4.83:1 sobre blanco */
}
/* Botón de envío del formulario de contacto: misma forma que .cbps-btn */
.sp-page-builder .sppb-addon-ajax-contact button[type="submit"],
.sp-page-builder form button[type="submit"] {
  min-height: var(--control-h);
  padding: 0 26px !important;
  border-radius: var(--radius-md) !important;
  background: var(--azul-900) !important;
  border: 0 !important;
  font-weight: 600;
  font-size: 15px;
  color: #fff !important;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.sp-page-builder form button[type="submit"]:hover {
  background: var(--azul-700) !important;
}
.sp-page-builder form button[type="submit"]:active {
  transform: scale(var(--press));
}
/* Título del formulario: venía en peso 400, distinto de todos los demás
   títulos de la página. SPPB lo fija por ID del addon → !important. */
.sp-page-builder .sppb-addon-ajax-contact .sppb-addon-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  color: var(--azul-900) !important;
}
/* Panel gris del formulario (el fondo lo pone SPPB en el wrapper del addon):
   misma esquina de ficha que las cards, sin sombra (es un área, no un objeto). */
.sp-page-builder div:has(> .sppb-addon-ajax-contact) {
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-edge);
}

/* ===== Bloque «título + texto + botón» (enlaces a otra página, p.ej. en Hacete Socio) =====
   Texto a la izquierda y el botón a la derecha, centrado en vertical; en pantallas
   angostas el botón baja y ocupa todo el ancho. */
.cbps-enlace-seccion{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 40px;padding:28px 32px;border-radius:var(--card-radius);background:#F5F7FA;box-shadow:var(--card-edge)}
.cbps-enlace-seccion__cuerpo{flex:1 1 380px;max-width:var(--measure-prose,68ch)}
.cbps-enlace-seccion__cuerpo p{margin:0 0 0 14px;color:#444A55;font-size:16px;line-height:1.6}
.cbps-enlace-seccion .cbps-btn{flex:none}
@media(max-width:575.98px){
  .cbps-enlace-seccion{padding:22px 18px}
  .cbps-enlace-seccion .cbps-btn{width:100%;text-align:center}
}

/* ===== Acordeón (addon «accordion» de SPPB): patrón + variante «info» =====
   El FAQ del home usa el estilo de fábrica (panel-modern). La variante .cbps-acordeon--info
   (Información para socios) lleva cada pregunta como ficha: ícono en recuadro, título en
   azul institucional y respuesta alineada al título; esa estética alcanza para diferenciarla
   de las Preguntas frecuentes, sin fondo de banda propio. Reusa los tokens de BLOQUE 1. */
.cbps-acordeon .sppb-panel-group{display:grid;gap:10px}
.cbps-acordeon .sppb-panel-modern{margin:0;background:#fff;border:0;border-radius:var(--card-radius);box-shadow:var(--card-edge),var(--card-rest);overflow:hidden}
.cbps-acordeon .sppb-panel-modern>.sppb-panel-heading{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:12px 20px;background:#fff;color:#03255B;border:0;text-align:left;cursor:pointer;font-size:17px;font-weight:700;line-height:1.3;transition:background-color .16s}
.cbps-acordeon .sppb-panel-modern>.sppb-panel-heading:hover{background:#F5F8FC}
.cbps-acordeon .sppb-panel-modern>.sppb-panel-heading:focus-visible{outline:3px solid rgba(25,87,164,.45);outline-offset:-3px}
.cbps-acordeon .sppb-panel-title{display:flex;align-items:center;gap:14px;flex:1;min-width:0;color:inherit}
.cbps-acordeon .sppb-panel-title>i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-control,8px);background:#E5EDF7;color:#0F427D;font-size:16px}
.cbps-acordeon .sppb-toggle-direction{flex:none;color:#1957A4}
.cbps-acordeon .sppb-panel-modern .sppb-panel-body{padding:0 20px 20px 74px;border-top:0}
.cbps-acordeon .sppb-panel-body .sppb-section{padding:0 !important;margin:0 !important}
.cbps-acordeon .sppb-panel-body p{margin:0 0 8px;font-size:16px;line-height:1.65;color:#444A55}
.cbps-acordeon .sppb-panel-body p:last-child{margin-bottom:0}
.cbps-acordeon .sppb-panel-body a{color:#1957A4;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cbps-acordeon .sppb-panel-body a:hover{color:#03255B}
@media(max-width:575.98px){
  .cbps-acordeon .sppb-panel-modern>.sppb-panel-heading{padding:10px 14px;font-size:16px}
  .cbps-acordeon .sppb-panel-title>i{width:34px;height:34px}
  .cbps-acordeon .sppb-panel-modern .sppb-panel-body{padding:0 16px 16px}
}
@media(prefers-reduced-motion:reduce){
  .cbps-acordeon .sppb-panel-modern>.sppb-panel-heading{transition:none}
}

/* ===== Seguinos en redes: módulo SPPB «Redes sociales» (addon «Módulo de Joomla») =====
   La fila azul (título, bajada y tres íconos) vive en el módulo y cada página la muestra con el
   addon «Módulo de Joomla» dentro de una fila .cbps-redes-fila. Esa fila envolvente no agrega
   márgenes ni ancho máximo: la banda del módulo tiene que llegar a los bordes, como cuando era
   una fila de la propia página. */
.cbps-redes-fila.sppb-section{padding:0 !important;margin:0 !important}
.cbps-redes-fila > .sppb-container-inner,.cbps-redes-fila .sppb-row-container{max-width:none;width:100%;padding:0 !important}
.cbps-redes-fila .sppb-row{margin:0}
.cbps-redes-fila .sppb-row-column,.cbps-redes-fila .sppb-column{padding:0}
.cbps-redes-fila .sppb-addon-wrapper,.cbps-redes-fila .sppb-addon-module,.cbps-redes-fila .sppb-addon-content{margin:0;padding:0}