*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    font-family: Arial, sans-serif;
    scroll-behavior:smooth;
    overflow-x: hidden; 
    border: none
}
body {
    background: #197295e3
}
:root{
    --inmersiva:#e40134;
    --accent:#E40134;
    --glass-bg: rgba(0 0 0 / 20%);
    --glass-border: rgba(255 255 255 / 0%);
    --card-bg: rgba(0 0 0 / 86%);
    --card-border: rgba(255 255 255 / 3%);
}
.btn{
    --bs-btn-font-weight:600;
}
h1,h2,h3,h4,h5{
    font-family:"Lexend",sans-serif!important;
}
.nav-link{
    font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
    color:white;
    font-weight:bold;
    font-size:20px;
    opacity: 0.7
}
.nav-link.active{
    color:white;
    border-bottom:2px solid #E40134;
    opacity:1;
}
#inicio {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, #000 70%, rgba(0,0,0,0) 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  overflow: visible;
}
.category-section{
    position:relative;
    width:100%;
    height: auto !important;
    overflow:hidden;
    background:black;
    display:flex;
    align-items:center;
    justify-content:end;
}
.video-wrapper{
    position:absolute;
    width:100%;
    height:100%;
    overflow: hidden
}
video{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:opacity 1s ease;
}
.video-hidden{
    opacity:0;
    pointer-events:none;
}



.card-custom{
  position: relative;
  border-radius: 10px;
  overflow: hidden;                    
  border: 1px solid rgba(255,255,255,.08);
  --card-ring: 3px;                   
  --card-scale: 1.02;                  
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform, box-shadow; 

  
}

