/* ===========================================================
   SAEJ overrides for the Qeducato template.
   Colors: already swapped at the source (style.css / default.css)
   from the template's orange/teal palette to SAEJ's real blue
   (#004AAD) and dark navy (#1B1D3D). This file only handles
   typography, since 'Jost' is hardcoded across dozens of
   selectors in style.css and a blanket override is safer than
   editing every occurrence individually.
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Caveat:wght@600;700&display=swap');

body,
p, a, span, li, input, textarea, select, button,
.btn, .contact-form input, .contact-form textarea {
  font-family: 'DM Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.logo, .cat, .date, .faq-btn {
  font-family: 'Mona Sans', sans-serif !important;
}

/* The blanket "span { font-family: DM Sans }" above breaks every
   Font Awesome icon implemented as <span class="icon fal fa-...">
   (sidebar info lists, feature lists, etc.) since it stomps the
   icon font. Restore it wherever a span carries an FA weight class. */
/* Contacto: la tarjeta de "Escríbenos" tiene un correo largo y sin
   espacios (comunicaciones@saej.org) que a 26px (tamaño base de
   .services-content2 h5) se desborda del ancho de la tarjeta y el
   overflow-wrap global lo parte a mitad de palabra. Se reduce aquí,
   scoped a esta sección, para que las 3 tarjetas queden parejas. */
.services-area .services-content2 h5 {
  font-size: 20px;
}

/* Footer: logo de la primera columna (reemplaza el h2 "SAEJ" de texto).
   El .f-widget-title img del template venía a 50% de la columna,
   demasiado grande al lado de la descripción. */
.f-widget-title img {
  width: 150px;
  max-width: 60%;
}

/* Header-top: el teléfono/correo del call-box no tenía font-size
   propio y heredaba el tamaño base (16px), quedando más grande que
   el texto "Síguenos:" de al lado. Se iguala al tamaño de su propio
   label ("Llámanos"/"Escríbenos", 14px). */
.call-box .text strong,
.call-box .text strong a {
  font-size: 14px;
}

span.fal, span.far, span.fas, span.fab, span.fa,
span[class*="fa-"] {
  font-family: "Font Awesome 5 Pro" !important;
}
span.fab {
  font-family: "Font Awesome 5 Brands" !important;
}

/* Main nav (index.html etc.) has 9 top-level items — the template's
   default 40px item spacing + 50/50 logo/menu column split was sized
   for ~5 items and wraps to a second row at desktop widths. Give the
   menu column more room and tighten spacing so it fits on one line. */
@media (min-width: 992px) {
  #header-sticky .second-menu > .row > .col-xl-3:first-child {
    width: 12%;
    flex: 0 0 12%;
    max-width: 12%;
  }
  #header-sticky .second-menu > .row > .col-xl-6 {
    width: 67%;
    flex: 0 0 67%;
    max-width: 67%;
  }
  #header-sticky .second-menu > .row > .col-xl-3:nth-of-type(3) {
    width: 21%;
    flex: 0 0 21%;
    max-width: 21%;
  }
  .second-menu .main-menu ul li {
    margin-left: 10px;
  }
  .main-menu ul li a {
    font-size: 15.5px;
  }
}

/* Flecha que indica que un ítem del menú tiene submenú (Servicios,
   Centro de Negocios). El "+" original del template está oculto por
   defecto (display:none) para todos los ítems; aquí se activa solo
   para los que sí abren submenú, como un chevron hacia abajo. */
.main-menu .has-sub > a::after {
  content: "\f078";
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  display: inline-block !important;
  margin-left: 6px;
  font-size: 12px;
  vertical-align: middle;
}

