#sp-search {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
}
.breadcrumb {
  background-color: #f2f2f2 !important;
}
.breadcrumb-item.active {
  color: #4f4f4f !important;
}
#sp-position3 {
  display: flex;
  justify-content: center;
}
#sp-header {
  height: 60px;
  border-top: 2px solid #F4F1F2;
  border-bottom: 2px solid #96be55;
}
#sp-menu {
  width: 100%;
  display: grid;
  align-items: center !important;
  justify-content: center !important;
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
  padding: 0 20px;
  font-size: 16px;
}
.sp-megamenu-parent > li.active > a {
  font-weight: 600;
}
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
  color: #00318C;
}
.offcanvas-menu .offcanvas-inner ul.menu li.active a {
  color: #00318C;
  font-weight: 600;
}

/***** Para Slider *****/

/*.visually-hidden {
  position: absolute !important;
  width: 1px; 
  height: 1px; 
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; 
  border: 0;
}*/

.n2-section-smartslider.fitvidsignore.n2_clear:focus {
  outline: 3px solid #005fcc !important;
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 .25rem rgba(0,0,0,.80) !important;
  z-index: 10000;
}

/*.n2-ss-slide:focus{
  outline: 3px solid #005fcc !important;
  outline-offset: 2px;
  border-radius: 6px;
}*/

.nextend-autoplay:focus{
  outline: 3px solid #005fcc !important;
  outline-offset: 2px;
  border-radius: 6px;
}

.nextend-arrow-previous:focus {
  outline: 3px solid #005fcc !important;
  outline-offset: 2px;
  border-radius: 6px;
}

.nextend-arrow-next:focus{
  outline: 3px solid #005fcc !important;
  outline-offset: 2px;
  border-radius: 6px;
}

.n2-bullet:focus{
  outline: 3px solid #005fcc !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Azul accesible: recomendado por WCAG */
.owl-prev:focus,
.owl-next:focus,
.owl-dot:focus {
  outline: 3px solid #005fcc !important; /* azul corporativo */
  outline-offset: 2px;
  border-radius: 6px; /* esquinas redondeadas */
}

/***** End Slider *****/




/***** Inicio Animación Tarjeta - Subir con iluminación verde *****/
.card-temint {
  position: relative;
  background-color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 12px;
  gap: 12px;
  border-radius: 8px;
  cursor: pointer;
  color: #000;
}

.card-temint::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #e2fdd0 0%, #e8e8e8 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(10px);
}

.head-temint {
  font-size: 19px;
  /*text-transform: capitalize;*/
  font-weight: 700;
  color: #3e7705;
}

.card-temint p:not(.head-temint) {
  font-size: 14px;
}

.card-temint p:last-child {
  color: #000;
  font-weight: 400;
}

.card-temint:hover, .card-temint:focus{
  -webkit-animation: color-item 1s;
          animation: color-item 1s;
  box-shadow: 0 0 0 1em rgba(255, 255, 255, 0);
}

.card-temint:hover {
  background-color: #FEFEFE;
  color:#fff;
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-image: none;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out 0s;
  box-shadow: 0 5px 10px rgba(0, 128, 0, 0.3);
}
/***** Fin Animación Tarjeta - Subir con iluminación verde *****/




/* Asegurar que la imagen del botón quede encima */
#buttonchat img {
  position: relative;
  z-index: 100 !important;
}





/* Mover el contador detrás de la imagen */
.badgeCounter {
  z-index: 1 !important; /* menor que el de la imagen */
  position: absolute !important;
  right: 40px !important;
  bottom: 40px !important; 
}





/* ===== Ocultar Etiqueta Badge en Artículos =====*/
.badgeCounter {
  /*background-color: #B30000*/ !important; /* rojo accesible */
  background-color: #3366CC !important;
  color: #FFFFFF !important; /* blanco sobre rojo */
  font-size: 12px !important; /* tamaño mínimo legible */
  font-weight: 600 !important; /* texto más visible */
  width: auto !important;
  height: auto !important;
  padding: 2px 6px !important;
  border-radius: 50% !important;
  transform: none !important; /* quitar rotación ilegible */
  opacity: 1 !important; /* asegurar que sea visible */
}
/* ===== FIN Ocultar Etiqueta Badge en Artículos =====*/





/* ===== Estilos solo para los botones animados ===== */
.botones-animados .btn {
  transition: all 0.3s ease-in-out;
  border: none;
  text-decoration: none;
  color: #fff;
  background-color: #198754; /* verde accesible Bootstrap */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  height: 100%; /* igual altura dentro del row */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*min-height: 200px;*/
  padding: 25px;
}

