:root{
  --bg:#07111f;
  --bg-2:#091727;
  --surface:#0c1b2d;
  --surface-2:#10243a;
  --text:#f5f8fc;
  --muted:#9dafc2;
  --line:rgba(255,255,255,.09);
  --cyan:#45e0ff;
  --blue:#4d78ff;
  --violet:#8d67ff;
  --green:#54e6aa;
  --radius:24px;
  --shadow:0 30px 90px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:
  radial-gradient(circle at 12% 0%,rgba(77,120,255,.12),transparent 32%),
  var(--bg); color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.section{padding:110px 0;position:relative}
.skip-link{position:fixed;left:16px;top:-80px;padding:10px 16px;background:#fff;color:#000;z-index:999;border-radius:10px}
.skip-link:focus{top:16px}
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(7,17,31,.72);backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;transition:.25s
}
.site-header.scrolled{border-color:var(--line);box-shadow:0 12px 45px rgba(0,0,0,.18)}
.nav-wrap{height:80px;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:.08em}
.brand-mark{
  width:35px;height:35px;display:grid;place-items:center;border-radius:11px;
  background:linear-gradient(135deg,var(--cyan),var(--blue) 55%,var(--violet));
  color:#04101e;box-shadow:0 0 30px rgba(69,224,255,.25)
}
.brand-name{font-size:1rem}
.brand img{max-width: 200px;}
.main-nav{display:flex;align-items:center;gap:30px;color:#becbd8;font-size:.9rem;font-weight:600}
.main-nav>a{transition:.2s}
.main-nav>a:hover{color:#fff}
.nav-cta{padding:12px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04)}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:12px;cursor:pointer}
.menu-toggle span{width:18px;height:2px;background:#fff;display:block;margin:4px auto;transition:.25s}

.hero{padding-top:165px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.hero-glow{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.hero-glow-one{width:700px;height:700px;right:-260px;top:40px;background:radial-gradient(circle,rgba(77,120,255,.18),transparent 67%)}
.hero-glow-two{width:450px;height:450px;left:-260px;bottom:-100px;background:radial-gradient(circle,rgba(69,224,255,.1),transparent 68%)}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#87dfff}
.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:25px}
.pulse-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 6px rgba(84,230,170,.1)}
h1,h2,h3{font-family:Manrope,Inter,sans-serif;margin:0;letter-spacing:-.045em}
h1{font-size:clamp(3rem,6vw,4rem);line-height:.98;max-width:790px}
.hero-lead{font-size:1.08rem;line-height:1.8;color:var(--muted);max-width:670px;margin:27px 0 33px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{min-height:52px;padding:0 22px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.92rem;transition:.25s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(120deg,var(--cyan),#6c8cff);color:#05101b;box-shadow:0 16px 45px rgba(77,120,255,.24)}
.btn-secondary{border:1px solid var(--line);background:rgba(255,255,255,.04)}
.hero-trust{display:flex;gap:34px;margin-top:42px;padding-top:28px;border-top:1px solid var(--line)}
.hero-trust div{display:flex;flex-direction:column;gap:3px}
.hero-trust strong{font-size:1.3rem}
.hero-trust span{color:var(--muted);font-size:.75rem}
.hero-visual{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center}

.floating-badge{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(9,23,39,.84);backdrop-filter:blur(15px);box-shadow:0 18px 55px rgba(0,0,0,.28)}
.floating-badge>span{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(69,224,255,.12);color:var(--cyan)}
.floating-badge div{display:flex;flex-direction:column}.floating-badge strong{font-size:.72rem}.floating-badge small{font-size:.62rem;color:var(--muted);margin-top:2px}


/* =========================================================
   HERO PROJECT SHOWCASE
   ========================================================= */

.hero-showcase {
  position: relative;

  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
}


/* =========================================================
   ESCENARIO
   ========================================================= */

.hero-project-stage {
  position: relative;

  width: 160%;

  aspect-ratio: 16 / 11;

  margin-left: -10%;

  isolation: isolate;
}


/* Glow integrado con el hero */

.hero-project-stage::before {
  content: "";

  position: absolute;

  width: 75%;
  height: 70%;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(47, 126, 255, .18),
      rgba(86, 69, 255, .07) 45%,
      transparent 72%
    );

  filter: blur(35px);

  z-index: -1;

  pointer-events: none;
}


/* =========================================================
   IMÁGENES
   ========================================================= */

.hero-website-slide {
  position: absolute;

  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(8px)
    scale(.98);

  transition:
    opacity .8s ease,
    visibility .8s ease,
    transform 1s cubic-bezier(.2,.8,.2,1);
}


.hero-website-slide.active {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}


.hero-website-slide img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  user-select: none;

  filter:
    drop-shadow(0 35px 50px rgba(0,0,0,.22));
}


/* =========================================================
   BADGES
   ========================================================= */

.showcase-badge {
  position: absolute;

  z-index: 10;

  pointer-events: none;
}


.badge-performance {
  right: -1%;
  top: 12%;
}


.badge-conversions {
  left: 0;
  bottom: 23%;
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.hero-showcase-nav {
  width: 85%;

  margin: -5px auto 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;
}


/* Flechas */

.hero-showcase-arrow {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.12);

  border-radius: 50%;

  background: rgba(255,255,255,.025);

  color: #a8bbcd;

  font-size: 1.2rem;

  cursor: pointer;

  transition: .25s ease;
}


.hero-showcase-arrow:hover {
  border-color: rgba(69,224,255,.35);

  background: rgba(69,224,255,.07);

  color: var(--cyan);

  transform: scale(1.06);
}


/* =========================================================
   DOTS
   ========================================================= */

.hero-showcase-dots {
  display: flex;

  align-items: center;

  gap: 7px;
}


.hero-showcase-dot {
  width: 6px;
  height: 6px;

  padding: 0;

  border: 0;

  border-radius: 999px;

  background: rgba(255,255,255,.18);

  cursor: pointer;

  transition:
    width .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}


.hero-showcase-dot.active {
  width: 25px;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--violet)
    );

  box-shadow:
    0 0 15px rgba(69,224,255,.18);
}


/* =========================================================
   NOMBRE
   ========================================================= */

.hero-project-name {
  color: #617991;

  font-size: .58rem;

  font-weight: 650;

  text-transform: uppercase;

  letter-spacing: .12em;

  white-space: nowrap;
}


.hero-project-name strong {
  margin-left: 5px;

  color: #b9cede;

  font-weight: 750;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {

  .hero-project-stage {
    width: 100%;

    max-width: 760px;

    margin: 0 auto;
  }


  .hero-showcase-nav {
    max-width: 500px;
  }

}


@media (max-width: 620px) {

  .hero-project-stage {
    width: 112%;

    margin-left: -6%;

    aspect-ratio: 1 / .85;
  }


  .badge-performance {
    right: 1%;
    top: 9%;

    transform: scale(.82);

    transform-origin: right top;
  }


  .badge-conversions {
    left: 1%;
    bottom: 17%;

    transform: scale(.82);

    transform-origin: left bottom;
  }


  .hero-showcase-nav {
    width: 100%;

    margin-top: 0;

    gap: 11px;
  }


  .hero-showcase-arrow {
    width: 34px;
    height: 34px;

    flex-basis: 34px;
  }


  .hero-project-name {
    font-size: .5rem;
  }

}


/* =========================================================
   BADGES
   ========================================================= */

.showcase-badge {
  z-index: 5;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.showcase-badge:hover {
  transform: translateY(-4px);

  border-color: rgba(69, 224, 255, .28);

  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    0 0 35px rgba(69,224,255,.08);
}


.badge-performance {
  right: 0px;
  top: 35px;
}


.badge-conversions {
  left: -28px;
  bottom: 75px;
}


/* =========================================================
   SELECTOR
   ========================================================= */

.hero-project-selector {
  width: 100%;

  margin-top: 5px;

  display: grid;

  grid-template-columns: 42px 1fr 42px;

  align-items: center;

  gap: 10px;
}


.hero-projects {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 9px;
}


/* =========================================================
   MINIATURAS
   ========================================================= */

.hero-project {
  min-width: 0;

  padding: 5px;

  border: 1px solid rgba(255,255,255,.08);

  border-radius: 13px;

  background: rgba(255,255,255,.025);

  color: var(--muted);

  cursor: pointer;

  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease,
    color .25s ease;

  overflow: hidden;
}


.hero-project:hover {
  transform: translateY(-2px);

  border-color: rgba(69,224,255,.2);

  background: rgba(69,224,255,.035);

  color: #fff;
}


.hero-project.active {
  border-color: rgba(69,224,255,.7);

  background: rgba(69,224,255,.055);

  color: #fff;

  box-shadow:
    0 0 0 1px rgba(69,224,255,.12),
    0 8px 30px rgba(69,224,255,.06);
}


.hero-project-preview {
  width: 100%;
  height: 65px;

  display: block;

  overflow: hidden;

  border-radius: 9px;

  background: #0b1726;
}


.hero-project-preview img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: top;

  opacity: .7;

  filter: saturate(.75);

  transition:
    opacity .25s ease,
    filter .25s ease,
    transform .35s ease;
}


.hero-project:hover img,
.hero-project.active img {
  opacity: 1;

  filter: saturate(1);
}


.hero-project:hover img {
  transform: scale(1.04);
}


.hero-project strong {
  display: block;

  padding: 8px 4px 5px;

  overflow: hidden;

  font-size: .58rem;
  font-weight: 750;

  text-align: center;

  text-transform: uppercase;

  letter-spacing: .09em;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   FLECHAS
   ========================================================= */

.project-arrow {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.1);

  border-radius: 50%;

  background: rgba(255,255,255,.025);

  color: #b8c9d8;

  font-size: 1.35rem;

  cursor: pointer;

  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .25s ease;
}


.project-arrow:hover {
  border-color: rgba(69,224,255,.25);

  background: rgba(69,224,255,.06);

  color: var(--cyan);

  transform: scale(1.06);
}


/* =========================================================
   STATUS / PROGRESO
   ========================================================= */

.hero-showcase-footer {
  margin-top: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.showcase-status {
  display: flex;
  align-items: center;

  gap: 8px;

  color: #6f859a;

  font-size: .61rem;

  text-transform: uppercase;

  letter-spacing: .09em;
}


.showcase-status strong {
  margin-left: 3px;

  color: #a9c4da;

  font-weight: 700;
}


.showcase-status-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 0 5px rgba(84,230,170,.08),
    0 0 10px rgba(84,230,170,.5);
}


.showcase-progress {
  width: 110px;
  height: 2px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(255,255,255,.07);
}


.showcase-progress span {
  width: 100%;
  height: 100%;

  display: block;

  transform: scaleX(0);

  transform-origin: left;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--blue),
      var(--violet)
    );
}