/* ===========================================================
   Footer — minimalista, mismo estilo en las 15 páginas:
   degradado turquesa→azul, foto circular real, datos de
   contacto y una franja inferior oscura con los enlaces legales.
=========================================================== */
.saej-footer {
  background: linear-gradient(120deg, #5CDFE5 0%, #004AAD 78%);
  padding: 80px 0 50px;
}
.saej-footer .label {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.saej-footer .value {
  font-family: 'Mona Sans', sans-serif;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 26px;
}
.saej-footer .value a {
  color: #fff;
  text-decoration: none;
}
.saej-footer .value a:hover {
  text-decoration: underline;
}
.saej-footer .saej-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #fff;
  border-radius: 60px;
  padding: 15px 32px;
  color: #fff;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: all 300ms ease;
}
.saej-footer .saej-footer-btn:hover {
  background: #fff;
  color: #004AAD;
}
.saej-footer .saej-photo-wrap {
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 63% 37% 54% 46% / 55% 45% 55% 45%;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 30, 80, 0.25);
}
.saej-footer .saej-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.saej-footer-bottom {
  background: #1B1D3D;
  padding: 18px 0;
}
.saej-footer-bottom .row-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.saej-footer-bottom a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  text-decoration: none;
}
.saej-footer-bottom a:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 991px) {
  .saej-footer .saej-photo-wrap {
    margin-top: 40px;
  }
}

/* Widget flotante (WhatsApp / Ubicación / Llamada / Pagos), en las 15 páginas */
.saej-float-widget {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.saej-float-widget .saej-float-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  background: #004AAD;
  box-shadow: 0 4px 12px rgba(0, 20, 60, 0.2);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.saej-float-widget .saej-float-btn:hover {
  transform: translateX(-3px);
  box-shadow: 0 6px 16px rgba(0, 20, 60, 0.28);
  color: #fff;
}
.saej-float-widget .saej-float-btn--whatsapp {
  background: #25D366;
}
@media (max-width: 767px) {
  .saej-float-widget {
    right: 12px;
  }
  .saej-float-widget .saej-float-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 50%;
  }
}

/* Botón "volver arriba" (#scrollUp, plugin jquery.scrollUp): se alinea justo
   debajo del widget flotante, mismo tamaño/espaciado, para que se vea como
   una sola pieza en vez de dos elementos sueltos. */
#scrollUp {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 17px;
  right: 20px;
  bottom: auto;
  top: calc(50% + 105px);
  box-shadow: 0 4px 12px rgba(0, 20, 60, 0.2);
}
@media (max-width: 767px) {
  #scrollUp {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    right: 12px;
    top: calc(50% + 97px);
  }
}

/* Footer de 4 columnas (versión aprobada): mismo esquema de color de
   marca ya aplicado en style.css/default.css, solo se agrega el
   círculo azul detrás de los íconos de contacto. */
.footer-bg .f-contact .icon {
  background: #004AAD;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-top: 0;
}
.footer-bg .f-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.footer-bg .recent-blog-footer .thum {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.footer-bg .recent-blog-footer .thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer-bg .recent-blog-footer li {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* Sección "frase destacada": banda de color con foto orgánica + cita en
   negrita, reutilizable en cualquier página (about.html, etc.) */
.saej-quote-band {
  padding: 90px 0;
  background: #004AAD;
}
.saej-quote-band .saej-blob {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 63% 37% 54% 46% / 51% 41% 59% 49%;
  box-shadow: 0 25px 50px rgba(0, 20, 60, 0.25);
}
.saej-quote-band .saej-blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.saej-quote-band .saej-quote-arrow {
  color: #cfe0ff;
  font-size: 30px;
  margin-bottom: 14px;
}
.saej-quote-band .saej-quote-text {
  color: #fff;
  font-family: 'Mona Sans', sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.35;
}
.saej-quote-band .saej-quote-text b {
  font-weight: 800;
}
@media (max-width: 767px) {
  .saej-quote-band .saej-quote-text {
    font-size: 26px;
  }
  .saej-quote-band .saej-blob {
    margin-bottom: 30px;
  }
}

/* 3 tarjetas de categoría (foto + franja celeste + botón píldora) */
.saej-cat-card {
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 20, 60, 0.08);
}
.saej-cat-card .saej-cat-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.saej-cat-card .saej-cat-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.saej-cat-card .saej-cat-head {
  background: #40BAE1;
  color: #072238;
  font-weight: 700;
  padding: 20px 24px;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: 'Mona Sans', sans-serif;
}
.saej-cat-card .saej-cat-body {
  background: #E8F0FC;
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.saej-cat-card .saej-cat-body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #333;
}
.saej-cat-card .saej-cat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #004AAD;
  color: #004AAD;
  border-radius: 60px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 250ms ease;
}
.saej-cat-card .saej-cat-btn:hover {
  background: #004AAD;
  color: #fff;
}

