.modal-97{
    width:97vw;
    max-width:97vw;
    max-height:97vh;
    overflow:hidden;
}
.modal-97 .modal-content{ height:100%; } 

.modal-backdrop.show{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background-color:rgba(0,0,0,.65)!important;
}

#staticBackdrop .modal-content{
    background:var(--card-bg);
    border:1px solid var(--glass-border);
    border-radius:24px;
    position:relative;
    overflow:hidden;
}
@media (max-width:768px){
    .h-min {
        min-height: 100vh
    }
    .h-min .h-100 {
        min-height: 100vh
    }
}
#staticBackdrop .modal-content::after{
    content:"";
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(1200px 600px at -10% -20%, rgba(255,255,255,.08), transparent 60%),
      radial-gradient(800px 400px at 120% 120%, rgba(255,255,255,.06), transparent 55%);
    mix-blend-mode:overlay;
}
#staticBackdrop .modal-dialog-scrollable .modal-body{
    scrollbar-gutter:stable both-edges;
    scrollbar-width:thin;
    scrollbar-color:rgb(140 133 133) rgba(255,255,255,.06);
}
#staticBackdrop .intro{
  background: transparent;
  border: 1px solid #ffffff47;
  border-radius: 20px;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  color: #fff;
}

#staticBackdrop .btn-cta{
    --btn-accent:var(--accent,#E40134);
    position:relative; display:inline-flex; align-items:center; gap:.4rem;
    padding:.9rem 1.25rem; border:0; border-radius:14px; color:#fff;
    background:linear-gradient(135deg,#ff4d73,var(--btn-accent));
    box-shadow:0 10px 24px rgba(228,1,52,.28), inset 0 1px 0 rgba(255,255,255,.22);
    font-weight:800; letter-spacing:.02em;
    transform:translateZ(0);
    transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
    text-decoration:none; isolation:isolate;
}
#staticBackdrop .btn-cta::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
    transform:translateX(-150%) skewX(-18deg); opacity:0; pointer-events:none;
}
#staticBackdrop .btn-cta:hover::before{ animation:cta-shine 900ms ease forwards; opacity:1; }
@keyframes cta-shine{ to{ transform:translateX(150%) skewX(-18deg); opacity:0; } }
#staticBackdrop .btn-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(228,1,52,.36), inset 0 1px 0 rgba(255,255,255,.26); }
#staticBackdrop .btn-cta:active{ transform:translateY(0); filter:brightness(.98); }
#staticBackdrop .btn-cta .icon{ transition:transform .2s ease; }
#staticBackdrop .btn-cta:hover .icon{ transform:translateX(4px); }
#staticBackdrop .btn-cta.attn{ animation:cta-pulse 1.1s ease-out infinite; }
#staticBackdrop .btn-cta:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px rgba(255,255,255,.22), 0 0 0 8px rgba(228,1,52,.55), 0 10px 24px rgba(228,1,52,.28);
}

#staticBackdrop .glass-header{
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  border-bottom: 1px solid rgba(255,255,255,.10);
  
  z-index: 3; padding: .85rem 1rem;
}

#staticBackdrop .headline-wrap{ display:flex; justify-content: space-between; gap:.35rem; flex:1 1 auto; min-width:0; }
#staticBackdrop .headline-row{ display:flex; align-items:baseline; gap:.75rem; min-width:0; }
#staticBackdrop .modal-headline{
  color:#fff; 
}
#staticBackdrop .cta-inline{
  --cta-bg: linear-gradient(90deg,#ff4d73,#e40134,#7a66ff);
  --cta-ring: rgba(255,255,255,.18);

  display:inline-flex; align-items:center; justify-content: center; width: 100%; gap:.35rem;
  padding:.35rem .65rem; border-radius:0.375rem; background:var(--cta-bg);
  background-size:200% 100%; color:#fff; font-weight:500; line-height:1; text-decoration:none;
  border:1px solid var(--cta-ring);
  box-shadow:0 6px 20px rgba(228,1,52,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background-position .4s linear;
  white-space: nowrap; margin-bottom:6px;
}
#staticBackdrop .cta-inline:hover{
  transform: translateY(-1px); background-position:100% 0;
  box-shadow:0 10px 28px rgba(228,1,52,.38), inset 0 1px 0 rgba(255,255,255,.3);
}
#staticBackdrop .cta-inline:active{ transform: translateY(0); }
#staticBackdrop .headline-accent{
  height:1.5px; border-radius:999px;
  background: linear-gradient(90deg,#FF00FF, #00F0FF, #8A2BE2, #FF1493, #FF00FF);
  background-size:300% 100%; animation: headline-rgb 10s linear infinite; opacity:.9;
}
@keyframes headline-rgb{ 0%{ background-position:0 0; } 100%{ background-position:300% 0; } }

@media (max-width: 576px){
  #staticBackdrop .headline-row{ gap:.5rem; flex-wrap:wrap; }
  #staticBackdrop .cta-inline{ padding:.45rem .7rem; }
}