.card-custom::after{
  content: "";
  position: absolute;
  inset: 0;                           
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;                          
  transition: opacity .22s ease, transform .22s ease;
  transform: scale(.995);               
  background: linear-gradient(90deg,#FF00FF,#00F0FF,#8A2BE2,#FF1493,#FF00FF);
  background-size: 300% 100%;
  animation: fwOrbitRing 8s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: var(--card-ring);
  z-index: 2;
}
.card-custom:hover::after{
  opacity: 1;
  transform: none;
}

.card-custom:focus-within::after{
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce){
  .card-custom{ transition: box-shadow .22s ease; }  /* sin scale */
  .card-custom::after{ animation: none; }
}


.card-media-wrapper{
    position:relative;
    width:100%;
    height:200px;
    overflow:hidden;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

.card-media-wrapper video{
    opacity:0;
    pointer-events:none;
}
.card-custom:hover video{
    opacity:1;
}

.card-body{
    padding:1.2rem;
    background: white;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    height: 180px;
    color: black;
    text-align: start
}
.card-body-p{
    padding:1.2rem;
    background: white;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    display: flex;
    align-items: center;
    height: 180px;
    color: black
}
.card-body-n{
    padding:1.2rem;
    background: white;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    height: 180px;
    color: black
}
.card-title{
    font-size:1.1rem;
    font-weight:600;
    padding-top:10px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    line-height: 1.2;
}
.card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: #ff0097;
  transition: width 0.3s ease;
}
.card-anim:hover .card-title::after { width: 100%; }
.card-text{
    font-size:.95rem;
    padding-top: 10px;
    margin-bottom:1rem;
    display: -webkit-box;
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-anim{
    cursor: pointer;
    animation:fadeInUp 1s ease both;
}
@keyframes fadeInUp{
    0%{ opacity:0; transform:translateY(40px); }
    100%{ opacity:1; transform:translateY(0); }
}
@media (max-width:576px){
    .card-media-wrapper{ height:160px; }
}

.background-layer,.background-layer-next{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    z-index:-1;
    pointer-events:none;
    opacity:0;
    transition:opacity .25s ease;
}
.background-layer{ z-index:-2; opacity:1 }

.slide{
    width:100vw;
    transition:opacity 1s ease;
}
.slide h1{
    font-size:3em;
    transition:opacity .8s ease;
}
.slide.visible h1{ opacity:1; }

.horizontal-scroll-wrapper{
    position:relative;
    height:200vh;
    contain: layout paint;
}
.horizontal-sticky{
    position:sticky;
    top:0;
    height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
}
.horizontal-scroll-track{
    width: fit-content;
    display:flex;
    height:100vh;
    align-items: end;
    will-change:transform;
    contain: layout;
}
.horizontal-section{
    height:100vh;
    width:50vw;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    padding:2rem;
    background:transparent;
    position:relative;
    overflow:hidden;
}
@media (max-width:764px){
    .horizontal-section{ width:100vw; }
}
.horizontal-section1{
    height: 88vh;
    display: inline-block;
  width: fit-content;
    color:#fff;
    background:transparent;
}

.cat-panel{
    max-height:72vh;
    overflow:auto;
    padding:1rem 1.25rem;
    border-radius:20px;
    background:rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.cat-title{
    font-family:"Lexend",sans-serif;
    font-weight:800;
    font-size:1.25rem;
    margin:0 0 .5rem 0;
    letter-spacing:.02em;
}
.cat-list{ list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.cat-item{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem .7rem;
    border-radius:12px;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, transform .08s ease;
    outline:none;
}
.cat-item:hover{ background:rgba(255,255,255,.08); }
.cat-item:active{ transform:scale(.99); }
.cat-item .dot{
    width:8px; height:8px; border-radius:999px;
    background:rgba(255,255,255,.55); flex-shrink:0;
}
.cat-item.active{
    background:rgba(255,255,255,.14);
    color:#fff; font-weight:700;
}
.cat-item.active .dot{ background:var(--accent,#E40134); }

.cf-slider{
  position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding-block:8px; margin-top:20px;
}
.cf-viewport{
  overflow:hidden !important; perspective:1200px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}

.cf-track{
  display:grid;
  grid-template-columns: repeat(5, var(--cfW, 260px));
  grid-auto-rows:auto;
  justify-content:center;
  align-content:flex-start;
  gap:16px;
  will-change:transform;
  transform:translate3d(0,0,0);
  padding:32px 0;
}

.cf-item{
  width:var(--cfW,260px);
  transform-style:preserve-3d;
  will-change:transform;
  cursor:grab;
  contain: paint;               
}
.cf-item .card-custom{
  height:100%;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
  transform: translateZ(0);
  will-change: transform;
}
.cf-item:hover .card-custom{ transform: scale(1.04); }

@media (min-width:1200px){ .cf-slider{ --cfW:260px; } }
@media (min-width:992px) and (max-width:1199.98px){ .cf-slider{ --cfW:220px; } }
@media (min-width:768px) and (max-width:991.98px){ .cf-slider{ --cfW:170px; } }
@media (max-width:767.98px){ .cf-slider{ --cfW: clamp(90px, 18vw, 150px); } }

.cf-nav{
  width:52px; height:52px; display:grid; place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.6);
  color:#fff; z-index:3; cursor:pointer;
  transition: background .2s ease, transform .08s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 12px 32px rgba(0,0,0,.35), inset 0 0 22px rgba(228,1,52,.12);
  overflow: visible;
}
.cf-nav::after{
  --ringW: 1.5px;
  content: "";
  position: absolute; inset: calc(-1 * var(--ringW));
  border-radius: inherit;
  background: linear-gradient(90deg,#FF00FF,#00F0FF,#8A2BE2,#FF1493,#FF00FF);
  background-size: 300% 100%;
  animation: cfNavRing 10s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: var(--ringW);
  pointer-events: none;
  opacity: 1; transition: opacity .2s ease;
  opacity: 0
}
.cf-nav:hover{
  background: rgba(0,0,0,.6);
  border-color: rgba(255,255,255,.28);
  transform: scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 0 28px rgba(228,1,52,.2);
}
.cf-nav:active{ transform: translateY(-10%) scale(.98); }
.cf-nav:hover::after{ opacity: 0.8; }

.cf-nav.prev{ left: 11px; }   
.cf-nav.next{ right: 11px; }

.cf-nav.is-disabled,
.cf-locked .cf-nav{ opacity: .45; filter: saturate(.7); cursor: default; pointer-events: none; }
.cf-nav.is-disabled::after,
.cf-locked .cf-nav::after{ animation: none; opacity: .18; }
.cf-nav:focus-visible{ outline: 2px solid #00F0FF; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){ .cf-nav::after{ animation: none !important; } }
@keyframes cfNavRing{ to { background-position: 300% 0; } }

.cf-item.is-page-hidden{ display:none !important; }
.cf-item.is-hidden{ display:none !important; }      

.cf-slider{ --cfW-fixed: 320px; }  

.cf-track{
  display:grid;
  grid-auto-rows:auto;
  justify-content:center;
  align-content:flex-start;
  gap:16px;
  transform:translate3d(0,0,0);
}

.cf-item{
  width: var(--cfW-fixed);
  transform-style:preserve-3d;
  will-change:transform;
  cursor:grab;
  contain: paint;
}
.cf-item .card-custom{
  height:100%;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
  transform: translateZ(0);
  will-change: transform;
}
.cf-item:hover .card-custom{ transform: scale(1.04); }

.cf-item.is-page-hidden{ display:none !important; }
.cf-item.is-hidden{ display:none !important; }

.cf-pager{
  display:flex; gap:.5rem; justify-content:center; align-items:center;
  margin-bottom:.75rem;
  position: relative;
  z-index: 50;           
  pointer-events: auto;
}
.cf-pager .cf-page-btn{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.6);
  color:#fff;
  padding:.3rem .6rem;
  border-radius:.5rem;
  cursor:pointer;
  transition: transform .08s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 0 14px rgba(228,1,52,.12);
}
.cf-pager .cf-page-btn:hover{
  transform: translateY(-1px) scale(1.03);
  border-color:rgba(255,255,255,.28);
}
.cf-pager .cf-page-btn.is-active{
  font-weight:700;
  border-color:#00F0FF;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 18px rgba(0,240,255,.2);
}
.cf-viewport{
  display:block;
  margin-inline: 10px; 
  box-sizing:content-box;
}
.cf-viewport{
  perspective: none !important;
}

.cf-item{
  transform-style: flat !important;
}


.cf-item .card-custom{
  backface-visibility: hidden;
  transform: translateZ(0); 
}

.card-media-wrapper{
  display:flex; align-items:center; justify-content:center;
}
.card-media-wrapper dotlottie-wc{
  display:block;
  width:150px; height:150px;         
  transform: translateZ(0);           
}

#servicios{ color:#fff; }
#servicios .services-kicker{
    display:inline-block; padding:.35rem .75rem; border:1px solid rgba(255,255,255,.22);
    border-radius:999px; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
    background:rgba(255,255,255,.06); 
}
#servicios .services-card{
    background:var(--card-bg, rgba(0,0,0,.5));
    border:1px solid var(--card-border, rgba(255,255,255,.14));
    border-radius:20px; padding:1.5rem; position:relative;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height:100%;
}
#servicios .services-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 44px rgba(0,0,0,.35);
    border-color:rgba(255,255,255,.22);
}
#servicios .services-featured{
    outline:2px solid rgba(228,1,50,.55);
    box-shadow:0 18px 50px rgba(228,1,50,.25), 0 10px 30px rgba(0,0,0,.35);
}
#servicios .services-ribbon{
    position:absolute; top:14px; right:14px;
    background:linear-gradient(135deg,var(--accent),#ff4d73);
    color:#fff; font-size:.75rem; font-weight:700; padding:.3rem .6rem; border-radius:999px; letter-spacing:.04em;
}
#servicios .services-icon{
    width:64px; height:64px; border-radius:16px; display:grid; place-items:center;
    background:radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.18);
    box-shadow:inset 0 0 20px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.25);
}
#servicios .services-icon i{ font-size:28px; }
#servicios .services-title{ font-size:1.25rem; font-weight:700; margin-bottom:.35rem; }
#servicios .services-sub{ color:rgba(255,255,255,.75); margin-bottom:1rem; }
#servicios .services-list{ list-style:none; padding:0; margin:0 0 1.25rem 0; display:grid; gap:.5rem; }
#servicios .services-list li{
    display:grid; grid-template-columns:22px 1fr; align-items:start; gap:.5rem;
}
#servicios .services-list i{ color:var(--accent); margin-top:.15rem; }
#servicios .services-cta .btn-primary{ background:var(--accent); border-color:var(--accent); }
#servicios .services-cta .btn-primary:hover{ filter:brightness(1.05); }
#servicios .services-cta .btn-link{ color:#fff; opacity:.9; }
#servicios .services-cta .btn-link:hover{ opacity:1; text-decoration:underline; }