.showcase-progress.running span {
  animation: heroProjectProgress 6s linear forwards;
}


@keyframes heroProjectProgress {

  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {

  .hero-showcase {
    max-width: 720px;

    margin: 0 auto;

    min-height: auto;
  }


  .badge-performance {
    right: 0;
  }


  .badge-conversions {
    left: 0;
  }

}


@media (max-width: 620px) {

  .hero-showcase {
    margin-top: 10px;
  }


  .hero-laptop {
    width: 110%;

    margin-left: -5%;
  }


  .showcase-badge {
    display: none;
  }


  .hero-project-selector {
    grid-template-columns: 34px 1fr 34px;

    gap: 6px;
  }


  .project-arrow {
    width: 34px;
    height: 34px;

    font-size: 1rem;
  }


  .hero-projects {
    gap: 5px;
  }


  .hero-project {
    padding: 3px;

    border-radius: 9px;
  }


  .hero-project-preview {
    height: 48px;

    border-radius: 6px;
  }


  .hero-project strong {
    padding: 6px 2px 4px;

    font-size: .48rem;

    letter-spacing: .06em;
  }


  .hero-showcase-footer {
    margin-top: 10px;
  }


  .showcase-status {
    font-size: .52rem;
  }


  .showcase-progress {
    width: 70px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .website-slide,
  .website-slide img {
    transition: none;
  }


  .showcase-progress.running span {
    animation: none;

    transform: scaleX(1);
  }

}


/* =========================================================
   CLIENTES
   ========================================================= */

.client-strip {
  width: 100%;
  max-width: none;

  margin-top: 100px;

  padding: 65px 0 25px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  position: relative;

  text-align: center;

  overflow: hidden;
}


/* =========================================================
   HEADING
   ========================================================= */

.clients-heading {
  width: min(850px, calc(100% - 40px));

  margin: 0 auto 55px;
}


.clients-kicker {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  padding: 9px 15px;

  margin-bottom: 22px;

  border: 1px solid rgba(69, 224, 255, 0.22);

  border-radius: 999px;

  background: rgba(69, 224, 255, 0.035);

  color: #d9e8f6;

  font-size: 0.67rem;
  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  box-shadow:
    0 0 35px rgba(69, 224, 255, 0.04),
    inset 0 0 20px rgba(69, 224, 255, 0.02);
}


.clients-kicker i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:
    0 0 0 5px rgba(69, 224, 255, 0.08),
    0 0 15px rgba(69, 224, 255, 0.6);
}


.clients-heading h2 {
  margin: 0;

  font-family: Manrope, Inter, sans-serif;

  font-size: clamp(1.8rem, 3vw, 2.8rem);

  line-height: 1.15;

  letter-spacing: -0.04em;

  color: #f5f8fc;
}


.clients-heading h2 .text-gradient {
  background: linear-gradient(
    90deg,
    var(--cyan),
    #6d9cff,
    var(--violet)
  );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}


.clients-heading p {
  max-width: 600px;

  margin: 20px auto 0;

  color: var(--muted);

  font-size: 0.9rem;

  line-height: 1.7;
}


/* =========================================================
   MARQUEE
   ========================================================= */

.clients-marquee {
  position: relative;

  width: 100%;

  overflow: hidden;

  border-top: 1px solid rgba(69, 224, 255, 0.12);
  border-bottom: 1px solid rgba(69, 224, 255, 0.12);

  background:
    linear-gradient(
      90deg,
      rgba(69, 224, 255, 0.015),
      rgba(77, 120, 255, 0.025),
      rgba(69, 224, 255, 0.015)
    );
}


.clients-track {
  display: flex;

  width: max-content;

  will-change: transform;

  animation: clientsScroll 24s linear infinite;
}


.clients-group {
  display: flex;
  align-items: center;

  flex-shrink: 0;
}


/* =========================================================
   LOGOS
   ========================================================= */

.client-logo {
  width: 300px;
  height: 145px;

  padding: 30px 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  flex-shrink: 0;
}


/* Separador */

.client-logo:not(:last-child)::after {
  content: "";

  position: absolute;

  right: 0;
  top: 31px;
  bottom: 31px;

  width: 1px;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
}


.client-logo img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 75px;

  object-fit: contain;

  transition:
    transform 0.3s ease,
    filter 0.3s ease,
    opacity 0.3s ease;

  opacity: 0.88;

  filter: saturate(0.88);
}


.client-logo:hover img {
  transform: scale(1.06);

  opacity: 1;

  filter:
    saturate(1)
    drop-shadow(0 8px 22px rgba(69, 224, 255, 0.12));
}


/* Ajustes individuales */

.client-foliatti img {
  max-height: 85px;
}


.client-prodynamics img {
  max-width: 230px;
}


.client-pokipoke img {
  max-height: 90px;
}


.client-sushi img {
  max-width: 220px;
}


/* =========================================================
   SOMBRAS LATERALES
   ========================================================= */

.clients-fade {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 130px;

  z-index: 3;

  pointer-events: none;
}


.clients-fade-left {
  left: 0;

  background: linear-gradient(
    to right,
    #07111f,
    rgba(7, 17, 31, 0)
  );
}


.clients-fade-right {
  right: 0;

  background: linear-gradient(
    to left,
    #07111f,
    rgba(7, 17, 31, 0)
  );
}


/* =========================================================
   ANIMACIÓN
   ========================================================= */

@keyframes clientsScroll {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* Pausa al colocar mouse */

.clients-marquee:hover .clients-track {
  animation-play-state: paused;
}


/* =========================================================
   FOOTER CLIENTES
   ========================================================= */

.clients-footer {
  width: min(760px, calc(100% - 40px));

  margin: 34px auto 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 22px;
}


.clients-line {
  height: 1px;

  flex: 1;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(133, 167, 200, 0.45)
  );
}


.clients-line:last-child {
  transform: rotate(180deg);
}


.clients-counter {
  display: flex;
  align-items: center;

  gap: 13px;

  color: #9dafc2;

  font-size: 0.66rem;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  white-space: nowrap;
}


.clients-counter strong {
  color: #dbe8f5;

  font-weight: 800;
}


.infinity {
  color: #73a5ff;

  font-size: 1.8rem;

  font-weight: 400;

  line-height: 1;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 820px) {

  .client-strip {
    margin-top: 70px;

    padding-top: 50px;
  }


  .clients-heading {
    margin-bottom: 40px;
  }


  .client-logo {
    width: 240px;
    height: 125px;

    padding: 25px 35px;
  }


  .client-logo img {
    max-height: 65px;
  }


  .client-foliatti img {
    max-height: 72px;
  }


  .client-pokipoke img {
    max-height: 78px;
  }


  .clients-fade {
    width: 70px;
  }

}


@media (max-width: 620px) {

  .client-strip {
    margin-top: 55px;

    padding-top: 45px;
  }


  .clients-heading {
    width: calc(100% - 28px);

    margin-bottom: 35px;
  }


  .clients-heading h2 {
    font-size: 1.75rem;
  }


  .clients-heading p {
    font-size: 0.82rem;
  }


  .clients-kicker {
    font-size: 0.58rem;
  }


  .client-logo {
    width: 200px;
    height: 110px;

    padding: 23px 30px;
  }


  .client-logo img {
    max-height: 58px;
  }


  .client-foliatti img {
    max-height: 65px;
  }


  .client-pokipoke img {
    max-height: 70px;
  }


  .clients-fade {
    width: 45px;
  }


  .clients-footer {
    width: calc(100% - 28px);

    gap: 12px;

    margin-top: 28px;
  }


  .clients-counter {
    font-size: 0.54rem;

    letter-spacing: 0.12em;
  }


  .clients-counter .infinity {
    font-size: 1.5rem;
  }

}


/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {

  .clients-track {
    animation: none;
  }

}

