header a.nav-link-a {
	
  transition: color .2s ease;
  
  &:hover {
    color: var(--kb);
    &::after, &::before {width: 100%;left: 0;}
  }
  
  &::after, &::before {content: ''; position: absolute;top: calc(100% - 4px);width: 0;right: 0;height: 3px;}
  &::before {transition: width .4s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;background: var(--kb);}  
  &::after {transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);background: var(--kb);}
}

.aux-tel { position: absolute; z-index: 10; top: 50%; right: 64px; transform: translate(0,-50%) }
.aux-tel a { color: var(--kc); background-color: var(--kc); color: var(--ka); text-decoration: none; display: flex; gap: 8px; height: 32px; line-height: 32px; font-weight: 500; border-radius: 40px; overflow: hidden; padding: 0 12px 0 0; box-shadow: var(--shadow-1);}
.aux-tel a span { width: 32px; height: 32px; position: relative; background-color: var(--kb); outline: 2px solid var(--ka); border-radius: 32px; }
.aux-tel a span::before{content:""; position: absolute; background: url(/cbpn-temp-sanjose/tel.svg); top: 0; left: 0; bottom: 0; right:0; background-repeat: no-repeat !important; background-size: var(--header-ico-size) !important; background-position: 50% 50% !important; filter: var(--footer-social-filter); -webkit-filter: var(--footer-social-filter);}

.bloques .bloque-contenedor .bloque-columnas a { color: var(--ka); }

header .nav ul.nav-a li ul.nav-b { column-count: 2; column-gap: 16px; }
header .nav ul.nav-a li ul.nav-b li { break-inside: avoid; }

.bx-link-tag { display: flex; flex-wrap: wrap; gap: 8px}
.bx-link-tag a { background-color: var(--kc); padding: 2px 8px; border-radius: 40px; white-space: nowrap; }

.mapacontacto { width: 100%; height: auto; aspect-ratio: 2/1; border: 0; outline: 0; margin: 0; padding: 0; }
.mapacontactoportada { width: 100%; height: auto; aspect-ratio: 1/1; border: 0; outline: 0; margin: 0; padding: 0; }

/*.bx-carousel a.on { background-color: var(--kac) !important; color: var(--ka) !important; }
.bx-carousel .item .detalle {position: absolute; inset: 24px 24px 24px 24px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto auto}*/

.modal-directorio .media { margin: -48px -24px 24px -24px; }
.modal-directorio .detale {}
.modal-directorio .modal-cerrar { position: absolute; top: 16px; right: 16px; height: 24px !important; line-height: 24px; padding: 0 12px !important; }

@media (max-width: 800px) {
	
	.aux-tel { position: absolute; z-index: 10; top: calc(100% - 16px); right: 16px; transform: translate(0,-100%) }
	
	header .nav ul.nav-a li ul.nav-b { column-count: 1; column-gap: 16px; }
	
	.popover-cards-detail { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: var(--slide-img-br); background: var(--popover-cards-detail-overlay-bg); overflow: hidden;  }
	.popover-cards-detail .contenido { position: absolute; top: 24px; left: 24px; bottom: 24px; right: 24px; transform: translate(0,0); display: grid; grid-gap: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; margin: 0; padding: 0; background-color: var(--c1); width: auto; border-radius: var(--br4); box-shadow: var(--shadow-1); overflow: auto !important; }
	.popover-cards-detail .media { padding: 0 !important; }
	.popover-cards-detail .detalle { position: relative; padding: 16px !important; max-height: 100%; overflow-y: visible; }
	.popover-cards-detail .contenido .barrido {content: "";position: absolute;bottom: 0;left: 0;right: 0;height: 48px;background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);pointer-events: none;}
	
	ul.bx-cards { grid-template-columns: 1fr 1fr; }

}