#staticBackdrop .cta-inline.attn{ animation: cta-pulse 1.1s ease-out infinite; }
@keyframes cta-pulse{
    0%{ box-shadow:0 10px 24px rgba(228,1,52,.28); }
    50%{ box-shadow:0 18px 42px rgba(228,1,52,.42); transform:translateY(-2px); }
    100%{ box-shadow:0 10px 24px rgba(228,1,52,.28); transform:translateY(0); }
}

.video-overlay{
    inset:0; display:none; justify-content:center; align-items:center;
    background-color:rgba(0,0,0,.9);
    z-index:200000; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    position:fixed;
}
.video-overlay iframe{
    width:min(94vw,1400px); aspect-ratio:16 / 9; height:auto; max-height:90vh; border:none;
}
.video-overlay .close-btn{
    position:absolute; top:1rem; right:1rem; font-size:2rem; color:#fff; cursor:pointer; background:none; border:none;
}
.btn-i{ position:absolute; transition: transform 0.3s ease }
.btn-i:hover{ transform: scale(1.2); }

.categoria {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgb(253 13 13 / 10%);
    color: #ff5c5c;
    border: 1px solid rgb(253 13 13 / 25%);
    border-radius: 7px;
  padding: .25rem .75rem;
  font-weight: 600;
}
.mz-overlay{
  position: fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.85); z-index:1080;
}
.mz-overlay.open{ display:flex; }

.mz-stage{
  position: relative; width:100%;
  max-width: min(92vw, 1280px); max-height: 86vh;
  display:grid; place-items:center;
}
.mz-stage img, .mz-stage video{
  width:auto; height:auto; max-width:100%; max-height:86vh;
  object-fit:contain; display:block; border:0; border-radius:12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  z-index:1;
}

.mz-close, .mz-nav{
  position:absolute; top:12px; background: rgba(0,0,0,.55); color:#fff; border:0;
  width:40px; height:40px; border-radius:999px; cursor:pointer;
  display:grid; place-items:center; font-size:22px;
  z-index:4; 
}
.mz-close{ right:12px; }
.mz-nav{ top:50%; transform:translateY(-50%); font-size:28px; }
.mz-prev{ left:12px; }
.mz-next{ right:12px; }

.mz-overlay.loading .mz-stage::after{
  content:'Cargando…'; position:absolute; bottom:1rem; left:1rem;
  font:600 14px/1 system-ui, sans-serif; color:#fff; opacity:.85; z-index:3;
}
#collageDemo{ flex:1; height:100%; min-height:0; }
.modal-html-lock { overscroll-behavior: none; }

body.modal-fixed {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
}

body.modal-open { overflow: hidden !important; }

.modal-open .horizontal-scroll-wrapper,
.modal-fixed .horizontal-scroll-wrapper {
  touch-action: none;
  overscroll-behavior: contain;
}
.mz-load-more{
  display: inline-block;
  margin-top: 1rem;
  align-self: center;
}
#collageDemo .gc-wrap{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

#collageDemo .gc{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;   
}

.gc-wrap .ieb-loader{
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  pointer-events: none;
}