.services{background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.section-heading{display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end;margin-bottom:48px}
.section-heading h2,.process-copy h2,.about-copy h2{font-size:clamp(2.25rem,4.2vw,4rem);line-height:1.05;margin-top:14px}
.section-heading>p,.process-copy>p{color:var(--muted);line-height:1.75;margin:0;font-size:.98rem}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.service-card{min-height:380px;border:1px solid var(--line);border-radius:20px;padding:26px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015));position:relative;overflow:hidden;transition:.3s}
.service-card:hover{transform:translateY(-7px);border-color:rgba(69,224,255,.28);background:linear-gradient(145deg,rgba(69,224,255,.07),rgba(255,255,255,.02))}
.service-index{position:absolute;right:22px;top:22px;font-size:.65rem;color:#536b81;font-weight:700}
.service-icon{width:48px;height:48px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;color:var(--cyan);background:#0b1b2b;margin:36px 0 70px;font-weight:700}
.service-card h3{font-size:1.2rem;margin-bottom:14px}
.service-card p{color:var(--muted);font-size:.87rem;line-height:1.7;margin:0 0 18px}
.service-card ul{list-style:none;padding:0;margin:0;display:flex;gap:7px;flex-wrap:wrap}
.service-card li{font-size:.65rem;color:#a8b8c8;border:1px solid var(--line);border-radius:999px;padding:7px 9px;background:rgba(255,255,255,.025)}

.portfolio{background:#081422}
.filter-bar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.filter-btn{border:1px solid var(--line);background:rgba(255,255,255,.025);color:#a8b7c6;border-radius:999px;padding:10px 14px;cursor:pointer;font-weight:650;font-size:.78rem;transition:.2s}
.filter-btn span{font-size:.62rem;opacity:.55;margin-left:5px}
.filter-btn:hover,.filter-btn.active{background:#eef7ff;color:#07111f;border-color:#eef7ff}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}


/* =========================================================
   PORTFOLIO PROJECT CARD
   ========================================================= */

.project-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, .10);

  border-radius: 26px;

  background: #091827;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, .16);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .45s ease;
}


/* Hover general */

.project-card:hover {
  transform: translateY(-8px);

  border-color: rgba(255, 255, 255, .16);

  box-shadow:
    0 35px 90px rgba(0, 0, 0, .28);
}


/* =========================================================
   VISUAL
   ========================================================= */

.project-visual {
  position: relative;

  height: 445px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding: 60px 28px 20px;
}


/* =========================================================
   TIPO DE PROYECTO
   ========================================================= */

.project-type {
  position: absolute;

  left: 22px;
  top: 22px;

  z-index: 10;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding: 8px 13px;

  border: 1px solid rgba(255,255,255,.15);

  border-radius: 999px;

  background: rgba(5, 14, 25, .78);

  backdrop-filter: blur(12px);

  color: #e6eef6;

  font-size: .69rem;
  font-weight: 750;
}


.project-type i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--project-accent, var(--cyan));

  box-shadow:
    0 0 12px var(--project-accent, var(--cyan));
}


/* =========================================================
   GLOW
   ========================================================= */

.project-glow {
  position: absolute;

  width: 75%;
  height: 75%;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%)
    scale(.85);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      var(--project-glow, rgba(69,224,255,.25)),
      transparent 68%
    );

  filter: blur(35px);

  opacity: .6;

  transition:
    transform .7s cubic-bezier(.2,.8,.2,1),
    opacity .5s ease;

  pointer-events: none;
}


.project-card:hover .project-glow {
  transform:
    translate(-50%, -50%)
    scale(1.15);

  opacity: .95;
}


/* =========================================================
   BROWSER
   ========================================================= */

.project-browser {
  width: 108%;
  position: relative;
  z-index: 2;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 17px;

  background: #07111f;

  transform:
    translateY(8px)
    perspective(1100px)
    rotateX(1deg)
    rotateY(-1deg)
    rotateZ(-1.5deg);

  transform-origin: center;

  box-shadow:
    0 30px 70px rgba(0, 0, 0, .40),
    0 0 45px var(--project-shadow, rgba(69, 224, 255, .06));

  transition:
    transform .65s cubic-bezier(.2,.8,.2,1),
    box-shadow .5s ease;
}


.project-card:hover .project-browser {
  transform:
    translateY(0)
    perspective(1100px)
    rotateX(0)
    rotateY(0)
    rotateZ(0)
    scale(1.025);

  box-shadow:
    0 40px 90px rgba(0,0,0,.5),
    0 0 70px var(--project-shadow, rgba(69,224,255,.12));
}


/* =========================================================
   BROWSER BAR
   ========================================================= */

.project-browser-bar {
  height: 39px;

  display: flex;
  align-items: center;

  position: relative;

  padding: 0 13px;

  border-bottom: 1px solid rgba(255,255,255,.07);

  background:
    rgba(7, 17, 31, .96);
}


.browser-controls {
  display: flex;

  gap: 6px;
}


.browser-controls span {
  width: 8px;
  height: 8px;

  border-radius: 50%;
}


.browser-controls span:nth-child(1) {
  background: #ff6259;
}


.browser-controls span:nth-child(2) {
  background: #ffbd2e;
}


.browser-controls span:nth-child(3) {
  background: #28c840;
}


/* URL */

.browser-url {
  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  display: flex;
  align-items: center;

  gap: 6px;

  color: #8599ac;

  font-size: .58rem;
  font-weight: 600;
}


.browser-url i {
  font-size: .48rem;

  color: #6f8498;
}


/* =========================================================
   SCREENSHOT
   ========================================================= */

.project-screen {
  position: relative;

  width: 100%;
  height: 290px;

  overflow: hidden;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: #fff;
}


.project-screen img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  object-fit: cover;
  object-position: top center;

  border: 0;
  border-radius: 0;

  transform: scale(1.001);

  transition:
    transform 3.5s cubic-bezier(.2,.65,.3,1);
}


/*
  En hover desplazamos ligeramente la web.
  Da la sensación de estar navegando.
*/

.project-card:hover .project-screen img {
  transform: scale(1.035);
}


/* =========================================================
   VER PROYECTO
   ========================================================= */

.project-view {
  position: absolute;

  right: 25px;
  bottom: 24px;

  z-index: 10;

  display: flex;
  align-items: center;

  gap: 8px;

  padding: 10px 13px;

  border: 1px solid rgba(255,255,255,.13);

  border-radius: 10px;

  background: rgba(5,14,25,.82);

  backdrop-filter: blur(12px);

  color: #fff;

  font-size: .62rem;
  font-weight: 700;

  opacity: 0;

  transform: translateY(10px);

  transition:
    opacity .3s ease,
    transform .3s ease,
    border-color .3s ease;
}


.project-card:hover .project-view {
  opacity: 1;

  transform: translateY(0);

  border-color:
    var(--project-accent, rgba(69,224,255,.35));
}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.project-info {
  min-height: 165px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  padding: 27px 30px 30px;

  border-top: 1px solid rgba(255,255,255,.07);

  background:
    linear-gradient(
      180deg,
      rgba(12,31,49,.98),
      rgba(8,24,39,.98)
    );
}


.project-copy {
  min-width: 0;
}


.project-copy > span {
  display: block;

  margin-bottom: 10px;

  color: var(--cyan);

  font-size: .63rem;
  font-weight: 800;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.project-copy h3 {
  margin: 0;

  color: #f3f7fb;

  font-size: 1.45rem;

  letter-spacing: -.035em;

  transition: color .3s ease;
}


.project-card:hover .project-copy h3 {
  color: #fff;
}


.project-copy p {
  margin: 7px 0 0;

  color: #8298ab;

  font-size: .78rem;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.project-open {
  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(69,224,255,.2);

  border-radius: 14px;

  background: rgba(69,224,255,.035);

  color: var(--cyan);

  font-size: .8rem;

  transition:
    transform .35s ease,
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.project-open:hover {
  transform:
    translateY(-3px)
    rotate(5deg);

  border-color: transparent;

  background:
    linear-gradient(
      135deg,
      var(--cyan),
      #6d9cff
    );

  color: #07111f;

  box-shadow:
    0 12px 30px rgba(69,224,255,.15);
}


/* =========================================================
   COLORES POR PROYECTO
   ========================================================= */

.project-card--lockstore {
  --project-accent: #ff2b36;

  --project-glow:
    rgba(255, 35, 55, .32);

  --project-shadow:
    rgba(255, 35, 55, .13);
}

.project-card--linnia {
  --project-accent: #10c7d4;

  --project-glow:
    rgba(16, 199, 212, .30);

  --project-shadow:
    rgba(16, 199, 212, .14);
}

.project-card--medical {
  --project-accent: #45e0ff;

  --project-glow:
    rgba(38, 170, 255, .27);

  --project-shadow:
    rgba(38, 170, 255, .12);
}

.project-card--sushi {
  --project-accent: #78d400;

  --project-glow:
    rgba(120, 212, 0, .30);

  --project-shadow:
    rgba(120, 212, 0, .14);
}

.project-card--reciclaunicel {
  --project-accent: #7fbd3c;

  --project-glow:
    rgba(127, 189, 60, .30);

  --project-shadow:
    rgba(127, 189, 60, .14);
}

.project-card--wpconsulting {
  --project-accent: #26c281;

  --project-glow:
    rgba(38, 194, 129, .28);

  --project-shadow:
    rgba(38, 194, 129, .14);
}

.project-card--wpconsulting .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(38, 194, 129, .16),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0d211d,
      #081523 70%
    );
}

.project-card--bering {
  --project-accent: #ef3438;

  --project-glow:
    rgba(239, 52, 56, .28);

  --project-shadow:
    rgba(239, 52, 56, .14);
}

.project-card--bering .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(239, 52, 56, .18),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #251317,
      #081523 70%
    );
}

.project-card--bering .project-screen img {
  object-position: top center;
}