/* Checklist ".pr-ul" reutilizado fuera de las páginas de servicio
   (el estilo original solo aplicaba dentro de .project-detail).
   Regla sin scope: funciona en cualquier bloque (no solo .step-box2/3). */
.step-box3 .text h2,
.step-box2 .text h2 {
  margin-bottom: 26px;
}
.pr-ul {
  margin-top: 14px;
  list-style: none;
  padding: 0;
  /* Color por defecto para fondos claros (p. ej. project-detail en las
     páginas de evento). El color se fija aquí, en el <ul>, para que un
     color inline puesto en ese mismo <ul> (usos puntuales sobre fondo
     oscuro, como afiliacion.html o pagos.html) siga ganando por cascada
     normal — si se fijara en el <li> ya no heredaría del <ul> y el
     inline dejaría de tener efecto. */
  color: #1B1D3D;
}
.pr-ul li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 13px;
  color: inherit;
  font-size: 17px;
  line-height: 1.4;
}
/* Sobre fondo oscuro fijo (step-box2/3 de las páginas de servicio) el
   texto debe ser blanco. */
.step-box2 .pr-ul,
.step-box3 .pr-ul {
  color: #fff;
}
.pr-ul li .text {
  margin-top: 0;
  padding-top: 4px;
}
/* El .text interno de cada <li> hereda por error el estilo del
   .text "de título" del step-box2/3 (margin-top:30px, font-size:20px,
   display:inline-block) porque ese selector vendor no distingue
   anidamiento y tiene 3 clases de especificidad. Se necesita igualar
   o superar esa especificidad para poder resetearlo aquí. */
.step-box2 .pr-ul li .text,
.step-box3 .pr-ul li .text {
  display: block;
  margin-top: 0;
  padding-top: 4px;
  font-size: 17px;
}
.pr-ul li:last-child {
  margin-bottom: 0;
}
.pr-ul .icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #004AAD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.pr-ul .icon i {
  display: block;
}
/* Dentro de .project-detail (páginas de evento individuales) el
   propio style.css trae un ".project-detail .pr-ul" distinto y con
   la misma especificidad que el nuestro (2 clases + li/i): flota los
   <li> a 50% de ancho (de ahí las 2 columnas no pedidas) y agranda el
   <i> interno a 40x40 con borde (de ahí el óvalo, porque no cabe en
   el círculo de 26px). Como carga antes en el cascade, alcanza con
   igualar el selector aquí para neutralizarlo. */
.project-detail .pr-ul li {
  float: none;
  width: auto;
  align-items: flex-start;
}
.project-detail .pr-ul .icon i {
  width: auto;
  height: auto;
  line-height: 1;
  background: none;
  border: none;
  margin-right: 0;
  color: inherit;
}

/* ===========================================================
   Páginas de servicio (HAGE/DYME/Consultoría/Productividad):
   bloques de color alternados con foto real (tinte azul),
   estilo "portafolio" — reutilizable en las 4 páginas.
=========================================================== */
.saej-svc-block {
  padding: 90px 0;
}
.saej-svc-block h2 {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  font-size: 40px;
  margin-bottom: 22px;
}
.saej-svc-block p {
  font-size: 18px;
  line-height: 1.75;
  margin-bottom: 18px;
}
.saej-svc-block p:last-child { margin-bottom: 0; }