.botones-animados .btn .fa-icon {
  color: #fff;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Hover + Focus accesible */
.botones-animados .btn:hover,
.botones-animados .btn:focus {
  background-color: #218838 !important; /* verde más oscuro accesible */
  transform: translateY(-5px);
}

.botones-animados .btn:hover .fa-icon,
.botones-animados .btn:focus .fa-icon {
  color: #FFD43B; /* amarillo accesible */
  transform: scale(1.2);
}

/* Centrado y espaciado del texto */
.botones-animados .text-title {
  font-size: 1.5rem;
  line-height: 1.2;
  max-width: 90%;
  padding-bottom: 15px;
}
.botones-animados .text-subtitle {
  font-size: 1rem;
  line-height: 1.2;
  max-width: 90%;
}

.botones-animados img {
  background: #fff;
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  padding: 5px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50px !important;
  width: 100px;
  height: 100px;
}

.fa-icon {
  position: relative;
  color: #fff;
  text-shadow:
    0 1px 0 #ccc,
    0 2px 0 #bbb,
    0 3px 0 #aaa,
    0 4px 0 #999,
    0 5px 0 #888,
    0 6px 0 #777,
    0 7px 0 #666,
    0 8px 7px rgba(0,0,0,0.5);
  transition: transform 0.4s ease, color 0.4s ease, text-shadow 0.4s ease;
  filter: drop-shadow(0 2px 4px rgba(255,255,255,0.2));
}

/* Responsivo */
/* ====== Tablets y pantallas medianas (≤ 768px) ====== */
@media (max-width: 768px) {
  .botones-animados .btn {
  	padding: 25px;
  }
  .botones-animados .text-title {
    font-size: 1.15rem;   /* un poco más grande que móvil */
    line-height: 1.25;
    max-width: 95%;
    padding-bottom: 10px !important;
  }
  .botones-animados .text-subtitle {
    font-size: 0.9rem;
    line-height: 1.25;
    max-width: 95%;
  }
}

/* ====== Móviles pequeños (≤ 576px) ====== */
@media (max-width: 576px) {
  .botones-animados .btn {
  	padding: 25px;
  }
  .botones-animados .text-title {
    font-size: 1rem;      /* más compacto que en 768px */
    line-height: 1.2;
    max-width: 95%;
    padding-bottom: 10px !important;
  }
  .botones-animados .text-subtitle {
    font-size: 0.8rem;
    line-height: 1.2;
    max-width: 95%;
  }
}
/* ===== FIN Estilos solo para los botones animados ===== */




/* ======== Botones tipo carta con Imagen y Animación Subir ========*/
/* ===== CARTAS ACCESIBLES CON EFECTO HOVER ===== */
.cart-subir {
  font-family: "Lato", sans-serif !important;
  width: 100%;
  transition: all 0.4s ease-in-out;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
  /*box-shadow: 0 .05rem .2rem rgba(0,0,0,.15) !important;*/
  border: none;
  height: 100% !important;
}

.cart-subir .cart-contenido {
  padding: 20px 15px;
}

/* Elimina subrayado en enlaces y mantiene accesibilidad */
.cart-subir a {
  text-decoration: none !important;
  outline: none;
}
.cart-subir a:focus-visible {
  outline: 3px solid #007138;
  outline-offset: 4px;
  border-radius: 8px;
}

/* Estilos de hover general */
.color-subir:hover,
.color-subir:focus {
  background: #fefefe;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  /*border-radius: 20px !important;*/
  border-end-end-radius: 20px !important;
  border-end-start-radius: 20px !important;
}

/* Tema verde institucional */
.color-subir-tem1:hover,
.color-subir-tem1:focus {
  background-color: #007138;
  color: #fff;
  box-shadow: 0 0 0 0.2em rgb(0, 113, 56);
  transform: translateY(-10px);
}

/* Botón verde */
.btn-tem1 {
  background-color: #007138;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0px 0 60px 0 rgba(79, 16, 16, 0.09);
  transition: all 0.3s ease;
}
.btn-tem1:hover,
.btn-tem1:focus {
  background-color: #fff;
  color: #007138;
  border-color: #007138;
  outline: none;
}

/* Tema amarillo */
.color-subir-tem2:hover,
.color-subir-tem2:focus {
  background-color: #ffbf00;
  color: #000;
  box-shadow: 0 0 0 0.2em rgb(254, 190, 0);
  transform: translateY(-10px);
}

/* Botón amarillo */
.btn-tem2 {
  background-color: #ffbf00;
  color: #000;
  border: 2px solid #fff;
  box-shadow: 0px 0 60px 0 rgba(79, 16, 16, 0.09);
  transition: all 0.3s ease;
}
.btn-tem2:hover,
.btn-tem2:focus {
  background-color: #000;
  color: #fff;
  outline: none;
}

/* Enfoque accesible sin interferir con la estética */
a:focus-visible {
  outline: 3px solid #007138;
  outline-offset: 4px;
  border-radius: 5px;
}

/* Responsivo */
@media (max-width: 576px) {
  .card .card-body p h6{
    font-size: 0.9rem;
  }
  .cart-subir .cart-contenido {
    padding: 20px 10px;
  }
}
/* ======== FIN Botones tipo carta con Imagen y Animación Subir ========*/






/* ===== Ajuste Accesibilidad JT Slider ===== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}






/* ==== Scroll universal para todos los modales Bootstrap (Joomla 4 y 5) ==== */
.modal-dialog-scrollable .modal-content {
  max-height: 90vh;
  border-radius: 0.75rem;
  background-clip: padding-box;
}





/* Garantiza que el contenido sea desplazable */
.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: calc(90vh - 60px);
  padding-bottom: 1rem;
}