.gc.is-ready + .ieb-loader,
.gc.is-ready ~ .ieb-loader{
  display: none; 
}
.not-galery {
    height: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: larger;
    font-weight: 500
}
.tech-chip{
    --bg:rgba(255,255,255,.08);
    --bd:rgba(255,255,255,.18);
    --fg:#fff;
    --ring:transparent;
    --scale:1;
    --y:0px;
    display:inline-flex; align-items:center; justify-content:center; flex-direction: row;
    gap: 5px; padding: 4px 0px; border-radius:10px; border:1px solid var(--bd);
    background:var(--bg); color:var(--fg);
    font-weight:600; line-height:1; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.22);
    transition:transform .15s ease, box-shadow .2s ease;
    transform:translateY(var(--y)) scale(var(--scale)); position:relative; margin: 8px;
}
.tech-chip:hover{
    transform:translateY(calc(var(--y) - 2px)) scale(calc(var(--scale) + .02));
    box-shadow:0 10px 28px rgba(0,0,0,.3);
}
.tech-chip::after{
    content:""; position:absolute; inset:-3px; border-radius:inherit;
    box-shadow:0 0 0 2px var(--ring); pointer-events:none; opacity:.8;
}
.tech-chip.span-2{ grid-column:span 2; }
.tc-hand{ --bg:linear-gradient(135deg,#2c6fff1a,#2c6fff33); --bd:#2c6fff40; --ring:#2c6fff66; }
.tc-pass{ --bg:linear-gradient(135deg,#00d4ff1a,#00d4ff33); --bd:#00d4ff40; --ring:#00d4ff66; }
.tc-lms{ --bg:linear-gradient(135deg,#a78bfa1a,#a78bfa33); --bd:#a78bfa40; --ring:#a78bfa66; }
.tc-analytics{ --bg:linear-gradient(135deg,#22c55e1a,#22c55e33); --bd:#22c55e40; --ring:#22c55e66; }
.tc-mobile{ --bg:linear-gradient(135deg,#f59e0b1a,#f59e0b33); --bd:#f59e0b40; --ring:#f59e0b66; }
.tc-hmd{ --bg:linear-gradient(135deg,#e401341a,#e4013433); --bd:#e4013440; --ring:#e4013466; }
@media (max-width:420px){ .tech-chip.span-2{ grid-column:auto; } }
.tech-chip2{
    --bg:rgba(255,255,255,.08);
    --bd:rgba(255,255,255,.18);
    --fg:#fff;
    --ring:transparent;
    --scale:1;
    --y:0px;
    align-items:center; justify-content:center; 
    gap: 5px; padding: 4px 6px; border-radius:999px; border:1px solid var(--bd);
    background: var(--bg); border-color: var(--bd);
    box-shadow: 0 0 0 3px var(--ring);
    font-weight:600; line-height:1; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.22);
    margin-right: 5px;
}
.services-list{ list-style:none; padding:0; margin:0 0 1.25rem 0; display:grid; gap:.5rem; }
.services-list li{
    display:grid; grid-template-columns:22px 1fr; align-items:start; gap:.5rem;
}
.services-list i{ color:var(--accent); margin-top:.25rem; }

.rgb-sep{
  --size: 14px;           
  --thick: 4px;           
  --bg: rgba(0,0,0,.65);  
  --blur: 10px;          
  --speed: 6s;        

  width: var(--size);
  height: var(--size);
  position: relative;
  display: inline-grid;
  place-items: center;
  transform: rotate(0deg);
}

.rgb-sep[data-dir="left"] { transform: rotate(180deg); }
.rgb-sep[data-dir="up"]   { transform: rotate(-90deg); }
.rgb-sep[data-dir="down"] { transform: rotate(90deg); }

.rgb-sep::before{
  content:"";
  width: 100%;
  height: 100%;
  background: var(--bg);
  /* Chevron (>) */
  clip-path: polygon(
    25% 10%,  75% 50%, 25% 90%, 15% 80%,
    50% 50%, 15% 20%
  );
  border-radius: 8px;
  position: relative;
  z-index: 1;
}

.rgb-sep::after{
  --pad: max(var(--thick), 1.5px);
  content:"";
  position:absolute;
  inset: calc(-1 * var(--pad));
  border-radius: 10px;
  background: linear-gradient(90deg, #ff00ff, #00f0ff, #8a2be2, #ff1493, #ff00ff);
  background-size: 300% 100%;
  animation: sepHue var(--speed) linear infinite;
  -webkit-mask:
    radial-gradient(#000 0 0) contain, 
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor, source-over;
          mask-composite: exclude;

  padding: var(--pad);

  clip-path: polygon(
    25% 10%,  75% 50%, 25% 90%, 15% 80%,
    50% 50%, 15% 20%
  );

  filter: drop-shadow(0 6px var(--blur) rgba(0,0,0,.35));
  pointer-events:none;
}

@keyframes sepHue { to { background-position: 300% 0; } }

.rgb-sep.sm { --size: 26px; --thick: 3px; }
.rgb-sep.lg { --size: 48px; --thick: 5px; }

#staticBackdrop .modal-content{
  display: flex;
  flex-direction: column;
  max-height: 97vh;
}
#staticBackdrop .modal-body{
  flex: 1 1 auto;
}

#staticBackdrop .modal-body .row{ height: 100%; min-height: 0; }
#staticBackdrop .modal-body [class*="col-"]{ display:flex; flex-direction:column; min-height:0; }
#staticBackdrop .modal-body .intro{ min-height: 0; }

#staticBackdrop .modal-body.modal-scroll{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#galleryScroll.gallery-pin{
  position: sticky;
  top: 0;
  height: var(--availH, 70vh);
  overflow: hidden;
}
 
#galleryScroll.gallery-scroll{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: var(--availH, 70vh);
}

@media (min-width: 756px){
  #staticBackdrop .modal-content{
    display: flex;
    flex-direction: column;
    max-height: 97vh; 
  }
  #staticBackdrop .modal-body{
    flex: 1 1 auto;            
  }

  #staticBackdrop .modal-body .row{ height: 100%; min-height: 0; }
  #staticBackdrop .modal-body [class*="col-"]{ display:flex; flex-direction:column; min-height:0; }
  #staticBackdrop .modal-body .intro{ min-height: 0; }
  #galleryScroll{ min-height: 0; }

  #staticBackdrop .modal-body.modal-scroll{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #galleryScroll.gallery-pin{
    position: sticky;
    top: 0;
    height: var(--availH, 70vh);
    overflow: hidden;
  }

  #galleryScroll.gallery-scroll{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: var(--availH, 70vh);
  }
}

@media (max-width: 755.98px){
  #staticBackdrop .modal-body{ overflow-y: auto; }   
  #galleryScroll{
    overflow: visible;
    height: auto;
  }
}

@media (min-width: 756px){
  #galleryScroll.gallery-scroll{
    box-sizing: border-box;
    padding-bottom: calc(max(24px, env(safe-area-inset-bottom)));
    scrollbar-gutter: stable both-edges;
  }
}
li {
   display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}