.project-card--pokipoke {
  --project-accent: #65cbb8;

  --project-glow:
    rgba(101, 203, 184, .30);

  --project-shadow:
    rgba(101, 203, 184, .14);
}

.project-card--pokipoke .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(101, 203, 184, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #102623,
      #081523 70%
    );
}

.project-card--pokipoke .project-screen img {
  object-position: top center;
}

.project-card--maepallets {
  --project-accent: #2fa9df;

  --project-glow:
    rgba(47, 169, 223, .30);

  --project-shadow:
    rgba(47, 169, 223, .14);
}

.project-card--maepallets .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(47, 169, 223, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #10222c,
      #081523 70%
    );
}

.project-card--maepallets .project-screen img {
  object-position: top center;
}

.project-card--republicadiving {
  --project-accent: #55c4df;

  --project-glow:
    rgba(85, 196, 223, .32);

  --project-shadow:
    rgba(85, 196, 223, .16);
}

.project-card--republicadiving .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(85, 196, 223, .22),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0a2530,
      #071522 70%
    );
}

.project-card--republicadiving .project-screen img {
  object-position: top center;
}

.project-card--obelix {
  --project-accent: #e8ff32;
  --project-glow: rgba(232, 255, 50, .26);
  --project-shadow: rgba(232, 255, 50, .13);
}

.project-card--obelix .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(232, 255, 50, .16),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #171b18,
      #081522 72%
    );
}

.project-card--obelix .project-screen img {
  object-position: top center;
}

.project-card--acevedo {
  --project-accent: #ff2525;
  --project-glow: rgba(255, 37, 37, .28);
  --project-shadow: rgba(255, 37, 37, .14);
}

.project-card--acevedo .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(255, 37, 37, .17),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #251015,
      #081522 72%
    );
}

.project-card--acevedo .project-screen img {
  object-position: top center;
}

.project-card--enlaser {
  --project-accent: #f4073f;
  --project-glow: rgba(244, 7, 63, .27);
  --project-shadow: rgba(244, 7, 63, .14);
}

.project-card--enlaser .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(244, 7, 63, .17),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #25101a,
      #081522 72%
    );
}

.project-card--enlaser .project-screen img {
  object-position: top center;
}

.project-card--alejandro {
  --project-accent: #d9c7ae;
  --project-glow: rgba(217, 199, 174, .22);
  --project-shadow: rgba(217, 199, 174, .10);
}

.project-card--alejandro .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(217, 199, 174, .14),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #211e1d,
      #081522 72%
    );
}

.project-card--alejandro .project-screen img {
  object-position: top center;
}

.project-card--grecia {
  --project-accent: #d59aa6;
  --project-glow: rgba(213, 154, 166, .28);
  --project-shadow: rgba(213, 154, 166, .14);
}

.project-card--grecia .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(213, 154, 166, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #28171f,
      #0a1724 72%
    );
}

.project-card--grecia .project-screen img {
  object-position: top center;
}

.project-card--acotravel {
  --project-accent: #37c8c2;
  --project-glow: rgba(55, 200, 194, .27);
  --project-shadow: rgba(55, 200, 194, .14);
}

.project-card--acotravel .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(55, 200, 194, .17),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #092a2e,
      #081522 72%
    );
}

.project-card--acotravel .project-screen img {
  object-position: top center;
}

.project-card--anes {
  --project-accent: #1680f8;
  --project-glow: rgba(22, 128, 248, .28);
  --project-shadow: rgba(22, 128, 248, .15);
}

.project-card--anes .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(22, 128, 248, .18),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0b2138,
      #081523 72%
    );
}

.project-card--anes .project-screen img {
  object-position: top center;
}

.project-card--drsantiago {
  --project-accent: #0961c7;
  --project-glow: rgba(9, 97, 199, .30);
  --project-shadow: rgba(9, 97, 199, .16);
}

.project-card--drsantiago .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(9, 97, 199, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0a2038,
      #071522 72%
    );
}

.project-card--drsantiago .project-screen img {
  object-position: top center;
}

.project-card--zavant {
  --project-accent: #a93642;
  --project-glow: rgba(169, 54, 66, .30);
  --project-shadow: rgba(169, 54, 66, .16);
}

.project-card--zavant .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(169, 54, 66, .22),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #291119,
      #0b1622 72%
    );
}

.project-card--zavant .project-screen img {
  object-position: top center;
}

.project-card--dromarurogine {
  --project-accent: #08a79f;
  --project-glow: rgba(8, 167, 159, .30);
  --project-shadow: rgba(8, 167, 159, .16);
}

.project-card--dromarurogine .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(8, 167, 159, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #09292d,
      #071722 72%
    );
}

.project-card--dromarurogine .project-screen img {
  object-position: top center;
}

.project-card--dreduardo {
  --project-accent: #7ca32d;
  --project-glow: rgba(124, 163, 45, .30);
  --project-shadow: rgba(124, 163, 45, .16);
}

.project-card--dreduardo .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(124, 163, 45, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #1d321f,
      #081722 72%
    );
}

.project-card--dreduardo .project-screen img {
  object-position: top center;
}

.project-card--dlgproshop {
  --project-accent: #d3261d;
  --project-glow: rgba(211, 38, 29, .30);
  --project-shadow: rgba(211, 38, 29, .16);
}

.project-card--dlgproshop .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(211, 38, 29, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #301313,
      #081522 72%
    );
}

.project-card--dlgproshop .project-screen img {
  object-position: top center;
}

.project-card--rroutdoor {
  --project-accent: #d58a2c;
  --project-glow: rgba(213, 138, 44, .30);
  --project-shadow: rgba(213, 138, 44, .16);
}

.project-card--rroutdoor .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(213, 138, 44, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #2a1c0c,
      #081522 72%
    );
}

.project-card--rroutdoor .project-screen img {
  object-position: top center;
}

.project-card--lamp {
  --project-accent: #a216b5;
  --project-glow: rgba(162, 22, 181, .30);
  --project-shadow: rgba(162, 22, 181, .16);
}

.project-card--lamp .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(162, 22, 181, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #26102d,
      #081522 72%
    );
}

.project-card--lamp .project-screen img {
  object-position: top center;
}

.project-card--rudyseguros {
  --project-accent: #ef3524;
  --project-glow: rgba(239, 53, 36, .30);
  --project-shadow: rgba(239, 53, 36, .16);
}

.project-card--rudyseguros .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(239, 53, 36, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #2b1112,
      #081522 72%
    );
}

.project-card--rudyseguros .project-screen img {
  object-position: top center;
}

.project-card--maizmier {
  --project-accent: #d52b1e;
  --project-glow: rgba(213, 43, 30, .30);
  --project-shadow: rgba(213, 43, 30, .16);
}

.project-card--maizmier .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(213, 43, 30, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #30120f,
      #081522 72%
    );
}

.project-card--maizmier .project-screen img {
  object-position: top center;
}

.project-card--hovers {
  --project-accent: #e30613;
  --project-glow: rgba(227, 6, 19, .30);
  --project-shadow: rgba(227, 6, 19, .16);
}

.project-card--hovers .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(227, 6, 19, .22),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #2b0b10,
      #07162d 72%
    );
}

.project-card--hovers .project-screen img {
  object-position: top center;
}

.project-card--confianza {
  --project-accent: #4285f4;
  --project-glow: rgba(66, 133, 244, .30);
  --project-shadow: rgba(66, 133, 244, .16);
}

.project-card--confianza .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(66, 133, 244, .22),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0b1d3b,
      #081522 72%
    );
}

.project-card--confianza .project-screen img {
  object-position: top center;
}

.project-card--servicemaver {
  --project-accent: #e9a844;
  --project-glow: rgba(233, 168, 68, .30);
  --project-shadow: rgba(233, 168, 68, .15);
}

.project-card--servicemaver .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(233, 168, 68, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #211b13,
      #0b1722 72%
    );
}

.project-card--servicemaver .project-screen img {
  object-position: top center;
}

.project-card--qualitydrive {
  --project-accent: #1768c4;
  --project-glow: rgba(23, 104, 196, .32);
  --project-shadow: rgba(23, 104, 196, .16);
}

.project-card--qualitydrive .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(23, 104, 196, .23),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0b1d32,
      #081522 72%
    );
}

.project-card--qualitydrive .project-screen img {
  object-position: top center;
}

/* LockStore */

.project-card--lockstore .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(255, 29, 51, .17),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #151425,
      #081523 70%
    );
}

.project-card--linnia .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(16, 199, 212, .18),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0b2029,
      #081523 70%
    );
}

.project-card--reciclaunicel .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(127, 189, 60, .18),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #13241c,
      #081523 70%
    );
}

.project-card--disalas {
  --project-accent: #d9d9d9;
  --project-glow: rgba(255, 255, 255, .16);
  --project-shadow: rgba(255, 255, 255, .09);
}

.project-card--disalas .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(255, 255, 255, .12),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #242424,
      #090d12 72%
    );
}

.project-card--disalas .project-screen img {
  object-position: top center;
}

.project-card--blindatek {
  --project-accent: #ff1a16;
  --project-glow: rgba(255, 26, 22, .30);
  --project-shadow: rgba(255, 26, 22, .15);
}

.project-card--blindatek .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(255, 26, 22, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #271313,
      #0b121c 72%
    );
}

.project-card--blindatek .project-screen img {
  object-position: top center;
}

.project-card--drarturo {
  --project-accent: #348df4;
  --project-glow: rgba(52, 141, 244, .32);
  --project-shadow: rgba(52, 141, 244, .16);
}