/* ==== Estilo fino y moderno de scroll ==== */
/* WebKit (Chrome, Edge, Opera, Safari) */
.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
  background: rgba(80, 80, 80, 0.25);
  border-radius: 10px;
  transition: background 0.3s ease;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(80, 80, 80, 0.45);
}

/* Firefox */
.modal-dialog-scrollable .modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 80, 80, 0.25) transparent;
}

/* Microsoft (Legacy IE/EdgeHTML fallback) */
.modal-dialog-scrollable .modal-body {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* ==== Header pegajoso accesible ==== */
.modal-header.sticky-top {
  position: sticky;
  top: 0;
  background-color: var(--bs-primary, #0d6efd);
  color: #fff;
  z-index: 10;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

/* ==== Accesibilidad y suavidad ==== */
.modal-dialog-scrollable .modal-body:focus {
  outline: none;
}

.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}





/* === Botón personalizado: btn-azuldeg === */
/* Compatible con Joomla 4 y 5 */
.btn-azuldeg {
  background: linear-gradient(135deg, #004080, #007bff);
  color: #fff !important;
  border: none;
  border-radius: 1rem;
  /*font-weight: 600;
  padding: 0.9rem 2.5rem;*/
  box-shadow: 0 4px 10px rgba(0, 64, 128, 0.2);
  transition: all 0.3s ease-in-out;
}

/* Sutil animación al pasar el cursor */
.btn-azuldeg:hover,
.btn-azuldeg:focus,
.btn-azuldeg:active {
  background: linear-gradient(135deg, #0066cc, #0099ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 64, 128, 0.3);
  color: #fff !important;
}

/* Estado activo o presionado */
.btn-azuldeg:active {
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0, 64, 128, 0.25);
}

/* Accesibilidad: Foco visible con borde suave */
.btn-azuldeg:focus-visible {
  outline: 2px solid #80bfff;
  outline-offset: 3px;
}

/* Ajuste de transición para usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .btn-azuldeg {
    transition: none;
  }
}






/* === Redefinición moderna del botón .btn-primary === */
/* Compatible con Joomla 4 y 5 (Bootstrap 5.x) */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: linear-gradient(135deg, #004080, #007bff);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: linear-gradient(135deg, #0056b3, #3399ff);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 38, 143, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: linear-gradient(135deg, #003366, #0056b3);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: linear-gradient(135deg, #7da6e6, #a8c8ff);
  --bs-btn-disabled-border-color: transparent;

  border-radius: 1rem;
  /*font-weight: 600;
  padding: 0.9rem 2.5rem;*/
  box-shadow: 0 4px 10px rgba(0, 64, 128, 0.2);
  transition: all 0.3s ease-in-out;
}

/* Hover con foco visual */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible {
  color: var(--bs-btn-hover-color);
  background: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.4),
              0 8px 18px rgba(0, 64, 128, 0.25);
  outline: none;
}

/* Active (clic presionado) */
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0, 64, 128, 0.25);
}

/* Disabled */
.btn-primary:disabled,
.btn-primary.disabled {
  background: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
  box-shadow: none;
}

/* Suavidad para usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .btn-primary {
    transition: none;
  }
}





/* ===== contenedor carta con clip imagen de fondo ===== */
.card-clip {
  position: relative;        /* necesario para que la imagen absoluta se base en este */
  overflow: hidden;
  border: none;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}