.saej-svc-block--dark { background: #004AAD; color: #fff; }
.saej-svc-block--dark h2 { color: #fff; }
.saej-svc-block--dark p { color: #dbe7ff; }
.saej-svc-block--dark b, .saej-svc-block--dark strong { color: #fff; }

.saej-svc-block--cyan { background: #3FB6E0; color: #06263f; }
.saej-svc-block--cyan h2 { color: #06263f; }
.saej-svc-block--cyan p { color: #0d3552; }

.saej-svc-block--light { background: #E8F0FC; color: #1B1D3D; }
.saej-svc-block--light h2 { color: #1B1D3D; }
.saej-svc-block--light p { color: #435066; }

.saej-tint-photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.saej-tint-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.saej-tint-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #004AAD;
  mix-blend-mode: color;
  opacity: 0.75;
}
.saej-tint-photo .saej-tint-label {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  color: #fff;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
}
.saej-tint-photo .saej-tint-label span {
  background: rgba(0, 20, 60, 0.55);
  padding: 2px 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.saej-stat-highlight {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 24px 0;
}
.saej-stat-highlight div {
  min-width: 120px;
}
.saej-stat-highlight strong {
  display: block;
  font-family: 'Mona Sans', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #004AAD;
}
.saej-stat-highlight span {
  font-size: 15px;
  color: #435066;
}

.saej-outline-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #004AAD;
  color: #004AAD;
  border-radius: 60px;
  padding: 14px 30px;
  font-weight: 700;
  font-family: 'Mona Sans', sans-serif;
  text-decoration: none;
  transition: all 250ms ease;
}
.saej-outline-btn:hover { background: #004AAD; color: #fff; }
.saej-outline-btn--white { border-color: #fff; color: #fff; }
.saej-outline-btn--white:hover { background: #fff; color: #004AAD; }

.saej-closing-banner {
  position: relative;
  padding: 110px 0;
  color: #fff;
  text-align: left;
}
.saej-closing-banner .saej-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.saej-closing-banner .saej-bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.saej-closing-banner .saej-bg-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,12,.78), rgba(10,10,12,.42));
}
.saej-closing-banner .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.saej-closing-banner .saej-script-quote {
  font-family: 'Caveat', 'Mona Sans', cursive, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.3;
  display: block;
  margin-bottom: 0;
  max-width: 560px;
}
.saej-closing-banner .saej-outline-btn {
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .saej-svc-block { padding: 60px 0; }
  .saej-svc-block h2 { font-size: 30px; }
  .saej-closing-banner { padding: 70px 0; }
  .saej-closing-banner .container {
    flex-direction: column;
    align-items: flex-start;
  }
  .saej-closing-banner .saej-script-quote {
    margin-bottom: 24px;
  }
}

/* ===========================================================
   Placeholder de imagen: espacio reservado con proporciones
   armoniosas, a la espera de la foto definitiva del cliente.
   Reemplaza .saej-tint-photo / step-img2 / step-img3 mientras
   no haya una foto profesional curada para ese bloque.
=========================================================== */
.saej-img-placeholder {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 20px;
}
.saej-img-placeholder i {
  font-size: 32px;
  opacity: .7;
}
.saej-img-placeholder span {
  font-family: 'Mona Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .02em;
  max-width: 220px;
  line-height: 1.4;
}
.saej-img-placeholder--onDark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 16px),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.03));
  border: 1.5px dashed rgba(255,255,255,.4);
  color: rgba(255,255,255,.85);
}
.saej-img-placeholder--onLight {
  background:
    repeating-linear-gradient(135deg, rgba(0,74,173,.06) 0 2px, transparent 2px 16px),
    linear-gradient(135deg, rgba(0,74,173,.09), rgba(0,74,173,.02));
  border: 1.5px dashed rgba(0,74,173,.35);
  color: #004AAD;
}
.saej-img-placeholder--neutral {
  background:
    repeating-linear-gradient(135deg, rgba(0,74,173,.09) 0 2px, transparent 2px 16px),
    linear-gradient(135deg, #eef4fc, #f8fafe);
  border: 1.5px dashed rgba(0,74,173,.3);
  color: #004AAD;
}
/* Mismo contenedor (medida, radio, recorte) que .saej-img-placeholder,
   pero ya con foto real adentro: sin borde punteado ni fondo rayado,
   sin padding para que la imagen llene el espacio por completo. */
.saej-img-placeholder--filled {
  padding: 0;
  border: none;
  background: none;
}
.saej-img-placeholder--filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.saej-bg-photo-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #002d6b 0%, #004AAD 55%, #1786c4 100%);
}
.saej-bg-photo-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px);
}

/* Hero de páginas de servicio: título + subtítulo + botón + breadcrumb,
   todo justificado a la izquierda (el template centra por defecto). */
.saej-hero-left .breadcrumb-wrap.text-left,
.saej-hero-left .breadcrumb-title {
  text-align: left !important;
}
.saej-hero-left .breadcrumb-title .breadcrumb {
  background: rgba(255,255,255,.14);
}

/* El template no incluye las utilidades responsive .text-*-right de
   Bootstrap (bootstrap.min.css viene recortado) — .text-xl-right no
   existía y el botón de .newslater-area quedaba sin alinear a la
   derecha, dejando un vacío junto al borde de la sección. */
.newslater-area .text-xl-right {
  text-align: right;
}
@media (max-width: 767px) {
  .newslater-area .text-xl-right {
    text-align: left;
    margin-top: 20px;
  }
}

/* Barra final del footer (logo + "Tratamiento de datos / Desarrollado
   por Greentic"): fila horizontal siempre (logo y textos lado a lado,
   bien distribuidos), con degradado azul de marca en vez de color
   plano. Si no cabe en una sola línea en móviles muy angostos,
   flex-wrap deja que envuelva sin romperse ni quedar centrado suelto. */
.copyright-wrap {
  background: linear-gradient(135deg, #3FB6E0 0%, #004AAD 100%);
}
.copyright-wrap .container { padding: 18px 0; }
.copyright-wrap .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 8px;
}
.copyright-wrap .row > div {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding: 0 8px;
}
.copyright-wrap .copy-text { margin-bottom: 0; }

/* SEO: el título del hero pasó de h2 a h1 (una sola vez por página).
   Se replican aquí los mismos valores que el template define para
   ".breadcrumb-title h2" en cada breakpoint, para que no cambie nada
   visualmente. */
.breadcrumb-title h1 {
  font-size: 72px;
  margin-bottom: 25px;
  line-height: 1;
  color: #fff;
  letter-spacing: 1px;
}
@media (min-width: 992px) and (max-width: 1200px) {
  .breadcrumb-title h1 {
    font-size: 38px;
    margin-bottom: 15px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-title h1 {
    font-size: 34px;
    margin-bottom: 15px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-title h1 {
    font-size: 27px;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* SEO: mismo caso para el slider del home (".slider-content h2" ->
   la primera diapositiva usa h1, la segunda se queda en h2). */
.slider-content h1 {
  font-size: 72px;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-bottom: 40px;
  color: #fff;
}
.s-slider-content h1 {
  margin-bottom: 25px;
}
@media (min-width: 1200px) and (max-width: 1500px) {
  .slider-content h1 {
    font-size: 62px;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .slider-content h1 {
    font-size: 57px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .slider-content h1 {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .slider-content h1 {
    font-size: 38px;
    letter-spacing: 0;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .slider-content h1 {
    font-size: 34px;
  }
}

/* ===========================================================
   Centro de Negocios: galería rotativa + tarjetas de precio
=========================================================== */
.cdn-gallery-slider {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.cdn-gallery-slider .cdn-slide { aspect-ratio: 4 / 3; }
.cdn-gallery-slider--tall {
  width: 100%;
  max-height: 530px;
}
.cdn-gallery-slider--tall,
.cdn-gallery-slider--tall .slick-list,
.cdn-gallery-slider--tall .slick-track,
.cdn-gallery-slider--tall .slick-slide,
.cdn-gallery-slider--tall .slick-slide > div,
.cdn-gallery-slider--tall .cdn-slide {
  height: 100%;
}
.cdn-gallery-slider--tall .cdn-slide { aspect-ratio: unset; }
.cdn-gallery-slider .cdn-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cdn-gallery-slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #004AAD;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: .25s;
}
.cdn-gallery-slider .slick-arrow:hover { background: #004AAD; color: #fff; }
.cdn-gallery-slider .slick-prev { left: 16px; }
.cdn-gallery-slider .slick-next { right: 16px; }
.cdn-gallery-slider .slick-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 5;
}
.cdn-gallery-slider .slick-dots li { display: inline-block; margin: 0 4px; }
.cdn-gallery-slider .slick-dots li button {
  text-indent: -9999px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  border: none;
  padding: 0;
  cursor: pointer;
}
.cdn-gallery-slider .slick-dots li.slick-active button { background: #fff; }

.pricing-box2 { display: flex; flex-direction: column; height: 100%; }
.pricing-box2 .pricing-body { flex: 1 1 auto; }
.pricing-box2 .pricing-btn { width: auto; margin: 0; }

.pricing-box2--light { background: #E8F0FC !important; }
.pricing-box2--dark { background: #1B1D3D !important; }
.pricing-box2--dark .pricing-head h3,
.pricing-box2--dark .price-count h2,
.pricing-box2--dark .price-count strong,
.pricing-box2--dark .pricing-body li { color: #fff; }
.pricing-box2--dark hr { background: rgba(255,255,255,.25); }
.pricing-box2--dark .pricing-btn .btn { background: #004AAD; border-color: #004AAD; }

/* ===========================================================
   Convenios: filtros de categoría + tarjetas de galería
=========================================================== */
/* El template define .grid-item{margin:15px} de forma global para
   sus propias galerías tipo Isotope/portfolio. Sumado al ancho en
   % de las columnas de Bootstrap (col-lg-4 etc.), ese margen extra
   descuadraba el conteo de columnas por fila. Ya no usamos el
   posicionamiento de Isotope aquí (ver main.js), así que el
   espaciado entre tarjetas lo maneja el propio gutter de Bootstrap. */
#work .grid-item {
  margin: 0 0 30px;
}
.saej-filter-hidden {
  display: none !important;
}
.saej-filter-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 50px;
}
.saej-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 2px solid #c3d9f5;
  background: #F3F8FE;
  color: #1B1D3D;
  border-radius: 60px;
  padding: 11px 22px;
  font-weight: 700;
  font-family: 'Mona Sans', sans-serif;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,74,173,.06);
  transition: all 200ms ease;
}
.saej-filter-btn i { color: #004AAD; font-size: 17px; }
.saej-filter-btn:hover { border-color: #004AAD; background: #fff; }
.saej-filter-btn.active { background: #004AAD; border-color: #004AAD; color: #fff; }
.saej-filter-btn.active i { color: #fff; }

.saej-convenio-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  text-decoration: none;
  display: block;
}
.saej-convenio-card .saej-img-placeholder {
  height: 100%;
  border-radius: 16px;
  aspect-ratio: unset;
}
.saej-convenio-card .saej-convenio-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,.9);
  color: #004AAD;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 4px 12px;
  border-radius: 20px;
  z-index: 2;
}
.saej-convenio-card .saej-convenio-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 46px 14px 14px;
  background: linear-gradient(0deg, rgba(0,15,45,.88) 0%, rgba(0,15,45,.6) 60%, transparent 100%);
  z-index: 2;
}
.saej-convenio-card .saej-convenio-name {
  display: block;
  color: #fff;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.saej-convenio-actions {
  display: flex;
  gap: 8px;
}
.saej-convenio-action {
  flex: 1;
  text-align: center;
  font-family: 'Mona Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 6px;
  border-radius: 16px;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255,255,255,.95);
  color: #004AAD;
  transition: background 150ms ease;
}
.saej-convenio-action:hover { background: #fff; }
.saej-convenio-action--wa {
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.saej-convenio-action--wa:hover { background: #20bd5a; }
.saej-zigzag-divider {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px 50px;
}
.saej-zigzag-divider svg { width: 100%; height: 20px; display: block; }

/* ===========================================================
   Convenios: popup "hoja de vida" por convenio (Magnific Popup)
=========================================================== */
.saej-convenio-popup {
  background: #f5f6f8;
  max-width: 1000px;
  width: 90%;
  margin: 40px auto;
  padding: 60px;
  border-radius: 20px;
  position: relative;
}
.saej-convenio-popup h2 {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #1B1D3D;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.saej-convenio-popup .saej-convenio-cat {
  display: inline-block;
  background: rgba(0,74,173,.08);
  color: #004AAD;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.saej-convenio-popup p {
  font-size: 18px;
  line-height: 1.7;
  color: #3a3f4b;
  margin-bottom: 26px;
}
.saej-convenio-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.saej-convenio-popup .saej-img-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  background: #fff;
}
.mfp-bg { background: #061225; opacity: .8; }
.saej-convenio-popup .mfp-close,
.mfp-close { color: #1B1D3D; font-size: 36px; }
@media (max-width: 767px) {
  .saej-convenio-popup { padding: 30px; }
}

/* ===========================================================
   Eventos: consistencia de tarjetas + arreglos de overflow
=========================================================== */
/* Las fotos de evento no comparten proporción real, así que
   todas quedan con el mismo alto y recorte consistente. */
.event-item .thumb {
  aspect-ratio: 4 / 3;
  border-radius: 12px 12px 0 0;
}
.event-item .thumb a {
  display: block;
  width: 100%;
  height: 100%;
}
.event-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Próximos eventos: estas tarjetas usan el afiche oficial del evento
   (mismo archivo que el afiche interno, 16:9) en vez de una foto suelta
   — se muestra completo, sin recortar, igual que en la página de detalle. */
#proximos-eventos .event-item .thumb {
  aspect-ratio: 16 / 9;
  background: #1B1D3D;
}
#proximos-eventos .event-item .thumb img {
  object-fit: contain;
}
.event-content {
  border-radius: 0 0 12px 12px;
  /* sin overflow:hidden: la insignia de fecha se posiciona a
     propósito por encima del borde superior de esta caja (ver
     .event-content .date, top:-60px) y quedaría recortada. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.event-content .btn {
  margin-top: auto;
  align-self: flex-start;
}
/* .time queda pegado al botón porque este usa margin-top:auto
   (se empuja al fondo pero no reserva espacio fijo arriba) — se le
   da un margen propio para que siempre haya separación real, tanto
   del párrafo de arriba como del botón de abajo. */
.event-content .time {
  margin: 8px 0 20px;
}
/* La columna (.col-lg-4...) es un flex item de .row y ahora lleva
   d-flex propio, así que se estira sola (align-items:stretch) sin
   que .event-item necesite height:100% — eso, combinado con su
   propio margin-bottom (mb-30), colapsaba el espacio entre filas
   y las tarjetas quedaban pegadas verticalmente. */
.event-item {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.event-item .thumb { flex: 0 0 auto; }
/* La insignia de fecha tenía ancho fijo (87px) y meses largos
   como "Septiembre" o "Noviembre" se salían de la caja. */
.event-content .date {
  width: auto;
  min-width: 87px;
  height: auto;
  min-height: 67px;
  padding: 10px 14px;
  white-space: nowrap;
  border-radius: 8px;
}

/* Botones de sidebar (Registrarse / Agregar a calendario /
   WhatsApp) se salían del ancho angosto del sidebar en textos
   largos — permitir que envuelvan en vez de desbordar. */
.project-info .btn {
  white-space: normal;
  line-height: 1.3;
  padding: 16px 20px;
}

/* Puntas menos redondeadas en los componentes propios del sitio
   (antes muy tipo píldora/burbuja). */
.saej-outline-btn,
.saej-filter-btn,
.cta-area .btn,
.reserva-cta-area .btn {
  border-radius: 8px;
}
/* El botón base del template era casi recto (4px); se nota poco
   en botones grandes como "Ver más información" o "Quiero este
   plan". Un radio más generoso, aplicado en todo el sitio. */
.btn,
.btn.ss-btn,
.contact-form .btn,
.pricing-btn .btn {
  border-radius: 10px;
}
.saej-tint-photo,
.saej-img-placeholder,
.saej-convenio-card,
.saej-convenio-card .saej-img-placeholder,
.saej-convenio-popup .saej-img-placeholder,
.pricing-box2,
.cdn-gallery-slider {
  border-radius: 10px;
}
/* Barrido general: tarjetas y componentes que quedaron con
   esquinas rectas (0 o 4px) en el resto del sitio ya construido. */
.pricing-box {
  border-radius: 12px;
  overflow: hidden;
}
.services-box07 {
  border-radius: 10px;
}
.courses-item {
  border-radius: 10px;
  overflow: hidden;
}
.project-detail .upper-box .image {
  border-radius: 12px;
}
.footer-bg .thum,
.gallery-thumb {
  border-radius: 10px;
}
.saej-hero-title,
.breadcrumb-area .breadcrumb {
  border-radius: 30px;
}
/* Página interna de evento (single-event): el countdown y la
   cabecera oscura del sidebar quedaron con radio casi imperceptible
   (4px / 8px en cajas grandes) — se nota igual de recto a simple
   vista. Subirlo a algo visible y consistente con el resto. */
.conterdown {
  border-radius: 12px;
}
.project-detail .info-column .inner-column3 {
  border-radius: 14px;
}
.project-detail .info-column .inner-column3 h3 {
  border-radius: 14px 14px 0 0;
}
/* Botones .btn con estilo "outline" armados con style inline
   (color oscuro sobre fondo transparente, ej. "Guardar fecha")
   pisan el color:#fff que el template pone en :hover, así que al
   pasar el cursor el texto queda invisible sobre el relleno oscuro
   que crece desde .btn::before. Forzar blanco en cualquier .btn. */
.btn:hover {
  color: #fff !important;
}

/* ===========================================================
   Home: menú rápido de 6 accesos (reemplaza .service-details-two
   plano por tarjetas con color/tamaño variado y sub-enlaces,
   estilo "menu rápido" pedido por el cliente).
=========================================================== */
.saej-quickmenu {
  margin-top: -234px;
  position: relative;
  z-index: 3;
}
@media (max-width: 1200px) {
  .saej-quickmenu { margin-top: 0; padding: 80px 0; }
}
.saej-qm-card {
  border-radius: 16px;
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(10, 30, 70, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.saej-qm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(10, 30, 70, 0.18);
}
.saej-qm-card h3 {
  font-size: 23px;
  margin-bottom: 8px;
}
.saej-qm-card > p {
  font-size: 16px;
  margin-bottom: 14px;
}
.saej-qm-card > p:last-child {
  margin-bottom: 0;
}
.saej-qm-card .saej-qm-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.saej-qm-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.saej-qm-more {
  margin-top: auto;
  padding-top: 16px;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.saej-qm-card--light {
  background: #E8F0FC;
}
.saej-qm-card--light h3,
.saej-qm-card--light > p {
  color: #1B1D3D;
}
.saej-qm-card--light .saej-qm-icon {
  background: #fff;
  color: #004AAD;
}
.saej-qm-card--light .saej-qm-more {
  color: #004AAD;
}
.saej-qm-card--dark {
  background: #1B1D3D;
}
.saej-qm-card--dark h3,
.saej-qm-card--dark > p {
  color: #fff;
}
.saej-qm-card--dark .saej-qm-icon {
  background: rgba(255,255,255,.1);
  color: #3FB6E0;
}
.saej-qm-card--dark .saej-qm-more {
  color: #3FB6E0;
}
.saej-qm-card--solid {
  background: #004AAD;
}
.saej-qm-card--solid h3,
.saej-qm-card--solid > p {
  color: #fff;
}
.saej-qm-card--solid .saej-qm-icon {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.saej-qm-card--solid .saej-qm-more {
  color: #fff;
}
/* Tonos adicionales de azul para que el menú rápido del home tenga
   6 módulos con degradado claro -> oscuro, cada uno distinguible,
   en vez de repetir solo 3 colores. */
.saej-qm-card--pale {
  background: #F3F8FE;
  border: 1px solid #E3EEFB;
}
.saej-qm-card--pale h3,
.saej-qm-card--pale > p {
  color: #1B1D3D;
}
.saej-qm-card--pale .saej-qm-icon {
  background: #fff;
  color: #004AAD;
}
.saej-qm-card--pale .saej-qm-more {
  color: #004AAD;
}
.saej-qm-card--sky {
  background: #3FB6E0;
}
.saej-qm-card--sky h3,
.saej-qm-card--sky > p {
  color: #0A2340;
}
.saej-qm-card--sky .saej-qm-icon {
  background: #fff;
  color: #0A79A6;
}
.saej-qm-card--sky .saej-qm-more,
.saej-qm-card--sky .saej-qm-sublist a {
  color: #0A2340;
}
.saej-qm-card--deep {
  background: #0B2E6B;
}
.saej-qm-card--deep h3,
.saej-qm-card--deep > p {
  color: #fff;
}
.saej-qm-card--deep .saej-qm-icon {
  background: rgba(255,255,255,.12);
  color: #3FB6E0;
}
.saej-qm-card--deep .saej-qm-more,
.saej-qm-card--deep .saej-qm-sublist a {
  color: #8ecdea;
}
.saej-qm-sublist {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.saej-qm-sublist li {
  margin-bottom: 10px;
}
.saej-qm-sublist a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.3;
}
.saej-qm-card--light .saej-qm-sublist a {
  color: #004AAD;
}
.saej-qm-card--dark .saej-qm-sublist a {
  color: #dbe7ff;
}
.saej-qm-sublist a i {
  font-size: 14px;
  flex-shrink: 0;
}

/* Checklist larga (7 items) de "Al afiliarte podrás" en about.html:
   en una sola columna se veía demasiado larga/desordenada. A partir
   de tablet en adelante fluye en 2 columnas equilibradas. */
@media (min-width: 992px) {
  .saej-pr-ul--2col {
    column-count: 2;
    column-gap: 28px;
  }
  .saej-pr-ul--2col li {
    break-inside: avoid;
  }
}