#particleNet {
    position: fixed; 
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;          
    pointer-events: none; 
  }
/* ====== Tech Cloud (compact) ====== */
.tech-cloud.compact{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.6rem .75rem; align-items:start; position:relative;
}
@media (min-width:576px){
    .tech-cloud.compact{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.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: column;
    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; } }

#collageDemo{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
    grid-auto-rows: var(--rowH, 1px);
    gap:12px; align-items:start; grid-auto-flow:dense;
    height:100%; overflow: visible
}
#collageDemo .gc{
    width:100%; height: 100% !important; display:block; object-fit:cover; border-radius:6px;
    opacity:0; transform:translateY(6px);
    transition:opacity .2s ease, transform .2s ease;
    cursor: pointer
}
#collageDemo .gc.is-ready{ opacity:1; transform:none; }

@media (hover:hover){
  #collageDemo .gc{ position: relative; z-index: 0; transform-origin: center center;
    transition: transform .18s ease, box-shadow .18s ease; will-change: transform; }
  #collageDemo .gc:hover, #collageDemo .gc:focus-visible{
    transform: scale(1.02); z-index: 3; box-shadow: 0 8px 24px rgba(0,0,0,.25); outline: none;
  }
  #collageDemo .gc:active{ transform: scale(1.03); }
}
.gc--show { display: block !important; }
.gc--hide { display: none !important; }