.project-card--drarturo .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(52, 141, 244, .24),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #10233d,
      #081522 72%
    );
}

.project-card--drarturo .project-screen img {
  object-position: top center;
}

.project-card--verao {
  --project-accent: #45c9e8;
  --project-glow: rgba(69, 201, 232, .32);
  --project-shadow: rgba(69, 201, 232, .16);
}

.project-card--verao .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(69, 201, 232, .24),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0b2936,
      #071723 72%
    );
}

.project-card--verao .project-screen img {
  object-position: top center;
}

.project-card--ortigosa {
  --project-accent: #7c4dce;
  --project-glow: rgba(124, 77, 206, .30);
  --project-shadow: rgba(124, 77, 206, .16);
}

.project-card--ortigosa .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(124, 77, 206, .24),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #1d1036,
      #091523 72%
    );
}

.project-card--ortigosa .project-screen img {
  object-position: top center;
}

.project-card--aldej {
  --project-accent: #1b7898;
  --project-glow: rgba(27, 120, 152, .32);
  --project-shadow: rgba(27, 120, 152, .16);
}

.project-card--aldej .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(35, 145, 180, .24),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0a2635,
      #071522 72%
    );
}

.project-card--aldej .project-screen img {
  object-position: top center;
}

.project-card--draandrea {
  --project-accent: #c52067;
  --project-glow: rgba(197, 32, 103, .30);
  --project-shadow: rgba(197, 32, 103, .16);
}

.project-card--draandrea .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(197, 32, 103, .23),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #35101f,
      #111522 72%
    );
}

.project-card--draandrea .project-screen img {
  object-position: top center;
}

.project-card--elite {
  --project-accent: #00a18d;
  --project-glow: rgba(0, 161, 141, .30);
  --project-shadow: rgba(0, 161, 141, .16);
}

.project-card--elite .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(0, 161, 141, .24),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #062b32,
      #071522 72%
    );
}

.project-card--elite .project-screen img {
  object-position: top center;
}

.project-card--drmario {
  --project-accent: #168be0;
  --project-glow: rgba(22, 139, 224, .30);
  --project-shadow: rgba(22, 139, 224, .16);
}

.project-card--drmario .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(22, 139, 224, .24),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #082d55,
      #071522 72%
    );
}

.project-card--drmario .project-screen img {
  object-position: top center;
}

.project-card--jaimecarrillo {
  --project-accent: #65d3b0;
  --project-glow: rgba(101, 211, 176, .28);
  --project-shadow: rgba(101, 211, 176, .14);
}

.project-card--jaimecarrillo .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(101, 211, 176, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #12333d,
      #071522 72%
    );
}

.project-card--jaimecarrillo .project-screen img {
  object-position: top center;
}

.project-card--terraceriasfg {
  --project-accent: #ff7629;
  --project-glow: rgba(255, 118, 41, .30);
  --project-shadow: rgba(255, 118, 41, .15);
}

.project-card--terraceriasfg .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(255, 118, 41, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #252525,
      #0b1118 72%
    );
}

.project-card--terraceriasfg .project-screen img {
  object-position: top center;
}

.project-card--casacolorada {
  --project-accent: #e5ad55;
  --project-glow: rgba(229, 173, 85, .30);
  --project-shadow: rgba(229, 173, 85, .15);
}

.project-card--casacolorada .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(229, 173, 85, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #103a59,
      #071522 72%
    );
}

.project-card--casacolorada .project-screen img {
  object-position: top center;
}


.project-card--ingserma {
  --project-accent: #4269d8;
  --project-glow: rgba(66, 105, 216, .30);
  --project-shadow: rgba(66, 105, 216, .16);
}

.project-card--ingserma .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(66, 105, 216, .22),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #102b55,
      #071522 72%
    );
}

.project-card--ingserma .project-screen img {
  object-position: top center;
}

.project-card--marcoocana {
  --project-accent: #4382b5;
  --project-glow: rgba(67, 130, 181, .30);
  --project-shadow: rgba(67, 130, 181, .16);
}

.project-card--marcoocana .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(67, 130, 181, .22),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #163a58,
      #071522 72%
    );
}

.project-card--marcoocana .project-screen img {
  object-position: top center;
}

.project-card--tmmstore {
  --project-accent: #ef5b50;
  --project-glow: rgba(239, 91, 80, .30);
  --project-shadow: rgba(239, 91, 80, .15);
}

.project-card--tmmstore .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(239, 91, 80, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #302124,
      #071522 72%
    );
}

.project-card--tmmstore .project-screen img {
  object-position: top center;
}

.project-card--storaway {
  --project-accent: #1684e8;
  --project-glow: rgba(22, 132, 232, .32);
  --project-shadow: rgba(22, 132, 232, .16);
}

.project-card--storaway .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(22, 132, 232, .24),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0b263d,
      #071522 72%
    );
}

.project-card--storaway .project-screen img {
  object-position: top center;
}

.project-card--videomapp {
  --project-accent: #00d9ff;
  --project-glow: rgba(0, 217, 255, .30);
  --project-shadow: rgba(0, 217, 255, .16);
}

.project-card--videomapp .project-visual {
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(0, 217, 255, .20),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #06151c,
      #04080d 72%
    );
}

.project-card--videomapp .project-screen img {
  object-position: top center;
}

.project-card--adriantorres {
  --project-accent: #2386d8;
  --project-glow: rgba(35, 134, 216, .30);
  --project-shadow: rgba(35, 134, 216, .16);
}

.project-card--adriantorres .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(35, 134, 216, .24),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0b2944,
      #071522 72%
    );
}

.project-card--adriantorres .project-screen img {
  object-position: top center;
}

/* LOLA RAMOS */

.project-card--lolaramos {
  --project-accent: #d6aa63;
  --project-glow: rgba(214, 170, 99, .28);
  --project-shadow: rgba(214, 170, 99, .14);
}

.project-card--lolaramos .project-visual {
  background:
    radial-gradient(
      circle at 55% 42%,
      rgba(214, 170, 99, .18),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #1b1714,
      #0d1118 70%
    );
}

.project-card--lolaramos .project-screen img {
  object-position: top center;
}

/* NORESTE ART FAIR */

.project-card--noreste {
  --project-accent: #ff2a2f;
  --project-glow: rgba(255, 42, 47, .30);
  --project-shadow: rgba(255, 42, 47, .15);
}

.project-card--noreste .project-visual {
  background:
    radial-gradient(
      circle at 52% 44%,
      rgba(255, 42, 47, .22),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #241113,
      #0c1119 72%
    );
}

.project-card--noreste .project-screen img {
  object-position: top center;
}

/* OPEX PARTNERS */

.project-card--opexpartners {
  --project-accent: #3568ff;
  --project-glow: rgba(53, 104, 255, .30);
  --project-shadow: rgba(53, 104, 255, .16);
}

.project-card--opexpartners .project-visual {
  background:
    radial-gradient(
      circle at 54% 43%,
      rgba(53, 104, 255, .22),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0b1019,
      #05070c 72%
    );
}

.project-card--opexpartners .project-screen img {
  object-position: top center;
}

/* Medical */

.project-card--medical .project-visual {
  background:
    radial-gradient(
      circle at 55% 45%,
      rgba(40, 173, 255, .14),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #0d1930,
      #09202d
    );
}

.project-card--sushi .project-visual {
  background:
    radial-gradient(
      circle at 52% 43%,
      rgba(120, 212, 0, .18),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      #142117,
      #081523 70%
    );
}

/* =========================================================
   BRANDING / MOAMEDIC
   ========================================================= */

.project-card--moamedic {
  --project-accent: #35a9e0;
  --project-glow: rgba(53, 169, 224, .30);
  --project-shadow: rgba(53, 169, 224, .16);
}


.project-card--moamedic .branding-visual {
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(53, 169, 224, .18),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      #0b2234,
      #071522 72%
    );
}


/* =========================================================
   BRAND SHOWCASE
   ========================================================= */

.brand-showcase {
  position: relative;

  z-index: 2;

  width: 94%;
  height: 330px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.15);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(235,244,249,.96)
    );

  box-shadow:
    0 30px 70px rgba(0,0,0,.35),
    0 0 50px var(--project-shadow);

  transform:
    perspective(1100px)
    rotateX(1deg)
    rotateY(-1deg)
    rotateZ(-1.5deg);

  transition:
    transform .65s cubic-bezier(.2,.8,.2,1),
    box-shadow .5s ease;
}


.project-card:hover .brand-showcase {
  transform:
    perspective(1100px)
    rotateX(0)
    rotateY(0)
    rotateZ(0)
    scale(1.025);

  box-shadow:
    0 40px 90px rgba(0,0,0,.45),
    0 0 70px var(--project-shadow);
}


/* =========================================================
   HEADER
   ========================================================= */

.brand-showcase-header {
  height: 45px;

  flex: 0 0 45px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;

  border-bottom: 1px solid rgba(5,30,50,.08);

  color: #65798b;

  font-size: .58rem;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .12em;
}


.brand-showcase-header small {
  color: #98a9b6;

  font-size: .52rem;

  letter-spacing: .1em;
}


/* =========================================================
   LOGO
   ========================================================= */

.brand-main-logo {
  height: 112px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;
}


.brand-main-logo img {
  width: auto;
  height: auto;

  max-width: 210px;
  max-height: 72px;

  object-fit: contain;

  transition:
    transform .5s cubic-bezier(.2,.8,.2,1);
}


.project-card:hover .brand-main-logo img {
  transform: scale(1.04);
}