/* imagen de fondo: absoluta y cubre todo el contenedor */
.card-clip .card-img {
  position: absolute;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  z-index: 1;
}





/* -------- CORRECCIÓN CLAVE --------
   Permitimos que .card-img-overlay sea posición relativa (esté en el flujo)
   así su contenido determina la altura del .card-clip. */
.card-clip .card-img-overlay {
  position: relative;   /* override de bootstrap (antes era absolute) */
  z-index: 2;           /* encima de la imagen */
  display: flex;
  align-items: stretch; /* para que el clip-overlay tome 100% de alto */
  padding: 0;           /* controlamos padding en el interior si se requiere */
}

/* bloque blanco a la izquierda con clip-path diagonal */
.clip-overlay {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  color: #212529;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  width: 75%;           /* ocupa 75% del ancho total */
  height: 100%;         /* ocupa todo el alto del contenedor */
  /*padding: 2rem;
  border-radius: 0 0.75rem 0.75rem 0;*/
  /* Clip diagonal: punto superior derecho desplazado, punto inferior derecho más hacia el centro */
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.35s ease;
}

/* ajuste visual de la lista dentro */
.clip-overlay .list-group-item {
  background: transparent;
  border: none;
  padding-left: 0;
  padding-right: 0;
  color: #333;
}

/* hover sutil (opcional) */
.card-clip:hover .clip-overlay {
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
  /*transform: translateX(6px);*/
  box-shadow: 0 0.6rem 1rem rgba(0,0,0,0.18);
}

/* Contenedor con scroll accesible */
.scroll-container {
  max-height: 250px;
  overflow-y: auto;
  padding-right: 0.5rem;
  border-radius: 0.5rem;
  outline: none;
}

.scroll-container:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 2px;
}





/* Scrollbar sutil y accesible */
.scroll-container::-webkit-scrollbar {
  width: 0.6rem;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(13, 110, 253, 0.5);
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(13, 110, 253, 0.8);
}

/* Nav Pills accesibles */
.nav-pills .nav-link {
  color: #0d6efd;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  transition: background-color 0.3s, color 0.3s;
}

.nav-pills .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
}

.nav-pills .nav-link:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 2px;
}

/* Responsive: en pantallas pequeñas el clip desaparece y el bloque queda full width */
@media (max-width: 768px) {
  .clip-overlay {
    width: 100%;
    height: auto;
    clip-path: none;
    border-radius: 0.75rem;
    padding: 1rem;
  }
  .card-clip .card-img {
    /* opcional: bajar el filtro para mejorar contraste en móvil */
    filter: brightness(0.6);
  }
}





/* ===== Contenedor de scroll minimalista ===== */

:root{
  --scroll-bg: #f8f9fa;        /* fondo del contenedor */
  --scroll-thumb: #d1d7df;     /* color del pulgar (thumb) */
  --scroll-thumb-hover: #b3c3da;
  --scroll-track: transparent;
  --focus-ring: rgba(13,110,253,0.25);
  --radius: .5rem;
  --gap: 1rem;
}

.scroll-container{
  max-height: 40vh;           /* ajustar según necesidad */
  overflow: auto;             /* scroll nativo */
  background: var(--scroll-bg);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.04);
  line-height: 1.5;
  -webkit-overflow-scrolling: touch; /* suaviza en iOS */
}

/* Hacer que el contenedor sea claramente enfocable (si se añade tabindex="0" en HTML) */
.scroll-container:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
  border-color: rgba(13,110,253,0.5);
}

/* Scrollbar — WebKit / Blink (Chrome, Edge, Safari) */
.scroll-container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll-container::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: calc(var(--radius) * 0.9);
}
.scroll-container::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent; /* espacio alrededor del thumb */
  background-clip: padding-box;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-thumb-hover);
}

/* Scrollbar — Firefox */
.scroll-container {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* Pequeños ajustes de accesibilidad y preferencia de movimiento */
@media (prefers-reduced-motion: reduce) {
  .scroll-container { scroll-behavior: auto; transition: none; }
}

/* Utilidades visuales para contenido dentro */
.scroll-container > * + * { margin-top: .75rem; }

/* Variante compacta (opcional) */
.scroll-container.scroll-sm {
  padding: .5rem;
  max-height: 30vh;
}

/* Variante amplia (opcional) */
.scroll-container.scroll-lg {
  padding: 1.5rem;
  max-height: 60vh;
}

/* ===== FIN Contenedor de scroll minimalista ===== */