@media (prefers-reduced-motion: reduce){ #collageDemo .gc{ transition: none !important; } }
@media (max-width:1200px){ #collageDemo{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); } }
@media (max-width:768px){ #collageDemo{ grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); } }




.cf-item .card-custom{ height: var(--cfCardH, auto); }
.horizontal-scroll-track{ will-change:transform; contain:layout paint; }
.background-layer,.background-layer-next{ will-change:opacity; }
.card-custom{ contain:layout paint style; }


.media-frame{
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
}

.media-frame .btn-expand{
 border-radius: 10px;
}

.fwheel{
  --ring: 6px;                      
  --accent: #E40134;                 
  --gap: 22px;                       

  width: 100%;
  max-width: 980px;
  margin: clamp(10px, 3vw, 40px) auto 30px;
  position: relative;
  display: grid;
  place-items: center;
  user-select: none;
  touch-action: manipulation;
}

.fwheel-center{
  position: relative;
  z-index: 2;
  width: 120px; height: 120px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer; outline: none;
  background: radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 32px rgba(0,0,0,.35), inset 0 0 28px rgba(228,1,52,.12);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.fwheel-center:hover{ transform: translateY(-1px); box-shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 0 30px rgba(228,1,52,.2); }
.fwheel-center:active{ transform: translateY(0); }
.fwheel-center[aria-pressed="true"]{ border-color: rgba(255,255,255,.35); box-shadow: 0 16px 38px rgba(228,1,52,.25), inset 0 0 34px rgba(228,1,52,.28); }
.fwheel-center-label{ color:#fff; font-weight:800; letter-spacing:.02em; }

.fwheel-center-ring{
  position: absolute; inset: calc(-1 * var(--ring)); border-radius: 50%;
  background: linear-gradient(90deg,#FF00FF,#00F0FF,#8A2BE2,#FF1493,#FF00FF);
  background-size: 300% 100%; animation: fwOrbitRing 10s linear infinite; opacity: .85;
  -webkit-mask: radial-gradient(circle at center, transparent 60px, #000 calc(60px + var(--ring)));
          mask: radial-gradient(circle at center, transparent 60px, #000 calc(60px + var(--ring)));
}


.fwheel-line{
  list-style: none; padding: 0; margin: 0;
}

.fwheel-btn{
  pointer-events: auto;
  display: inline-grid; place-items: center;
  width: auto; height: auto;
  padding: 8px 14px;
  border-radius: 12px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1.1;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, filter .2s ease;
}
.fwheel-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.45); border-color: rgba(255,255,255,.35);}
.fwheel-btn:active{ transform: translateY(0); }
.fwheel-btn[aria-pressed="true"]{ background: linear-gradient(135deg, rgba(228,1,52,.35), rgba(228,1,52,.15)); border-color: rgba(255,255,255,.5); filter: saturate(1.15); }

.fwheel-btn:focus-visible, .fwheel-center:focus-visible{
  outline: 2px solid #00F0FF; outline-offset: 3px;
}

@media (min-width: 992px){
  .fwheel{
    grid-template-rows: auto auto;
    row-gap: 14px;
  }
  .fwheel-line{
    position: absolute; inset: 0; pointer-events: none;
  }
  .fwheel-btn {
      width: 17vw
  }
  .fwheel-item{
    position: absolute; left: 50%; top: 50%;
    width: auto; height: auto; margin: 0;
    transform: translate(-50%,-50%) scale(.9);
    opacity: 0;
    transition: transform .60s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
    will-change: transform, opacity; z-index: 1;
  }
  .fwheel.is-revealed .fwheel-item{
    transform: translate(calc(-50% + var(--tx, 0px)), -50%) scale(1);
    opacity: 1; transition-delay: var(--delay, 0ms); z-index: 3;
  }
}

@media (min-width: 768px) and (max-width: 991.98px){
  .fwheel{
    grid-template-rows: auto auto;
    row-gap: 38px;
  }
  .fwheel-line{
    position: static; inset: auto;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px var(--gap, 22px);
    padding: 0 8px; width: 100%; max-width: 100%;
    pointer-events: auto;
  }
  .fwheel-item{ position: static; transform: none !important; opacity: 1 !important; margin: 0; }
}

@media (max-width: 767.98px){
  .fwheel{
    grid-template-rows: auto auto auto; 
    row-gap: 8px;
  }
  .fwheel-btn {
      width: 100%;
      box-shadow: none
  }
  .fwheel-toggle{
    appearance: none; -webkit-appearance: none;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.35);
    color: #fff; border-radius: 999px;
    padding: 6px 10px; line-height: 1;
    display: inline-grid; place-items: center;
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
  }
  .fwheel-line{
    position: relative; inset: auto;
    display: grid; gap: 10px;
    padding: 6px 10px; width: 100%; max-width: 520px;
    justify-items: center;
    max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px);
    transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
    pointer-events: none;
  }
  .fwheel.is-open .fwheel-line{
    max-height: 70vh; opacity: 1; transform: none; pointer-events: auto;
  }
  .fwheel-item{ position: static; transform: none !important; opacity: 1 !important; margin: 0; width: 100% }
  .fwheel.is-open .fwheel-toggle .bi{ transform: rotate(180deg); transition: transform .2s ease; }
  .fwheel-toggle .bi{ transition: transform .2s ease; }
}
/* ESTADOS ACTIVOS / SELECCIÓN*/
.fwheel-center[aria-pressed="true"],
.fwheel-center.is-active{
  border-color: rgba(255,255,255,.55);
  box-shadow:
    0 18px 46px rgba(228,1,52,.28),
    inset 0 0 38px rgba(228,1,52,.32);
}
.fwheel-center[aria-pressed="true"] .fwheel-center-ring,
.fwheel-center.is-active .fwheel-center-ring{
  opacity: .98;
  filter: saturate(1.15);
  animation-duration: 7.5s;
}


.fwheel-center:not([aria-pressed="true"]) .fwheel-center-ring{
  opacity: .65;
  filter: saturate(.9);
}


.fwheel-btn[aria-pressed="true"],
.fwheel-btn.is-active{
  background:
    linear-gradient(135deg, rgba(228,1,52,.45), rgba(228,1,52,.18));
  border-color: rgba(255,255,255,.65);
  box-shadow:
    0 14px 36px rgba(228,1,52,.25),
    0 8px 22px rgba(0,0,0,.35);
  filter: saturate(1.1);
}


.fwheel:has(.fwheel-btn[aria-pressed="true"][data-tag]:not([data-tag="all"])),
.fwheel:has(.fwheel-btn.is-active[data-tag]:not([data-tag="all"])) {
  
}

.fwheel:has(.fwheel-btn[aria-pressed="true"][data-tag]:not([data-tag="all"])) .fwheel-btn[aria-pressed="false"],
.fwheel:has(.fwheel-btn.is-active[data-tag]:not([data-tag="all"])) .fwheel-btn:not(.is-active){
  opacity: .78;
  filter: saturate(.9);
}

.fwheel:has(.fwheel-btn[aria-pressed="true"][data-tag]:not([data-tag="all"])) .fwheel-center,
.fwheel:has(.fwheel-btn.is-active[data-tag]:not([data-tag="all"])) .fwheel-center{
  box-shadow:
    0 10px 28px rgba(0,0,0,.30),
    inset 0 0 22px rgba(228,1,52,.12);
}
.fwheel:has(.fwheel-btn[aria-pressed="true"][data-tag]:not([data-tag="all"])) .fwheel-center-ring,
.fwheel:has(.fwheel-btn.is-active[data-tag]:not([data-tag="all"])) .fwheel-center-ring{
  opacity: .7;
  filter: saturate(.85);
}

.fwheel-btn:hover{ transform: translateY(-2px); }
.fwheel-btn:focus-visible,
.fwheel-center:focus-visible{
  outline: 2px solid #00F0FF;
  outline-offset: 3px;
}

.fwheel{
  --center-clear-extra: 22px; 
  --gap: 28px;                
}

@media (max-width: 991.98px){
  .fwheel-btn[aria-pressed="true"],
  .fwheel-btn.is-active{
    box-shadow:
      0 10px 30px rgba(228,1,52,.22),
      0 6px 18px rgba(0,0,0,.30);
  }
}

.fwheel.has-selection .fwheel-btn[aria-pressed="false"],
.fwheel.has-selection .fwheel-btn:not(.is-active){
  opacity: .78;
  filter: saturate(.9);
}
.fwheel.has-selection .fwheel-center{
  box-shadow:
    0 10px 28px rgba(0,0,0,.30),
    inset 0 0 22px rgba(228,1,52,.12);
}
.fwheel.has-selection .fwheel-center-ring{
  opacity: .7;
  filter: saturate(.85);
}

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

.fwheel-btn{
  position: relative;         
  overflow: hidden;           
  border-radius: 12px;        
  --chip-ring: 2px;           
}

.fwheel-btn::after{
  content: "";
  position: absolute;
  inset: 0;                   
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;                 
  transition: opacity .2s ease, transform .2s ease;
  transform: scale(.995);     

  background: linear-gradient(90deg,#FF00FF,#00F0FF,#8A2BE2,#FF1493,#FF00FF);
  background-size: 300% 100%;
  animation: fwOrbitRing 8s linear infinite;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: var(--chip-ring);
  z-index: 2;
}

.fwheel-btn:hover::after{
  opacity: 0.6;
  transform: none;
}

.fwheel-btn:focus-visible::after{
  opacity: 0 !important;
}

.fwheel-btn:hover{
  border-color: rgba(255,255,255,.45);
  filter: saturate(1.05);
}


@media (prefers-reduced-motion: reduce){
  .fwheel-btn::after{ animation: none; }
}
.cf-locked .cf-viewport{
  overflow: hidden;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: auto;
}

.cf-locked .cf-track{
  transform: none !important;
  transition: none !important;
  justify-content: center;
}
.video-wrapper{
  position: relative;
  width: 100%;
  height: 100vh;              
  overflow: hidden;
  pointer-events: none;       
  z-index: 0;
}
.image-wrapper {
    display: none
}
@media (max-width: 992px) {
    .video-wrapper{
  display: none
}
.image-wrapper {
    display: block;
    width: 100%;
    margin-top: 37px
}
.image-wrapper img {
    width: 100%
}
}

.yt-viewport{
  position: absolute;
  inset: 0;
  pointer-events: none;
}


.video-hidden{ opacity: 0; transition: opacity .5s ease; }
.yt-viewport:not(.video-hidden){ opacity: 1; transition: opacity .5s ease; }


.card-media-wrapper { position: relative; }
.card-media-wrapper .yt-holder iframe { pointer-events: none; }


.card-media-wrapper .cover{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s ease;
  will-change: opacity;
}
.cover-p{
    position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
}


.cf-item:hover .cover{
  opacity: 0 !important;   
}

.card-media-wrapper::after{
  content: "";
  position: absolute; inset: 0;

  /* background: linear-gradient(to top, rgba(0,0,0,.35), transparent 40%); */
  opacity: 1;
  z-index: 3;               
  pointer-events: none;
  transition: opacity .25s ease;
}
.cf-item:hover .card-media-wrapper::after{
  opacity: 0 !important;
}

.cat-panel{
  position: absolute;
  z-index: 5;
}
.estado {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 7px;
    margin-top: 5px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 12px 32px, rgba(228, 1, 52, 0.12) 0px 0px 22px inset;
    place-items: center;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.18);
    border-image: initial;
    background: rgba(0, 0, 0, 0.6);
    transition: background 0.2s, transform 0.08s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
    overflow: visible;
    color: white
}
.estado::after {
    --ringW: 1px; 
    content: "";
    position: absolute;
    inset: calc(-1 * var(--ringW));
    border-radius: inherit;
    background: linear-gradient(90deg, #FF00FF, #00F0FF, #8A2BE2, #FF1493, #FF00FF);
    background-size: 300% 100%;
    animation: cfNavRing 10s 
linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: var(--ringW);
    pointer-events: none;
    opacity: 1;
    transition: opacity .2s 
ease;
}
.tarjeta.deshabilitada {
  position: absolute;
    z-index: 10;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    opacity: 0.5;
    filter: grayscale(80%);
    transform: none !important;
    background: #7f8c8d5c !important;
}


.tarjeta.deshabilitada,
.tarjeta.deshabilitada::after,
.tarjeta.deshabilitada:hover {
  animation: none !important;
  transition: none !important;
  content: "" !important; 
}


.platform-card {
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}


.platform-card i {
  color: #00d9ff; 
}

.footer-ieb{
    background: #00000024; 
    color:#f1f1f1;
  }
  
  .footer-link{
    color:#eaeaea;
    text-decoration:none;
  }
  .footer-link:hover{
    text-decoration:underline;
    color:#ffffff;
  }
  .footer-social{
    width:40px; height:40px;
    display:grid; place-items:center;
    border:1px solid rgba(255,255,255,.7);
    border-radius:10px;
    color:#ffffff;
    text-decoration:none;
    transition:transform .15s ease, background .2s ease, border-color .2s ease;
  }
  .footer-social:hover{
    background:rgba(255,255,255,.08);
    border-color:#ffffff;
    transform:translateY(-2px);
  }
  .footer-ieb .fw-semibold{
    color:#ffffff;
  }
  .card-title { line-height: 1.15; margin-bottom: .4rem; }
.card-title .title-main{
  display:block;        
  overflow:hidden;     
  font-weight:600;
}
.card-title .title-sub{
  display:block;
  margin-top:.2rem;
  font-size:.9rem;           
  opacity:.75;                
}
.icono {
    height: 83px; 
}
@media (max-width: 763px) {
    .icono {
        height:px
    }
}
.hover-w {
    color: white;
    transition: color 0.5s ease;
}
.hover-w:hover {
    color: #17ff00
}
.hover-f {
    color: white;
    transition: color 0.5s ease;
}
.hover-f:hover {
    color: #2d76ff
}
.hover-y {
    color: white;
    transition: color 0.5s ease;
}
.hover-y:hover {
    color: red
}

.container2 {
  display: flex;
  justify-content: end;
  align-items: center;
  height: 35px;
}

.input {
  width: 300px;
  height: 100%;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  background-color: #0e0e10;
  caret-color: #f7f7f8;
  color: #fff;
  padding: 7px 10px;
  border: 2px solid transparent;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  margin-right: 1px;
  transition: all .2s ease;
}

.input:hover {
  border: 2px solid rgba(255, 255, 255, 0.16);
}

.input:focus {
  border: 2px solid #00F0FF;
  background-color: #0e0e10;
}

.search__btn {
  border: none;
  cursor: pointer;
  background-color: rgba(42, 42, 45, 1);
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  height: 100%;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search__btn:hover {
  background-color: rgba(54, 54, 56, 1);
}
@media (max-width: 540px) {
    .input {
        width: 200px
    }
}
.gt_float_switcher .gt-selected {
    background-color: #000000 !important;
}
.gt_float_switcher .gt-selected .gt-current-lang {
    color: #ffffff !important;
}
.gt_float_switcher {
    color: #ffffff !important;
    background: #000000 !important;
}
.gt_float_switcher .gt_options a {
    color: #ffffff !important;
}
.tra {
    position: absolute;
    top: 25%;
    right: 3%
}
@media (max-width: 997px) {
    .tra {
        top: auto;
        right: 0%;
        bottom: 0%;
    }
}