/* =========================================================
   APLICACIONES
   ========================================================= */

.brand-applications {
  flex: 1;

  display: grid;

  grid-template-columns: 1.35fr .65fr;

  gap: 7px;

  padding: 0 12px 10px;
}


.brand-application {
  position: relative;

  min-width: 0;

  overflow: hidden;

  border-radius: 10px;

  background: #dce7ed;
}


.brand-application img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 1.2s cubic-bezier(.2,.8,.2,1);
}


.project-card:hover .brand-application img {
  transform: scale(1.05);
}


/* =========================================================
   FOOTER
   ========================================================= */

.brand-showcase-footer {
  height: 42px;

  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 15px;

  border-top: 1px solid rgba(5,30,50,.07);
}


.brand-colors {
  display: flex;

  gap: 5px;
}


.brand-colors span {
  width: 13px;
  height: 13px;

  display: block;

  border: 1px solid rgba(0,0,0,.08);

  border-radius: 50%;

  background: var(--brand-color);

  box-shadow:
    0 2px 5px rgba(0,0,0,.08);
}


.brand-caption {
  color: #8294a2;

  font-size: .49rem;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .1em;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 820px) {

  .brand-showcase {
    height: 300px;
  }

}


@media (max-width: 620px) {

  .brand-showcase {
    width: 100%;
    height: 220px;

    border-radius: 14px;
  }


  .brand-showcase-header {
    height: 34px;
    flex-basis: 34px;

    padding: 0 12px;

    font-size: .48rem;
  }


  .brand-main-logo {
    height: 72px;

    padding: 12px;
  }


  .brand-main-logo img {
    max-width: 145px;
    max-height: 50px;
  }


  .brand-applications {
    gap: 5px;

    padding: 0 8px 7px;
  }


  .brand-showcase-footer {
    height: 32px;
    flex-basis: 32px;

    padding: 0 10px;
  }


  .brand-colors span {
    width: 10px;
    height: 10px;
  }


  .brand-caption {
    font-size: .4rem;
  }

}




/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 820px) {

  .project-visual {
    height: 390px;

    padding:
      60px
      30px
      35px;
  }


  .project-screen {
    height: 260px;
  }

}


@media (max-width: 620px) {

  .project-card {
    border-radius: 20px;
  }


  .project-visual {
    height: 310px;

    padding:
      55px
      18px
      25px;
  }


  .project-type {
    left: 15px;
    top: 15px;

    padding: 7px 10px;

    font-size: .59rem;
  }


  .project-browser {
    width: 100%;

    border-radius: 12px;

    transform:
      rotateZ(-1.5deg)
      scale(.96);
  }


  .project-browser-bar {
    height: 31px;
  }


  .browser-controls span {
    width: 6px;
    height: 6px;
  }


  .browser-url {
    font-size: .48rem;
  }


  .project-screen {
    height: 195px;
  }


  .project-info {
    min-height: auto;

    padding: 22px 20px;
  }


  .project-copy h3 {
    font-size: 1.25rem;
  }


  .project-copy p {
    font-size: .7rem;
  }


  .project-open {
    width: 43px;
    height: 43px;

    flex-basis: 43px;
  }


  .project-view {
    display: none;
  }

}


/* =========================================================
   REDUCIR MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .project-card,
  .project-browser,
  .project-screen img,
  .project-glow {
    transition: none;
  }

}


.project-card.hidden {
  display: none;
}

.project-card.filter-enter {
  animation:
    projectEnter .55s
    cubic-bezier(.2,.8,.2,1)
    both;
}

@keyframes projectEnter {

  from {
    opacity: 0;

    transform:
      translateY(20px)
      scale(.975);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}

@media (prefers-reduced-motion: reduce) {

  .project-card.filter-enter {
    animation: none;
  }

}

.project-chip{position:absolute;top:16px;left:16px;z-index:2;padding:7px 10px;border-radius:999px;background:rgba(6,17,29,.78);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);font-size:.65rem;font-weight:700}
.visual-one{background:radial-gradient(circle at 70% 20%,#3e61ff 0%,transparent 25%),linear-gradient(135deg,#101f38,#07111f)}
.visual-two{background:linear-gradient(135deg,#152336,#193a48)}
.visual-three{background:linear-gradient(135deg,#261947,#101729)}
.visual-four{background:linear-gradient(135deg,#102a35,#111728)}
.visual-five{background:linear-gradient(135deg,#341933,#101827)}
.visual-six{background:linear-gradient(135deg,#142c45,#111728)}
.visual-seven{background:linear-gradient(135deg,#1c2244,#14172a)}
.visual-eight{background:linear-gradient(135deg,#173133,#101826)}

.project-browser .project-screen {
  position: relative;

  width: 100%;
  height: 290px;

  overflow: hidden;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: #fff;

  box-shadow: none;
  transform: none;
}

.project-browser .project-screen img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  object-fit: cover;
  object-position: top center;

  border: 0;
  border-radius: 0;

  transform: scale(1.001);

  transition:
    transform 3.5s cubic-bezier(.2,.65,.3,1);
}

.project-card:hover .project-browser .project-screen img {
  transform: scale(1.035);
}


@media (max-width: 820px) {

  .project-browser .project-screen {
    height: 260px;
  }

}

@media (max-width: 620px) {

  .project-browser .project-screen {
    height: 195px;
  }

}

.screen-top{height:12px;width:35%;background:#1d344a;border-radius:5px}
.screen-hero{height:58px;margin-top:18px;border-radius:9px;background:linear-gradient(120deg,#214c75,#253da0)}
.screen-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.screen-cards i{height:55px;border-radius:8px;background:#102438}
.project-poster{width:70%;height:62%;border:1px solid rgba(255,255,255,.12);background:rgba(4,10,18,.5);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 25px 60px rgba(0,0,0,.24)}
.project-poster b{font-family:Manrope,sans-serif;font-size:clamp(1.4rem,3vw,2.5rem);letter-spacing:-.05em}
.project-poster em{font-style:normal;color:#85cdea;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-top:7px}
.project-info{padding:20px 21px 22px;display:flex;justify-content:space-between;gap:18px;align-items:end}
.project-info span {
  font-size: .65rem;

  color: #72cfff;

  text-transform: uppercase;

  letter-spacing: .1em;

  font-weight: 700;
}
.project-info h3{font-size:1.1rem;margin-top:7px}
.project-open {
  width: 42px;
  height: 42px;

  border-radius: 12px;

  border: 1px solid rgba(69, 224, 255, .16);

  background: rgba(69, 224, 255, .04);

  color: var(--cyan);

  cursor: pointer;

  flex: 0 0 auto;

  transition: .25s ease;
}

.project-card:hover .project-open {
  background: linear-gradient(
    135deg,
    var(--cyan),
    #6d9cff
  );

  border-color: transparent;

  color: #07111f;

  transform: rotate(8deg);
}

.process-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}
.process-copy{position:sticky;top:130px;height:max-content}
.text-link{display:inline-flex;gap:12px;margin-top:24px;font-weight:700;color:#d8f7ff}
.text-link span{color:var(--cyan)}
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:30px 0;border-bottom:1px solid var(--line)}
.step p{margin:0;color:var(--muted);line-height:1.7;font-size:.9rem}
.step > span {
  font-size: .75rem;

  color: var(--cyan);

  font-weight: 800;

  letter-spacing: .08em;
}

.step:hover > span {
  color: #8d9fff;
}

.step h3 {
  font-size: 1.25rem;
  margin-bottom: 9px;

  transition: color .25s ease;
}

.step:hover h3 {
  color: #d9f8ff;
}

.about{background:linear-gradient(180deg,#081422,#07111f)}
.about-card{border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border-radius:30px;padding:34px;display:grid;grid-template-columns:.75fr 1.25fr;gap:62px;align-items:center}
.about-photo{min-height:500px;border-radius:22px;position:relative;background:radial-gradient(circle at 50% 20%,rgba(77,120,255,.28),transparent 34%),linear-gradient(145deg,#122943,#091625);display:flex;align-items:center;justify-content:center;overflow:hidden}
.photo-placeholder{width:72%;height:72%;border:1px dashed rgba(255,255,255,.18);border-radius:50% 50% 42% 42%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7991a8}
.photo-placeholder span{font-family:Manrope,sans-serif;font-size:5rem;font-weight:800;color:rgba(255,255,255,.09)}
.photo-placeholder small{margin-top:4px}
.experience-pill{position:absolute;right:17px;bottom:17px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(8,20,34,.85);backdrop-filter:blur(10px);padding:13px 15px;display:flex;align-items:center;gap:10px}
.experience-pill strong{font-size:1.5rem;color:var(--cyan)}.experience-pill span{font-size:.64rem;line-height:1.35;color:#b4c3d1}
.about-copy{padding-right:35px}
.about-copy .large-copy{font-size:1.08rem;color:#dbe7f1;line-height:1.8;margin:28px 0 15px}
.about-copy>p:not(.large-copy){color:var(--muted);line-height:1.8}
.about-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:28px}

.testimonial-viewport{overflow:hidden}
.testimonial-track{display:flex;gap:16px;transition:transform .45s ease}
.testimonial-card{min-width:calc(50% - 8px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#0d1d30,#091625);padding:30px}
.stars {
  letter-spacing: .18em;

  color: #ffc95c;

  font-size: .78rem;

  text-shadow: 0 0 20px rgba(255, 201, 92, .18);
}
blockquote{font-family:Manrope,sans-serif;font-size:1.35rem;line-height:1.45;letter-spacing:-.02em;margin:28px 0 48px;color:#eaf1f7}
.testimonial-author{display:flex;align-items:center;gap:12px}.testimonial-author>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#142a40;color:#8fe7ff;font-weight:800;font-size:.72rem}.testimonial-author div{display:flex;flex-direction:column}.testimonial-author strong{font-size:.82rem}.testimonial-author small{font-size:.68rem;color:var(--muted);margin-top:3px}
.slider-controls{display:flex;gap:8px;justify-self:end}
.slider-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#fff;cursor:pointer}

/* =========================================================
   CONTACTO / TARJETA DIGITAL
   ========================================================= */

