.elementor-9 .elementor-element.elementor-element-cc26842{--display:flex;--min-height:768px;--overlay-opacity:0.5;}.elementor-9 .elementor-element.elementor-element-cc26842:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-cc26842 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-9 .elementor-element.elementor-element-cc26842::before, .elementor-9 .elementor-element.elementor-element-cc26842 > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-cc26842 > .e-con-inner > .elementor-background-video-container::before, .elementor-9 .elementor-element.elementor-element-cc26842 > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-cc26842 > .e-con-inner > .elementor-background-slideshow::before, .elementor-9 .elementor-element.elementor-element-cc26842 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, #000000 0%, #0800FF 100%);}.elementor-9 .elementor-element.elementor-element-cbe7394{width:var( --container-widget-width, 10% );max-width:10%;--container-widget-width:10%;--container-widget-flex-grow:0;top:227px;}.elementor-9 .elementor-element.elementor-element-cbe7394:hover{--e-transform-translateX:40px;}body:not(.rtl) .elementor-9 .elementor-element.elementor-element-cbe7394{left:-14px;}body.rtl .elementor-9 .elementor-element.elementor-element-cbe7394{right:-14px;}.elementor-9 .elementor-element.elementor-element-d8532fc{--display:flex;--margin-top:12vw;--margin-bottom:0vw;--margin-left:8vw;--margin-right:0vw;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9 .elementor-element.elementor-element-d9c1590{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;text-align:left;}.elementor-9 .elementor-element.elementor-element-d9c1590.elementor-element{--align-self:flex-start;}.elementor-9 .elementor-element.elementor-element-d9c1590 .elementor-heading-title{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-226ad75{width:var( --container-widget-width, 80% );max-width:80%;margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;--container-widget-width:80%;--container-widget-flex-grow:0;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-226ad75 a{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-226ad75 a:hover, .elementor-9 .elementor-element.elementor-element-226ad75 a:focus{color:#046BD2;}.elementor-9 .elementor-element.elementor-element-e753053{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0vw;--margin-bottom:0vw;--margin-left:7vw;--margin-right:0vw;}.elementor-9 .elementor-element.elementor-element-2ca91aa .elementor-button{background-color:#7F282800;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:3px 3px 3px 3px;border-color:#FFFFFF;border-radius:50px 50px 50px 50px;}.elementor-9 .elementor-element.elementor-element-2ca91aa .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-2ca91aa .elementor-button:focus{background-color:#FFFFFF;color:#0E27BE;}.elementor-9 .elementor-element.elementor-element-2ca91aa .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-2ca91aa .elementor-button:focus svg{fill:#0E27BE;}.elementor-9 .elementor-element.elementor-element-6573fb5 .elementor-button{background-color:#FFFFFF;fill:#0E27BE;color:#0E27BE;border-style:solid;border-width:3px 3px 3px 3px;border-color:#FFFFFF;border-radius:50px 50px 50px 50px;}.elementor-9 .elementor-element.elementor-element-6573fb5 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-6573fb5 .elementor-button:focus{background-color:#02010100;color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-6573fb5 .elementor-button:hover svg, .elementor-9 .elementor-element.elementor-element-6573fb5 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-8eed9dd{--display:flex;}.elementor-9 .elementor-element.elementor-element-faa1bb0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-9 .elementor-element.elementor-element-0a56678.elementor-element{--align-self:center;}.elementor-9 .elementor-element.elementor-element-701f0e6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9 .elementor-element.elementor-element-f23aeb6{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-b44862f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9 .elementor-element.elementor-element-9bfd508{--display:flex;}body.elementor-page-9:not(.elementor-motion-effects-element-type-background), body.elementor-page-9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor4 );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-9 .elementor-element.elementor-element-d8532fc{--width:60%;}}@media(max-width:1024px){.elementor-9 .elementor-element.elementor-element-cc26842{--min-height:813px;}.elementor-9 .elementor-element.elementor-element-cbe7394{top:209px;}}@media(max-width:767px){.elementor-9 .elementor-element.elementor-element-cbe7394{--container-widget-width:72px;--container-widget-flex-grow:0;width:var( --container-widget-width, 72px );max-width:72px;top:384px;}.elementor-9 .elementor-element.elementor-element-d8532fc{--margin-top:30vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;}.elementor-9 .elementor-element.elementor-element-d9c1590{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;}.elementor-9 .elementor-element.elementor-element-e753053{--margin-top:0vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;}}/* Start custom CSS for html, class: .elementor-element-f587be7 *//* Cursor custom */
.cursor-dot{
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px; /* centra el círculo */
  border: 2px solid var(--grad2, #7b61ff);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference; /* se ve invertido sobre fondos claros/osc */
  z-index: 9999;
  transform: translate3d(-9999px,-9999px,0);
  transition: width .15s ease, height .15s ease, border-color .2s;
}

/* Hover en enlaces o botones = más grande */
a:hover ~ .cursor-dot,
button:hover ~ .cursor-dot,
[role="button"]:hover ~ .cursor-dot{
  width: 36px; height: 36px;
  border-color: #fff;
}

/* Oculta en móviles */
@media (max-width: 768px){
  .cursor-dot{ display:none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cbe7394 *//* From Uiverse.io by MijailVillegas */ 
.card {
  max-width: fit-content;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  gap: 1rem;
  backdrop-filter: blur(15px);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.192),
    inset 0 0 5px rgba(255, 255, 255, 0.274), 0 5px 5px rgba(0, 0, 0, 0.164);
  transition: 0.5s;
}

.card:hover {
  animation: ease-out 5s;
  background: rgba(173, 173, 173, 0.05);
}

.card ul {
  padding: 1rem;
  display: flex;
  list-style: none;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.card ul li {
  cursor: pointer;
}

.svg {
  transition: all 0.3s;
  /* if you find some problems change w - h : 30px*/
  padding: 1rem;
  height: 60px;
  width: 60px;
  border-radius: 100%;
  color: #ffffff;
  fill: currentColor;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3),
    inset 0 0 5px rgba(255, 255, 255, 0.5), 0 5px 5px rgba(0, 0, 0, 0.164);
}

.text {
  opacity: 0;
  border-radius: 5px;
  padding: 5px;
  transition: all 0.3s;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  z-index: 9999;
  box-shadow: -5px 0 1px rgba(153, 153, 153, 0.2),
    -10px 0 1px rgba(153, 153, 153, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.3),
    inset 0 0 5px rgba(255, 255, 255, 0.5), 0 5px 5px rgba(0, 0, 0, 0.082);
}

/*isometric prooyection*/
.iso-pro {
  transition: 0.5s;
}
.iso-pro:hover a > .svg {
  transform: translate(15px, -15px);
  border-radius: 100%;
}

.iso-pro:hover .text {
  opacity: 1;
  transform: translate(25px, -2px) skew(-5deg);
}

.iso-pro:hover .svg {
  transform: translate(5px, -5px);
}

.iso-pro span {
  opacity: 0;
  position: absolute;
  color: #1877f2;
  border-color: #1877f2;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3),
    inset 0 0 5px rgba(255, 255, 255, 0.5), 0 5px 5px rgba(0, 0, 0, 0.164);
  border-radius: 50%;
  transition: all 0.3s;
  height: 60px;
  width: 60px;
}

.iso-pro:hover span {
  opacity: 1;
}

.iso-pro:hover span:nth-child(1) {
  opacity: 0.2;
}

.iso-pro:hover span:nth-child(2) {
  opacity: 0.4;
  transform: translate(5px, -5px);
}

.iso-pro:hover span:nth-child(3) {
  opacity: 0.6;
  transform: translate(10px, -10px);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cc26842 *//* Estado inicial de cualquier bloque a revelar */
.section-reveal{
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

/* Estado inicial de cualquier bloque a revelar */
.section-reveal{
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0a56678 *//* =========================
   ABRANIX – SERVICIOS (CSS)
   Full-bleed + fondo deep + drip invertido (blanco→azul)
   ========================= */

/* ---------- Core ---------- */
:root{
  --abx-ink:#0b1020;
  --abx-white:#fff;
  --abx-hero-blue:#0e27be; /* azul principal corregido */
}

html, body{ overflow-x:hidden; }

/* ---------- Full-bleed en Elementor ---------- */
.abx-servicios{
  width:100vw !important;
  margin-left:50% !important;
  transform:translateX(-50%) !important;
}

/* Evitar límites de ancho del tema/Elementor */
.abx-servicios .elementor-container,
.abx-servicios .elementor-container *{ max-width:none !important; }

/* ---------- Base look (cuando NO usas .abx-deep) ---------- */
.abx-servicios{
  --abx-radius:18px;
  --abx-gap:clamp(16px,2vw,28px);

  position:relative;
  isolation:isolate;
  /* Permitimos superponer el drip de la sección de abajo */
  overflow:visible; 
  min-height:100vh;
  padding:clamp(60px,8vw,100px) clamp(16px,5vw,64px);
  display:grid; place-items:center;
  color:var(--abx-white);


  /* Gradiente base suave (se sobrescribe en .abx-deep) */
  background:
    radial-gradient(1200px 800px at 85% 15%, rgba(0,136,255,.20), transparent 60%),
    linear-gradient(180deg, #07154a 0%, #0e27be 45%, #0a1f85 100%); /* Ajustado */
}

/* Líneas sutiles */
.abx-servicios::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:repeating-linear-gradient(135deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 14px);
  mix-blend-mode:overlay; opacity:.5;
}

/* Blobs animados (económicos). Se pueden apagar en .abx-deep si quieres */
.abx-servicios__bg{
  position:absolute; 
  inset: -10% -10%; /* Ajuste para un tamaño más controlado */
  z-index:-2;
  background:
    radial-gradient(25% 30% at 20% 35%, rgba(74,161,255,.35), transparent 60%), /* Reducido el tamaño */
    radial-gradient(30% 35% at 78% 25%, rgba(14,39,190,.35), transparent 65%), /* Reducido el tamaño */
    radial-gradient(35% 40% at 52% 85%, rgba(18,30,120,.45), transparent 60%); /* Reducido el tamaño */
  filter:blur(22px) saturate(115%); /* Blur ligeramente reducido */
  animation:abx-drift 20s ease-in-out infinite alternate; /* Duración ajustada */
}
@keyframes abx-drift{
  0%{transform:translate3d(-1%,-0.5%,0) scale(1.01)} /* Movimiento más sutil */
  50%{transform:translate3d( 1%, 0.5%,0) scale(1.02)} /* Movimiento más sutil */
  100%{transform:translate3d(-0.5%, 1%,0) scale(1.015)} /* Movimiento más sutil */
}

/* ---------- Layout interno ---------- */
.abx-grid{ display:grid; gap:var(--abx-gap); grid-template-columns:1fr; width:100%; }
@media (min-width:980px){ .abx-grid{ grid-template-columns:1.1fr .9fr; align-items:start; } }

.abx-chip{
  display:inline-block; letter-spacing:.4px;
  color:#d6def0; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15);
  padding:8px 12px; border-radius:999px; backdrop-filter:blur(6px);
}
.abx-title{
  margin:14px 0 26px; max-width:24ch; color:#eef3ff;
  font-weight:800; line-height:1.1; font-size:clamp(22px,3vw,32px);
}

/* ---------- Lista izquierda ---------- */
.abx-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }

.abx-item{
  position:relative; overflow:hidden; cursor:pointer; outline:none;
  border-radius:var(--abx-radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.abx-item:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.28); }

/* Banda blanca “reveal” */
.abx-item::before{
  content:""; position:absolute; inset:0; background:#fff;
  transform:translateX(-102%); transition:transform .45s cubic-bezier(.2,.9,.2,1);
}
.abx-item:hover::before,
.abx-item:focus-visible::before,
.abx-item.is-active::before{ transform:translateX(0); }

.abx-item:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.18); }

/* Texto grande */
.abx-item__stroke{
  position:relative; z-index:1; display:block;
  padding:clamp(18px,3.2vw,26px) clamp(18px,3.2vw,28px);
  text-transform:uppercase; font-weight:900; line-height:1.05;
  font-size:clamp(28px,6.3vw,56px); color:#fff;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.30), 1px -1px 0 rgba(0,0,0,.30),
    -1px  1px 0 rgba(0,0,0,.30), 1px  1px 0 rgba(0,0,0,.30);
  transition:color .35s ease, transform .35s ease;
}
.abx-item:hover .abx-item__stroke,
.abx-item:focus-visible .abx-item__stroke,
.abx-item.is-active .abx-item__stroke{ color:var(--abx-ink); transform:translateX(2px); }

/* ---------- Panel derecho ---------- */
.abx-details{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:calc(var(--abx-radius) + 2px);
  padding:clamp(16px,2.4vw,24px);
  backdrop-filter:blur(6px);
  display:flex; flex-direction:column; gap:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.25);
}
.abx-details__title{ margin:0; font-weight:800; font-size:clamp(18px,2.2vw,22px); color:#f7fbff; }
.abx-details__text{ margin:0; color:#e7ecf8; line-height:1.5; font-size:clamp(14px,1.8vw,16px); }
.abx-cta{
  align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:999px; background:#fff; color:#03102b;
  font-weight:800; text-decoration:none; box-shadow:0 10px 26px rgba(0,0,0,.28); transition:.18s ease;
}
.abx-cta:hover{ transform:translateY(-1px); box-shadow:0 14px 36px rgba(0,0,0,.34); }

/* ---------- Modo Lite (alto rendimiento) ---------- */
.abx-servicios.abx-lite{
  background:
    radial-gradient(900px 600px at 85% 15%, rgba(64,148,255,.18), transparent 60%),
    linear-gradient(180deg, #0a1c63 0%, #0e27be 50%, #0a237f 100%); /* Ajustado */
}
.abx-servicios.abx-lite::before{
  background:repeating-linear-gradient(135deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 16px);
  mix-blend-mode:normal; opacity:.6;
}
.abx-servicios.abx-lite .abx-servicios__bg{ display:none; }
.abx-servicios.abx-lite .abx-item{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }

/* ---------- Deep Blue (mismo look del Portafolio) ---------- */
.abx-servicios.abx-deep{
  background:var(--abx-hero-blue) !important;
  color:#eef3ff;
}

/* Formas blancas luminosas sobre el azul */
.abx-servicios.abx-deep::before{
  content:"";
  position:absolute; inset:-12svh -12vw; z-index:0; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'>\
  <defs>\
    <radialGradient id='w1' cx='20%' cy='18%' r='50%'><stop offset='0%' stop-color='white' stop-opacity='.55'/><stop offset='70%' stop-color='white' stop-opacity='0'/></radialGradient>\
    <radialGradient id='w2' cx='82%' cy='12%' r='52%'><stop offset='0%' stop-color='white' stop-opacity='.40'/><stop offset='70%' stop-color='white' stop-opacity='0'/></radialGradient>\
    <radialGradient id='w3' cx='48%' cy='78%' r='55%'><stop offset='0%' stop-color='white' stop-opacity='.38'/><stop offset='70%' stop-color='white' stop-opacity='0'/></radialGradient>\
  </defs>\
  <rect width='1200' height='800' fill='transparent'/>\
  <circle cx='180' cy='140' r='360' fill='url(%23w1)'/>\
  <circle cx='1020' cy='110' r='340' fill='url(%23w2)'/>\
  <circle cx='520' cy='640' r='420' fill='url(%23w3)'/>\
</svg>") center/cover no-repeat;
  mix-blend-mode:screen;
  transform:rotate(0) scale(1.06);
  opacity:.95;
  animation:abxSpin 60s linear infinite, abxPulse 6s ease-in-out infinite;
  will-change:transform, opacity;
}

/* Degradado superior (profundidad) */
.abx-servicios.abx-deep::after{
  content:""; position:absolute; top:0; left:0; right:0; height:15%;
  z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.22) 55%, rgba(0,0,0,0));
}

/* Contraste de encabezado */
.abx-servicios.abx-deep .abx-title{ color:#fff; }
.abx-servicios.abx-deep .abx-chip{
  color:var(--abx-hero-blue); background:#fff; border:1px solid rgba(255,255,255,.75); box-shadow:0 6px 16px rgba(0,0,0,.18); /* Ajustado */
}

/* ---------- Keyframes fondo ---------- */
@keyframes abxSpin{ 0%{transform:rotate(0) scale(1.06)} 50%{transform:rotate(180deg) scale(1.06)} 100%{transform:rotate(360deg) scale(1.06)} }
@keyframes abxPulse{ 0%,100%{opacity:.82} 50%{opacity:.98} }

/* =========================================================
   DRIP INVERTIDO (blanco → azul): la sección de abajo se superpone
   ========================================================= */

/* (Opcional) Si tu sección azul tenía un drip, ocúltalo para evitar doble efecto */
/* .abx-servicios .abx-drip-divider{ display:none !important; } */

/* Aplica .abx-drip-below a la SECCIÓN BLANCA que va debajo de la azul */
.abx-drip-below{
  position: relative;
  z-index: 10;               /* encima de la sección azul */
  background: #ffffff;       /* color base de la sección de abajo (ajusta si no es blanco) */
}

/* Contenedor del drip en la sección de abajo */
.abx-drip-below .abx-drip-divider{
  position: absolute;
  left: 50%;
  top: -170px;               /* sube el drip dentro de la azul (más negativo = más superpuesto) */
  transform: translateX(-50%) scaleY(-1); /* invertimos verticalmente para “derretir” hacia arriba */
  width: 100vw;              /* ancho total */
  height: 200px;             /* altura del goteo */
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 11;               /* por encima de la azul, debajo del contenido blanco */
}

/* SVG de drip invertido */
.abx-drip-below .abx-drip-divider svg{
  display: block;
  width: 100%;
  height: 100%;
}

/* Path del drip con degradado blanco→azul (defínelo en el <defs> del SVG) */
.abx-drip-below .abx-drip-divider path{
  /* fallback por si el gradiente no carga */
  fill: #ffffff;
  /* gradiente correcto pisa el fallback */
  fill: url(#dripWhiteToBlue);
  animation: abxDripInvert 9s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.08)); /* profundidad sutil */
  shape-rendering: geometricPrecision;
}

/* Animación del “derretido” (formas irregulares, misma estructura) */
@keyframes abxDripInvert{
  0%{
    d: path("M0,0 C260,140 860,-40 1200,120 L1200,0 L0,0 Z");
  }
  50%{
    d: path("M0,0 C380,80 760,180 1200,60 L1200,0 L0,0 Z");
  }
  100%{
    d: path("M0,0 C260,140 860,-40 1200,120 L1200,0 L0,0 Z");
  }
}

/* ---------- Accesibilidad / Reduce Motion ---------- */
@media (prefers-reduced-motion: reduce){
  .abx-servicios__bg{ animation:none; }
  .abx-servicios.abx-deep::before{ animation:abxSpin 90s linear infinite; } /* solo spin lento */
  .abx-drip-below .abx-drip-divider path{ animation:none; }
  .abx-item, .abx-item::before, .abx-item__stroke, .abx-cta{ transition:none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f23aeb6 *//* ===================== PROCESO – CSS PURO ===================== */
:root{
  --abx-hero-blue:#0e27be; /* Corregido */
  --abx-ink:#0b1020;
  --abx-muted:#5a6b8d;
  --abx-surface:#ffffff;
  --abx-line:#dbe6ff;
  --abx-brand:#0e27be; /* Corregido */
}

/* ====== CONTENEDOR ====== */
.abx-process{
  background:#fff;
  padding:clamp(48px,7vw,90px) 0;
  position:relative;
}
.abx-process__container{
  width:min(1100px, 92vw);
  margin-inline:auto;
}

/* ====== TITULOS ====== */
.abx-chip{
  display:inline-block; padding:8px 12px; border-radius:999px;
  letter-spacing:.45px; text-transform:uppercase;
  color:#224a9e; background:rgba(14,39,190,.10); border:1px solid rgba(14,39,190,.15); /* Ajustado */
}
.abx-process__title{
  margin:14px 0 10px; color:var(--abx-ink);
  font-weight:900; font-size:clamp(28px,4.5vw,44px); line-height:1.05;
  text-transform:uppercase;
}
.abx-process__lead{
  margin:0 0 24px; color:#33405f; font-size:clamp(15px,2vw,18px); line-height:1.65;
}

/* ====== STEPS WRAPPER (timeline) ====== */
.abx-steps{
  position:relative;
  display:grid; gap:22px;
  grid-template-columns:1fr;
  margin:10px 0 8px; padding:6px 0 0;
  scroll-snap-type:x mandatory; overflow-x:auto;
}
.abx-steps::-webkit-scrollbar{ height:8px; }
.abx-steps::-webkit-scrollbar-thumb{ background:#e6edff; border-radius:999px; }

@media (min-width:900px){
  .abx-steps{
    grid-template-columns:repeat(3,1fr);
    overflow:visible; scroll-snap-type:none;
  }
  /* Línea horizontal que conecta los pasos (desktop) */
 
}

/* ====== STEP ====== */
.abx-step{
  position:relative; background:#f7f9ff; border:1px solid #e6edff; border-radius:16px;
  padding:18px 16px 16px 16px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:flex-start;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
  scroll-snap-align:center;
  transform-origin: center bottom;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  z-index:1;
}
.abx-step:hover{
  background:#eef4ff; border-color:#d7e2ff;
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.08);
}

/* Punto que se alinea con la línea (desktop) */
@media (min-width:900px){
  .abx-step::after{
    content:""; position:absolute; left:50%; transform:translateX(-50%); top:64px;
    width:12px; height:12px; border-radius:999px; background:#fff; border:2px solid #cfe0ff;
    box-shadow:0 0 0 3px #fff;
  }
}

.abx-step__num{
  font:900 clamp(34px,6vw,56px)/1 system-ui,sans-serif;
  color:var(--abx-brand); letter-spacing:-.02em;
  align-self:flex-start;
}
.abx-step__icon{
  grid-column:1/2; grid-row:2/3; margin-left:4px; color:#224a9e; opacity:.9; /* Ajustado el color para que combine mejor con el nuevo azul principal */
}
.abx-step__content{
  grid-column:2/3; grid-row:1/3;
}
.abx-step__content h3{
  margin:.1rem 0 .35rem; font-weight:800; font-size:clamp(16px,2.2vw,20px); color:var(--abx-ink);
}
.abx-step__content p{
  margin:0; color:#33405f; font-size:15px; line-height:1.55;
}

/* ====== CTA ====== */
.abx-process__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.abx-btn{
  display:inline-flex; align-items:center; gap:10px; border-radius:999px;
  padding:12px 18px; font-weight:800; text-decoration:none; transition:.18s ease;
}
.abx-btn--primary{ background:var(--abx-brand); color:#fff; box-shadow:0 10px 26px rgba(0,0,0,.22); }
.abx-btn--primary:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,0,0,.30); }
.abx-btn--ghost{ background:#fff; color:var(--abx-ink); border:1px solid rgba(0,0,0,.1); }
.abx-btn--ghost:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.08); }

/* ====== APARICIÓN ON-SCROLL (usa clase .is-in desde JS/Elementor) ====== */
.abx-process[data-animate="off"] .abx-step{
  opacity:0; transform:translateY(18px) scale(.98);
}
.abx-process.is-in .abx-step{
  opacity:1; transform:translateY(0) scale(1);
  transition:opacity .55s cubic-bezier(.2,.9,.2,1), transform .55s cubic-bezier(.2,.9,.2,1);
}
.abx-process.is-in .abx-step:nth-child(1){ transition-delay:.02s; }
.abx-process.is-in .abx-step:nth-child(2){ transition-delay:.10s; }
.abx-process.is-in .abx-step:nth-child(3){ transition-delay:.18s; }

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .abx-process[data-animate="off"] .abx-step{ opacity:1; transform:none; }
  .abx-process.is-in .abx-step{ transition:none; }
}

/* ===== PATCH: quitar líneas/puntos globales y conectar solo pasos 4→5 ===== */
@media (min-width:900px){
  /* 1) Quita la línea horizontal y los puntos del timeline */
  .abx-steps::before{ display:none !important; }
  .abx-step::after{ display:none !important; }

  /* 2) Conector vertical SOLO entre los dos últimos pasos */
  .abx-step .abx-step__icon{ position: relative; z-index: 1; }

  /* Baja desde el ícono del paso 4 */
  .abx-steps > .abx-step:nth-last-child(2) .abx-step__icon::after{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    top:100%; width:2px; height:44px;
    background: var(--abx-hero-blue, #0e27be); /* Ajustado */
    opacity:.55; border-radius:2px;
  }

  /* Sube hacia el ícono del paso 5 */
  .abx-steps > .abx-step:last-child .abx-step__icon::before{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    bottom:100%; width:2px; height:22px;
    background: var(--abx-hero-blue, #0e27be); /* Ajustado */
    opacity:.55; border-radius:2px;
  }
}

/* 3) Animación: añade delay para pasos 4 y 5 */
.abx-process.is-in .abx-step:nth-child(4){ transition-delay:.26s; }
.abx-process.is-in .abx-step:nth-child(5){ transition-delay:.34s; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6892ece *//* ===== Core vars ===== */
:root{
  --abx-ink:#0b1020;
  --abx-brand:#0e27be; /* Corregido */
  --abx-brand-2:#7a9dff;
  --abx-line:#e6edff;
  --abx-surface:#ffffff;
}

/* ===== Full-bleed helper ===== */
.abx-portfolio--full{ width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw) !important; }

/* ===== Wrapper & Head ===== */
.abx-portfolio{ background:#fff; position:relative; padding:clamp(48px,7vw,90px) 0; overflow:hidden; }
.abx-portfolio__container{ width:min(1100px,92vw); margin-inline:auto; }
.abx-chip{
  display:inline-block; padding:8px 12px; border-radius:999px;
  font-size: 11px; /* Tamaño ajustado */
  color:var(--abx-brand); background:rgba(14,39,190,.10); border:1px solid rgba(14,39,190,.15); /* Corregido */
}
.abx-portfolio__title{ margin:.8rem 0 .3rem; color:var(--abx-ink); }
.abx-portfolio__title span{ background:linear-gradient(90deg,var(--abx-brand),var(--abx-brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.abx-portfolio__lead{ margin:0 0 18px; color:#33405f; font-size:clamp(15px,2vw,18px); /* Tamaño ajustado */ }

/* ===== Fondo base: azul + luz blanca (optimizado) ===== */
.abx-portfolio::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-12svh -12vw;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'>\
  <defs>\
    <radialGradient id='b1' cx='15%' cy='20%' r='60%'>\
      <stop offset='0%' stop-color='%230e27be' stop-opacity='.28'/>\
      <stop offset='65%' stop-color='%230e27be' stop-opacity='0'/>\
    </radialGradient>\
    <radialGradient id='b2' cx='85%' cy='15%' r='55%'>\
      <stop offset='0%' stop-color='%230e27be' stop-opacity='.22'/>\
      <stop offset='65%' stop-color='%230e27be' stop-opacity='0'/>\
    </radialGradient>\
    <radialGradient id='b3' cx='50%' cy='80%' r='50%'>\
      <stop offset='0%' stop-color='%237a9dff' stop-opacity='.22'/>\
      <stop offset='65%' stop-color='%237a9dff' stop-opacity='0'/>\
    </radialGradient>\
    <radialGradient id='w1' cx='40%' cy='40%' r='80%'>\
      <stop offset='0%' stop-color='white' stop-opacity='.25'/>\
      <stop offset='60%' stop-color='white' stop-opacity='0'/>\
    </radialGradient>\
  </defs>\
  <rect width='1200' height='800' fill='white'/>\
  <circle cx='200' cy='140' r='420' fill='url(%23b1)'/>\
  <circle cx='1020' cy='180' r='380' fill='url(%23b2)'/>\
  <circle cx='520' cy='640' r='360' fill='url(%23b3)'/>\
  <circle cx='600' cy='400' r='500' fill='url(%23w1)'/>\
</svg>") center/cover no-repeat;
  transform: rotate(0deg) scale(1.02);
  animation: abxBgSpin 90s linear infinite;
  mix-blend-mode: screen;
}
@keyframes abxBgSpin{
  0%{ transform:rotate(0) scale(1.02) }
  50%{ transform:rotate(180deg) scale(1.02) }
  100%{ transform:rotate(360deg) scale(1.02) }
}
.abx-portfolio > *{ position:relative; z-index:1; }

/* ===== Grid (2 grandes arriba, 3 abajo) ===== */
.abx-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:760px){ .abx-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){
  .abx-grid{ grid-template-columns:repeat(6,1fr); gap:16px; }
  .abx-grid > .abx-card:nth-child(1),
  .abx-grid > .abx-card:nth-child(2){ grid-column:span 3; }
  .abx-grid > .abx-card:nth-child(n+3){ grid-column:span 2; }
}

/* ===== Card base + efectos ===== */
.abx-card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  background:#0d1117; color:#fff; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
  cursor: pointer;
}
.abx-card.is-tilting{ transition: transform .06s linear; }

.abx-glow{
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:0;
  background: radial-gradient(60% 60% at 10% 0%, rgba(14,39,190,.25), transparent 60%),
              radial-gradient(40% 40% at 90% 10%, rgba(122,157,255,.20), transparent 60%);
  opacity:.0; transition:opacity .25s ease;
}
.abx-card:hover .abx-glow{ opacity:.9; }

.abx-sheen{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.25) 52%, transparent 64%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.2,.9,.2,1);
}
.abx-card:hover .abx-sheen{ transform: translateX(115%); }

/* Meta / títulos / media */
.abx-card__meta{ display:flex; gap:8px; align-items:center; padding:12px 14px 0; color:#cbd6ff; font-size: 12px; z-index:1; }
.abx-card__meta .k{ color:#fff; }
.abx-card__title{ padding:0 14px; margin:2px 0 4px; font-size: 20px; color:#fff; z-index:1; }
.abx-card__media{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:14px; margin:0 12px 6px; z-index:1; }
.abx-card__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .55s cubic-bezier(.2,.9,.2,1); }
.abx-card:hover .abx-card__media img{ transform:scale(1.08); }

/* Tags */
.abx-card__tags{ display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 14px; z-index:1; }
.abx-card__tags span{
  background:rgba(255,255,255,.06); color:#e6ebff; border:1px solid rgba(255,255,255,.12);
  padding:6px 10px; border-radius:999px; font-size: 11px;
}

/* Hover depth */
.abx-card:hover{ box-shadow:0 18px 40px rgba(0,0,0,.22); border-color:rgba(122,157,255,.45); }

/* Link invisible de área completa */
.abx-card__link{ position:absolute; inset:0; z-index:5; color:transparent !important; text-decoration:none !important; }
.abx-card__link::after{ content:none !important; }

/* CTA tile */
.abx-card--cta{
  background: radial-gradient(120% 120% at 10% 0%, var(--abx-brand) 0, var(--abx-brand-2) 45%, #0d1117 100%); /* Corregido */
  border-color:transparent; text-align:left; padding:18px 16px;
}
.abx-card--cta h3{ margin:4px 0 8px; color:#fff; font-size: 24px; }
.abx-card--cta p{ margin:0 0 14px; color:#e8ecff; }
.abx-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.abx-btn{ display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:12px 18px; font-size: 14px; text-decoration:none; transition:.18s ease; }
.abx-btn--primary{ background:#fff; color:var(--abx-brand); box-shadow:0 10px 26px rgba(0,0,0,.22); }
.abx-btn--primary:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,0,0,.30); }
.abx-btn--ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.abx-btn--ghost:hover{ transform:translateY(-1px); }

/* Ripple */
.abx-ripple{
  position:absolute; width:14px; height:14px; border-radius:999px; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 70%);
  transform:translate(-50%,-50%) scale(0.2); opacity:.9; z-index:3;
  animation:abxRipple .6s ease forwards;
}
@keyframes abxRipple{
  to{ transform:translate(-50%,-50%) scale(20); opacity:0; }
}

/* Aparición on-scroll */
.abx-portfolio[data-animate="off"] .abx-card{ opacity:0; transform:translateY(16px) scale(.98); }
.abx-portfolio.is-in .abx-card{
  opacity:1; transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0) scale(1);
  transition:opacity .6s cubic-bezier(.2,.9,.2,1), transform .18s ease;
}
.abx-portfolio.is-in .abx-card:nth-child(1){ transition-delay:.02s; }
.abx-portfolio.is-in .abx-card:nth-child(2){ transition-delay:.08s; }
.abx-portfolio.is-in .abx-card:nth-child(3){ transition-delay:.14s; }
.abx-portfolio.is-in .abx-card:nth-child(4){ transition-delay:.20s; }
.abx-portfolio.is-in .abx-card:nth-child(5){ transition-delay:.26s; }

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .abx-portfolio::before{ animation:none; transform:none; }
  .abx-card{ transform:none !important; transition:none !important; }
  .abx-sheen{ display:none; } .abx-glow{ opacity:.2; }
}

/* ===== Boosts para resaltar fondo (opcional) ===== */
.abx-portfolio.abx-bg-boost-1{
  background: linear-gradient(180deg, #f3f7ff 0%, #ffffff 40%) !important;
}
.abx-portfolio.abx-bg-boost-2{
  background: linear-gradient(180deg, #eef3ff 0%, #f9fbff 35%, #ffffff 100%) !important;
}
.abx-portfolio.abx-bg-boost-1::before{
  animation-duration: 75s;
  filter: saturate(1.25);
}
.abx-portfolio.abx-bg-boost-2::before{
  animation-duration: 60s;
  filter: saturate(1.4);
  mix-blend-mode: screen;
}
.abx-portfolio.abx-bg-boost-1::after,
.abx-portfolio.abx-bg-boost-2::after{
  content:""; position:absolute; inset:-1px; z-index:0; pointer-events:none;
  background: radial-gradient(90% 60% at 50% 5%, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 100%);
}
.abx-portfolio.abx-bg-boost-1 > *,
.abx-portfolio.abx-bg-boost-2 > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
  .abx-portfolio.abx-bg-boost-1::before,
  .abx-portfolio.abx-bg-boost-2::before{ animation:none; }
}
/* ===== Deep Blue Mode (fondo protagónico) ===== */
:root{
  --abx-hero-blue:#0e27be; /* Corregido */
}

/* Activa el fondo azul sólido y ajusta tipografía del encabezado */
.abx-portfolio.abx-deep{
  background: var(--abx-hero-blue) !important;
  color: #eef3ff;
}

/* Head: alto contraste sobre azul */
.abx-portfolio.abx-deep .abx-portfolio__title{ color:#ffffff; }
.abx-portfolio.abx-deep .abx-portfolio__title span{
  background: linear-gradient(90deg,#ffffff,#bcd2ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.abx-portfolio.abx-deep .abx-portfolio__lead{ color:#e6ecff; }

/* Chip sobre azul */
.abx-portfolio.abx-deep .abx-chip{
  color:var(--abx-hero-blue); /* Corregido */
  background:#ffffff;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* ===== Fondo animado: formas blancas luminosas (GPU friendly) ===== */
.abx-portfolio.abx-deep::before{
  content:"";
  position:absolute;
  inset:-12svh -12vw;
  z-index:0;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'>\
  <defs>\
    <radialGradient id='w1' cx='20%' cy='18%' r='50%'>\
      <stop offset='0%' stop-color='white' stop-opacity='.42'/>\
      <stop offset='70%' stop-color='white' stop-opacity='0'/>\
    </radialGradient>\
    <radialGradient id='w2' cx='82%' cy='12%' r='52%'>\
      <stop offset='0%' stop-color='white' stop-opacity='.30'/>\
      <stop offset='70%' stop-color='white' stop-opacity='0'/>\
    </radialGradient>\
    <radialGradient id='w3' cx='48%' cy='78%' r='55%'>\
      <stop offset='0%' stop-color='white' stop-opacity='.28'/>\
      <stop offset='70%' stop-color='white' stop-opacity='0'/>\
    </radialGradient>\
  </defs>\
  <rect width='1200' height='800' fill='transparent'/>\
  <circle cx='180' cy='140' r='360' fill='url(%23w1)'/>\
  <circle cx='1020' cy='110' r='340' fill='url(%23w2)'/>\
  <circle cx='520' cy='640' r='420' fill='url(%23w3)'/>\
</svg>") center/cover no-repeat;
  transform: rotate(0deg) scale(1.04);
  mix-blend-mode: screen;
  opacity:.9;
  animation: abxDeepSpin 70s linear infinite, abxDeepPulse 7s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes abxDeepSpin{
  0%{   transform:rotate(0deg)   scale(1.04); }
  50%{  transform:rotate(180deg) scale(1.04); }
  100%{ transform:rotate(360deg) scale(1.04); }
}

@keyframes abxDeepPulse{
  0%,100%{ opacity:.78; }
  50%{    opacity:.98; }
}

.abx-portfolio.abx-deep > *{ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  .abx-portfolio.abx-deep::before{ animation:none; transform:none; opacity:.9; }
}

.abx-portfolio.abx-deep::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:48%;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.32) 28%,
    rgba(0,0,0,.12) 52%,
    rgba(0,0,0,0) 100%
  );
}

@media (prefers-reduced-motion: reduce){
  .abx-portfolio.abx-deep::after{ animation:none; }
}

/* ===================== ABX QUICK INFO (ADD-ON) ===================== */
.abx-quick {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: rgba(6,10,20,.55);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.abx-quick.is-open { opacity: 1; visibility: visible; }

.abx-quick__sheet {
  width: min(1000px, 94vw);
  background: var(--abx-surface, #fff);
  color: var(--abx-ink, #0b1020);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  overflow: hidden;
  transform: translateY(10px);
  transition: transform .22s ease;
  display: grid;
  grid-template-columns: 1fr;
}
.abx-quick.is-open .abx-quick__sheet { transform: translateY(0); }

@media (min-width: 860px){
  .abx-quick__sheet { grid-template-columns: 48% 1fr; }
}

.abx-quick__media {
  position: relative;
  background: #0d1117;
  min-height: 220px;
}
.abx-quick__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.abx-quick__body {
  padding: 18px 18px 20px;
}
.abx-quick__meta {
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  color:#5c6a91; font-size: 12px;
  margin-bottom: 6px;
}
.abx-quick__title {
  margin: 2px 0 8px;
  font-size: clamp(20px, 3.4vw, 28px);
  color: #0b1020;
}
.abx-quick__desc {
  color:#2a3553; line-height:1.4; margin:0 0 12px;
}
.abx-quick__tags {
  display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 16px;
}
.abx-quick__tags span {
  background: rgba(14,39,190,.08); /* Corregido */
  color:var(--abx-brand); /* Corregido */
  border:1px solid rgba(14,39,190,.22); /* Corregido */
  padding:6px 10px; border-radius:999px; font-size: 11px;
}

.abx-quick__actions {
  display:flex; gap:10px; flex-wrap:wrap;
}
.abx-quick__actions .abx-btn { cursor: pointer; }

.abx-quick__close {
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border-radius:10px;
  border:1px solid #e6edff; background:#fff; color:#213055;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  display:grid; place-items:center; cursor:pointer;
}
.abx-quick__close:hover { transform: translateY(-1px); }

@media (prefers-color-scheme: dark){
  .abx-quick__sheet { background:#0d1117; color:#eaf0ff; }
  .abx-quick__title { color:#fff; }
  .abx-quick__desc { color:#cfe0ff; }
  .abx-quick__close { background:#0f1522; color:#eaf0ff; border-color:#22315b; }
}/* End custom CSS */