.contact-profile {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(69, 224, 255, .055),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 60%,
      rgba(77, 120, 255, .08),
      transparent 35%
    ),
    #07111f;
}


/* =========================================================
   GLOWS
   ========================================================= */

.contact-glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(10px);
}


.contact-glow-one {
  width: 500px;
  height: 500px;

  left: -300px;
  top: 80px;

  background: radial-gradient(
    circle,
    rgba(69, 224, 255, .1),
    transparent 68%
  );
}


.contact-glow-two {
  width: 600px;
  height: 600px;

  right: -350px;
  bottom: -200px;

  background: radial-gradient(
    circle,
    rgba(77, 120, 255, .12),
    transparent 68%
  );
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.contact-heading {
  max-width: 850px;

  margin: 0 auto 55px;

  text-align: center;
}


.contact-heading .kicker {
  margin-inline: auto;
}


.contact-heading h2 {
  margin: 18px 0;

  font-family: Manrope, Inter, sans-serif;

  font-size: clamp(2.5rem, 5vw, 4.6rem);

  line-height: 1.02;

  letter-spacing: -.05em;
}


.contact-heading p {
  max-width: 650px;

  margin: 0 auto;

  color: var(--muted);

  font-size: .98rem;

  line-height: 1.8;
}


/* =========================================================
   TARJETA
   ========================================================= */

.digital-card {
  max-width: 1050px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: .72fr 1.28fr;

  border: 1px solid rgba(255, 255, 255, .11);

  border-radius: 30px;

  padding: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .055),
      rgba(255, 255, 255, .018)
    );

  box-shadow:
    0 40px 100px rgba(0, 0, 0, .3),
    0 0 0 1px rgba(69, 224, 255, .015);

  backdrop-filter: blur(15px);
}


/* =========================================================
   FOTO
   ========================================================= */

.digital-card-photo {
  min-height: 610px;
}


.digital-photo-frame {
  width: 100%;
  height: 100%;

  min-height: 610px;

  position: relative;

  overflow: hidden;

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(77, 120, 255, .3),
      transparent 35%
    ),
    #0b1b2d;
}


.digital-photo-frame img {
  width: 100%;
  height: 100%;

  position: absolute;

  inset: 0;

  object-fit: cover;

  object-position: right;

  filter: saturate(.92);
}


.photo-gradient {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(5, 13, 24, .85),
      transparent 45%
    );
}


.photo-status {
  position: absolute;

  left: 20px;
  bottom: 20px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 10px 13px;

  border: 1px solid rgba(255, 255, 255, .13);

  border-radius: 999px;

  background: rgba(7, 17, 31, .76);

  backdrop-filter: blur(12px);

  color: #d9e8f5;

  font-size: .67rem;
  font-weight: 700;
}


.photo-status span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 0 5px rgba(84, 230, 170, .1),
    0 0 12px rgba(84, 230, 170, .6);
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.digital-card-content {
  padding: 42px 42px 34px;
}


.digital-card-top {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 30px;
}


.digital-card-label {
  display: block;

  margin-bottom: 11px;

  color: var(--cyan);

  font-size: .63rem;
  font-weight: 800;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.digital-card-content h3 {
  font-size: clamp(2.7rem, 5vw, 3.4rem);

  line-height: .95;

  letter-spacing: -.055em;
}


.digital-role {
  margin: 13px 0 0;

  color: #b5c7d8;

  font-size: .82rem;
}


.digital-logo {
  width: 125px;

  flex: 0 0 auto;
}


.digital-logo img {
  width: 100%;
}


.digital-intro {
  margin: 32px 0;

  padding-bottom: 28px;

  border-bottom: 1px solid var(--line);

  color: var(--muted);

  line-height: 1.8;

  font-size: .9rem;
}


/* =========================================================
   DATOS
   ========================================================= */

.contact-data-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;
}


.contact-data {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 13px;

  border: 1px solid rgba(255, 255, 255, .07);

  border-radius: 14px;

  background: rgba(255, 255, 255, .022);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}


a.contact-data:hover {
  transform: translateY(-2px);

  border-color: rgba(69, 224, 255, .22);

  background: rgba(69, 224, 255, .045);
}


.contact-data-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(69, 224, 255, .12);

  border-radius: 11px;

  background: rgba(69, 224, 255, .055);

  color: var(--cyan);

  font-size: .85rem;
}


.contact-data > span:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.contact-data small {
  color: #687f95;

  font-size: .58rem;

  text-transform: uppercase;

  letter-spacing: .1em;
}


.contact-data strong {
  overflow: hidden;

  color: #dce8f3;

  font-size: .72rem;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   BOTONES
   ========================================================= */

.digital-actions {
  display: grid;

  grid-template-columns: 1.35fr .65fr;

  gap: 9px;

  margin-top: 25px;
}


.digital-btn {
  min-height: 53px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 0 18px;

  border-radius: 13px;

  font-size: .78rem;
  font-weight: 750;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.digital-btn:hover {
  transform: translateY(-2px);
}


.digital-btn-whatsapp {
  background:
    linear-gradient(
      120deg,
      var(--cyan),
      #6d9cff
    );

  color: #06111d;

  box-shadow:
    0 15px 35px rgba(77, 120, 255, .17);
}


.digital-btn-whatsapp i {
  margin-left: auto;

  font-style: normal;
}


.digital-btn-email {
  border: 1px solid var(--line);

  background: rgba(255, 255, 255, .035);

  color: #dce7f1;
}


/* =========================================================
   REDES
   ========================================================= */

.digital-social {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-top: 27px;

  padding-top: 22px;

  border-top: 1px solid var(--line);
}


.digital-social > span {
  color: #657b90;

  font-size: .62rem;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .12em;
}


.digital-social div {
  display: flex;

  gap: 7px;
}


.digital-social a {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border: 1px solid var(--line);

  border-radius: 10px;

  background: rgba(255, 255, 255, .025);

  color: #9fb4c7;

  font-size: .68rem;
  font-weight: 800;

  transition: .25s ease;
}


.digital-social a:hover {
  border-color: rgba(69, 224, 255, .25);

  background: rgba(69, 224, 255, .07);

  color: var(--cyan);

  transform: translateY(-2px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .digital-card {
    grid-template-columns: 1fr;
  }


  .digital-card-photo,
  .digital-photo-frame {
    min-height: 500px;
  }


  .digital-photo-frame img {
    object-position: center 25%;
  }

}


@media (max-width: 620px) {

  .contact-heading {
    margin-bottom: 35px;
  }


  .contact-heading h2 {
    font-size: 2.65rem;
  }


  .digital-card {
    padding: 8px;

    border-radius: 24px;
  }


  .digital-card-photo,
  .digital-photo-frame {
    min-height: 410px;
  }


  .digital-photo-frame {
    border-radius: 18px;
  }


  .digital-card-content {
    padding: 28px 17px 20px;
  }


  .digital-card-top {
    display: block;
  }


  .digital-logo {
    width: 105px;

    margin-top: 22px;
  }


  .digital-card-content h3 {
    font-size: 3rem;
  }


  .digital-intro {
    margin: 25px 0;
  }


  .contact-data-grid {
    grid-template-columns: 1fr;
  }


  .digital-actions {
    grid-template-columns: 1fr;
  }


  .digital-social {
    align-items: flex-start;

    flex-direction: column;

    gap: 15px;
  }

}

.btn-light{background:#f1f7ff;color:#081320}.btn-ghost{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06)}

.site-footer{padding:30px 0 22px;border-top:1px solid var(--line)}
.footer-main{display:grid;grid-template-columns:180px 1fr auto;gap:40px;align-items:center;padding:35px 0}
.footer-main p{margin:0;color:#73879a;font-size:.82rem;max-width:430px}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;font-size:.78rem;color:#99aabd}
.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#64788b;font-size:.67rem}
.footer-bottom div{display:flex;gap:18px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:45px}
  .hero-copy{max-width:850px}
  .hero-visual{max-width:720px;margin:auto;width:100%}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .section-heading{grid-template-columns:1fr;gap:20px}
  .process-grid{grid-template-columns:1fr;gap:50px}.process-copy{position:static}
  .about-card{grid-template-columns:1fr 1.2fr;gap:35px}
  .about-photo{min-height:430px}
}
@media (max-width:820px){
  .section{padding:82px 0}

  .about-card{grid-template-columns:1fr}.about-copy{padding:10px}
  .testimonial-card{min-width:100%}
  .footer-main{grid-template-columns:1fr}
}
@media (max-width:620px){
  .container{width:min(100% - 28px,1180px)}
  .hero{padding-top:130px}
  h1{font-size:clamp(2.7rem,13vw,4rem)}
  .hero-lead{font-size:.97rem}
  .hero-actions .btn{width:100%}
  .hero-trust{gap:18px;justify-content:space-between}
  .hero-trust strong{font-size:1.05rem}.hero-trust span{font-size:.62rem}
  .hero-visual{min-height:360px}.dashboard-card{transform:none}.browser-content{height:260px}.mock-main{padding:30px 20px}
  .floating-badge{display:none}
  .client-strip{margin-top:50px}.logo-cloud{justify-content:center;gap:22px}
  .section-heading h2,.process-copy h2,.about-copy h2{font-size:2.35rem}
  .service-grid{grid-template-columns:1fr}.service-card{min-height:315px}.service-icon{margin-bottom:42px}
  .portfolio-grid{grid-template-columns:1fr}.project-visual,.project-card.featured .project-visual{height:260px}
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-right:-14px}.filter-btn{white-space:nowrap}
  .step{grid-template-columns:42px 1fr}
  .about-card{padding:18px}.about-photo{min-height:380px}
  .contact-card{padding:38px 24px;min-height:520px}.contact-card h2{font-size:2.7rem}.contact-actions .btn{width:100%}
  .footer-bottom{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.testimonial-track{transition:none}
}


/* =========================================================
   TEXTOS DESTACADOS
   ========================================================= */

.text-gradient {
  background: linear-gradient(
    90deg,
    var(--cyan) 0%,
    #6d9cff 55%,
    #8d67ff 100%
  );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-cyan {
  color: var(--cyan);
}

.text-blue {
  color: #6d9cff;
}

.hero-trust strong {
  font-size: 1.3rem;

  background: linear-gradient(
    90deg,
    var(--cyan),
    #6d9cff
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 14px;

  transition: color .3s ease;
}

.service-card:hover h3 {
  color: var(--cyan);
}

.service-card:hover .service-index {
  color: #6d9cff;
}

.service-card:hover .service-icon {
  border-color: rgba(69, 224, 255, .35);

  background: rgba(69, 224, 255, .08);

  box-shadow: 0 0 30px rgba(69, 224, 255, .08);
}

.about-tags span {
  font-size: .65rem;

  color: #aeeeff;

  border: 1px solid rgba(69, 224, 255, .15);

  border-radius: 999px;

  padding: 7px 10px;

  background: rgba(69, 224, 255, .045);
}

.contact-highlight {
  color: #8ff1ff;

  text-shadow:
    0 0 30px rgba(69, 224, 255, .16);
}
.kicker {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  padding: 7px 11px;

  border: 1px solid rgba(69, 224, 255, .14);

  border-radius: 999px;

  background: rgba(69, 224, 255, .035);

  color: #87dfff;

  font-size: .67rem;
  font-weight: 800;

  letter-spacing: .16em;

  text-transform: uppercase;
}

.kicker::before {
  content: "";

  width: 5px;
  height: 5px;

  margin-right: 8px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow: 0 0 10px rgba(69, 224, 255, .7);
}

@media (max-width: 820px) {

  /* =========================================
     HEADER MOBILE
     ========================================= */

  .site-header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 76px;

    z-index: 9999;

    background: rgba(5, 16, 30, .94);
    border-bottom: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }


  .site-header .container {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;

    z-index: 10002;
  }


  /* =========================================
     LOGO
     ========================================= */

  .brand {
    position: relative;

    z-index: 10003;
  }


  .brand img {
    width: 150px;
    height: auto;

    display: block;
  }


  /* =========================================
     HAMBURGER
     ========================================= */

  .menu-toggle {
    width: 52px;
    height: 52px;

    position: relative;

    z-index: 10003;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 15px;

    background: rgba(255,255,255,.04);

    cursor: pointer;

    transition:
      background .3s ease,
      border-color .3s ease,
      transform .3s ease;
  }


  .menu-toggle span {
    display: block;

    width: 22px;
    height: 2px;

    margin: 0;

    border-radius: 999px;

    background: #fff;

    transform-origin: center;

    transition:
      transform .35s ease,
      opacity .25s ease;
  }


  .menu-toggle.active {
    border-color: rgba(69,224,255,.45);

    background: rgba(69,224,255,.07);

    box-shadow:
      0 0 30px rgba(69,224,255,.08);
  }


  .menu-toggle.active span:nth-child(1) {
    transform:
      translateY(8px)
      rotate(45deg);
  }


  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }


  .menu-toggle.active span:nth-child(3) {
    transform:
      translateY(-8px)
      rotate(-45deg);
  }


  /* =========================================
     MENU FULLSCREEN
     ========================================= */

  .main-nav {
    position: fixed;

    top: 76px;
    left: 0;

    width: 100%;
    height: calc(100dvh - 76px);

    z-index: 10000;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    gap: 0;

    padding:
      28px
      28px
      calc(40px + env(safe-area-inset-bottom));

    overflow-y: auto;
    overscroll-behavior: contain;

    background:
      radial-gradient(
        circle at 85% 5%,
        rgba(81,105,255,.13),
        transparent 30%
      ),
      radial-gradient(
        circle at 10% 90%,
        rgba(69,224,255,.07),
        transparent 35%
      ),
      #061321;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-15px);

    pointer-events: none;

    transition:
      opacity .3s ease,
      visibility .3s ease,
      transform .4s cubic-bezier(.2,.8,.2,1);
  }


  .main-nav.open {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
  }


  /* =========================================
     LINKS
     ========================================= */

  .main-nav > a:not(.nav-cta) {
    width: 100%;

    display: flex;
    align-items: center;

    min-height: 72px;

    padding: 0;

    border-bottom: 1px solid rgba(255,255,255,.09);

    color: #dce7f2;

    font-size: clamp(1.6rem, 7vw, 2.15rem);
    font-weight: 650;

    letter-spacing: -.035em;

    transition:
      color .25s ease,
      padding-left .25s ease;
  }


  .main-nav > a:not(.nav-cta):first-child {
    border-top: 1px solid rgba(255,255,255,.09);
  }


  .main-nav > a:not(.nav-cta):hover {
    padding-left: 8px;

    color: #45e0ff;
  }


  /* =========================================
     CTA
     ========================================= */

  .main-nav .nav-cta {
    width: 100%;

    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 28px;

    padding: 18px 25px;

    border: 0;
    border-radius: 17px;

    background:
      linear-gradient(
        135deg,
        #45e0ff,
        #557cff
      );

    color: #061321;

    font-size: 1rem;
    font-weight: 800;

    box-shadow:
      0 18px 40px rgba(69,224,255,.13);
  }


  /* =========================================
     BLOQUEAR PÁGINA
     ========================================= */

  body.menu-open {
    overflow: hidden;
  }


  /* Como el header es fixed */
  
  body {
    padding-top: 76px;
  }

}

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */

.nuvex-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #25d366;
  color: #fff;
  border-radius: 50%;

  font-size: 31px;
  text-decoration: none;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    0 0 0 0 rgba(37, 211, 102, 0.35);

  z-index: 9999;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.nuvex-whatsapp:hover {
  background: #20bd5a;
  color: #fff;
  transform: translateY(-4px) scale(1.04);

  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.3),
    0 0 0 7px rgba(37, 211, 102, 0.12);
}


/* Tooltip */

.nuvex-whatsapp__tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;

  transform: translateY(-50%) translateX(8px);

  padding: 9px 14px;

  background: #0b1525;
  color: #fff;

  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}


/* Flechita del tooltip */

.nuvex-whatsapp__tooltip::after {
  content: "";
  position: absolute;

  left: 100%;
  top: 50%;

  transform: translateY(-50%);

  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #0b1525;
}


/* Mostrar tooltip */

.nuvex-whatsapp:hover .nuvex-whatsapp__tooltip {
  opacity: 1;
  visibility: visible;

  transform: translateY(-50%) translateX(0);
}


/* Mobile */

@media (max-width: 768px) {

  .nuvex-whatsapp {
    right: 18px;
    bottom: 18px;

    width: 56px;
    height: 56px;

    font-size: 29px;
  }

  /* En touch no necesitamos tooltip */
  .nuvex-whatsapp__tooltip {
    display: none;
  }

}


/* NUVEX | FAQ */

.nuvex-faq {
  position: relative;
  padding: 100px 0;
  background: #07111f;
}

.nuvex-faq__list {
  max-width: 950px;
  margin: 40px auto 0;
  display: grid;
  gap: 14px;
}

.nuvex-faq__item {
  border: 1px solid rgba(148,163,184,.17);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  overflow: hidden;
  transition: border-color .25s, background .25s;
}

.nuvex-faq__item[open] {
  border-color: rgba(25,165,255,.45);
  background: rgba(25,165,255,.055);
}

.nuvex-faq__item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 24px 65px 24px 26px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.nuvex-faq__item summary::-webkit-details-marker {
  display: none;
}

.nuvex-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: #18a9f9;
  font-size: 26px;
  font-weight: 400;
}

.nuvex-faq__item[open] summary::after {
  content: "−";
}

.nuvex-faq__item summary:focus-visible {
  outline: 2px solid #18a9f9;
  outline-offset: -3px;
}

.nuvex-faq__item p {
  padding: 0 26px 26px;
  margin: 0;
  line-height: 1.8;
  color: #aebdd0;
}

.nuvex-faq__cta {
  text-align: center;
  margin-top: 38px;
}

.nuvex-faq__cta p {
  color: #b7c7d8;
  margin-bottom: 18px;
}

@media (max-width: 767px) {
  .nuvex-faq {
    padding: 65px 0;
  }

  .nuvex-faq__item summary {
    font-size: 15px;
    padding: 20px 55px 20px 20px;
  }

  .nuvex-faq__item p {
    padding: 0 20px 22px;
    font-size: 14px;
  }
}