:root{
    --fucsia:#FF006E;
    --fucsia-soft:rgba(255,0,110,.18);
    --celeste:#3A86FF;
    --celeste-soft:rgba(58,134,255,.14);
    --fondo:#010103;
    --glass:rgba(255,255,255,.035);
    --glass-strong:rgba(255,255,255,.06);
    --border:rgba(255,255,255,.12);
    --shadow:0 10px 25px rgba(0,0,0,.2);
    --radius-pill:100px;
    --radius-xl:40px;
    --radius-lg:35px;
    --radius-md:28px;
    --radius-sm:25px;
    --blur:5px;
    --transition:.35s ease;
  }

  *,
  *::before,
  *::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
  }

  html{
    scroll-behavior:smooth;
    scroll-padding-top:110px;
  }

  body{
    font-family:'Plus Jakarta Sans',sans-serif;
    background:var(--fondo);
    color:#fff;
    overflow-x:hidden;
  }

  img{
    max-width:100%;
    display:block;
  }

  a,
  button{
    -webkit-tap-highlight-color:transparent;
  }

  .bg-gradient{
    position:fixed;
    inset:0;
    z-index:-1;
    background:
      radial-gradient(circle at 50% -10%, rgba(255,0,110,.18), transparent 55%),
      radial-gradient(circle at 80% 120%, rgba(58,134,255,.10), transparent 50%),
      linear-gradient(to bottom, rgba(255,255,255,.03), transparent 30%);
  }

  .noise{ display:none; }

  .glass-panel,
  nav,
  .bento-card,
  .faq-item,
  .project-card,
  .f-btn,
  .metric-feature,
  .featured-showcase{
    background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    backdrop-filter:blur(var(--blur)) saturate(100%);
    -webkit-backdrop-filter:blur(var(--blur)) saturate(100%);
  }

  /* NAV */
  .nav-container{
    position:fixed;
    top:20px;
    left:0;
    width:100%;
    z-index:10002;
    display:flex;
    justify-content:center;
  }

  nav{
    width:min(90%,1100px);
    height:65px;
    border-radius:var(--radius-pill);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 35px;
  }

  .logo{
    font-weight:800;
    font-size:1.2rem;
    text-decoration:none;
    color:#fff;
    z-index:10001;
  }

  .logo span{ color:var(--fucsia); }

  .menu-links{
    display:flex;
    gap:25px;
    list-style:none;
  }

  .menu-links a{
    text-decoration:none;
    color:rgba(255,255,255,.6);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:2px;
    transition:color var(--transition);
  }

  .menu-links a:hover{ color:#fff; }

  .hamburger{
    display:none;
    position:relative;
    width:48px;
    height:48px;
    border:none;
    background:none;
    border-radius:50%;
    cursor:pointer;
    z-index:10003;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
  }

  .hamburger::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0;
    transition:opacity var(--transition);
  }

  .hamburger.active::before{ opacity:1; }

  .hamburger span{
    position:relative;
    z-index:1;
    width:25px;
    height:2px;
    border-radius:2px;
    background:#fff;
    transition:transform .4s ease, opacity .4s ease;
  }

  .hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .hamburger.active span:nth-child(2){ opacity:0; }
  .hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  .mobile-overlay{
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    background:rgba(1,1,3,.72);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    transition:opacity .45s ease, visibility .45s ease;
  }

  .mobile-overlay.active{
    opacity:1;
    visibility:visible;
  }

  .mobile-overlay ul{
    list-style:none;
    text-align:center;
  }

  .mobile-overlay li{
    margin:25px 0;
    transform:translateY(30px);
    opacity:0;
    transition:transform .45s ease, opacity .45s ease;
  }

  .mobile-overlay.active li{
    transform:translateY(0);
    opacity:1;
  }

  .mobile-overlay a{
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:32px;
    font-weight:800;
    letter-spacing:-1px;
  }

  .mobile-overlay a span{ color:var(--fucsia); }

  /* SECCIONES */
  .section-padding{
    max-width:1200px;
    margin:0 auto;
    padding:70px 20px;
  }

  .hero{
    min-height:90vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
  }

  .title-xl{
    padding-top:80px;
    margin-bottom:0;
    font-size:clamp(50px,12vw,110px);
    font-weight:800;
    line-height:.85;
    letter-spacing:-5px;
  }

  /* MÉTRICAS */
  .metrics-grid{
    width:100%;
    margin-top:60px;
    padding-top:24px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }

  .m-item{
    position:relative;
    overflow:hidden;
    padding:28px;
    border-radius:var(--radius-md);
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 35px rgba(0,0,0,.2);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .m-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 45%);
    pointer-events:none;
  }

  .m-item h4{
    position:relative;
    z-index:1;
    font-size:clamp(32px,5vw,60px);
    font-weight:800;
  }

  .m-item p{
    position:relative;
    z-index:1;
    font-size:10px;
    opacity:.55;
    letter-spacing:3px;
    text-transform:uppercase;
  }

  /* FEATURED */
  .featured-showcase{
    position:relative;
    overflow:hidden;
    margin-top:35px;
    padding:30px;
    border-radius:38px;
  }

  .featured-showcase::before,
  .featured-showcase::after{
    content:"";
    position:absolute;
    border-radius:999px;
    filter:blur(9px);
    pointer-events:none;
  }

  .featured-showcase::before{
    width:240px;
    height:240px;
    top:-90px;
    right:-60px;
    background:rgba(255,0,110,.16);
  }

  .featured-showcase::after{
    width:220px;
    height:220px;
    bottom:-120px;
    left:-60px;
    background:rgba(58,134,255,.14);
  }

  .showcase-top{
    position:relative;
    z-index:1;
    margin-bottom:30px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
  }

  .showcase-kicker{
    display:inline-block;
    margin-bottom:12px;
    font-size:11px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:rgba(255,255,255,.6);
  }

  .showcase-title{
    max-width:700px;
    font-size:clamp(30px,5vw,58px);
    line-height:.95;
    font-weight:800;
  }

  .showcase-title span{ color:var(--fucsia); }

  .showcase-copy{
    max-width:380px;
    text-align:left;
    color:rgba(255,255,255,.65);
    line-height:1.7;
    font-size:14px;
  }

  .showcase-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:20px;
  }

  .metric-feature{
    position:relative;
    overflow:hidden;
    min-height:360px;
    padding:28px;
    border-radius:32px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }

  .metric-feature::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 50%);
    pointer-events:none;
  }

  .feature-label{
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
  }

  .feature-value{
    margin:18px 0 10px;
    font-size:clamp(60px,10vw,120px);
    font-weight:800;
    line-height:.9;
    letter-spacing:-4px;
  }

  .feature-value span{ color:var(--celeste); }

  .feature-description{
    max-width:440px;
    color:rgba(255,255,255,.72);
    line-height:1.7;
    font-size:15px;
  }

  .growth-track{
    margin-top:24px;
    height:140px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    align-items:end;
  }

  .growth-bar{
    position:relative;
    border-radius:18px 18px 8px 8px;
    background:linear-gradient(180deg, rgba(58,134,255,.95), rgba(255,0,110,.55));
    transform-origin:bottom;
    transform:scaleY(.4);
    opacity:0;
    animation:riseBar 1.4s ease forwards;
  }

  .growth-bar:nth-child(2){ animation-delay:.08s; }
  .growth-bar:nth-child(3){ animation-delay:.16s; }
  .growth-bar:nth-child(4){ animation-delay:.24s; }

  @keyframes riseBar{
    to{
      transform:scaleY(1);
      opacity:1;
    }
  }

  .mini-cards{
    display:grid;
    gap:20px;
  }

  .mini-card{
    position:relative;
    overflow:hidden;
    min-height:170px;
    padding:24px;
    border-radius:var(--radius-md);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.12);
  }

  .mini-card::before{
    content:"";
    position:absolute;
    top:-55px;
    right:-40px;
    width:140px;
    height:140px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
  }

  .mini-card h4{
    position:relative;
    z-index:1;
    font-size:28px;
    letter-spacing:-1px;
  }

  .mini-card p{
    position:relative;
    z-index:1;
    font-size:13px;
    line-height:1.6;
    color:rgba(255,255,255,.63);
  }

  .mini-card strong{ color:var(--fucsia); }

  /* SERVICES */
  .services-bento{
    margin-top:10px;
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:20px;
  }

  .bento-card{
    padding:50px;
    border-radius:var(--radius-lg);
    transition:transform var(--transition), border-color var(--transition);
  }

  .bento-card h3{
    margin-bottom:15px;
    font-size:clamp(22px,4vw,32px);
    font-weight:800;
  }

  .bento-card p{
    color:rgba(255,255,255,.65);
    line-height:1.7;
  }

  /* PORTFOLIO */
  .filter-nav{
    margin-bottom:40px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
  }

  .f-btn{
    border:none;
    color:#fff;
    padding:12px 25px;
    border-radius:50px;
    cursor:pointer;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    transition:background-color var(--transition), color var(--transition), transform var(--transition);
  }

  .f-btn.active{
    background:#fff;
    color:#000;
  }

  .portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
  }

  .project-card{
    position:relative;
    overflow:hidden;
    height:480px;
    border-radius:var(--radius-xl);
    transition:transform .45s ease, opacity .3s ease;
  }

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

  .project-img{
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    filter:grayscale(1) brightness(.4);
    transition:transform .8s ease, filter .8s ease;
  }

  .project-card:hover .project-img{
    transform:scale(1.05);
    filter:grayscale(0) brightness(.7);
  }

  .project-info{
    position:absolute;
    left:30px;
    bottom:30px;
    z-index:2;
    padding:15px 25px;
    border-radius:25px;
    background-color:rgba(255,255,255,.09);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }

  .project-info p{
    font-size:14px;
    font-weight:500;
  }

  /* FAQ */
  .faq-container{
    max-width:800px;
    margin:0 auto;
  }

  .faq-item{
    margin-bottom:15px;
    border-radius:25px;
    cursor:pointer;
    transition:border-color var(--transition), transform var(--transition);
  }

  .faq-question{
    padding:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:800;
    font-size:18px;
  }

  .faq-answer{
    max-height:0;
    overflow:hidden;
    opacity:0;
    padding:0 30px;
    color:rgba(255,255,255,.55);
    font-size:15px;
    line-height:1.7;
    transition:max-height .45s ease, opacity .35s ease, padding-bottom .35s ease;
  }

  .faq-item.active .faq-answer{
    max-height:200px;
    opacity:1;
    padding-bottom:30px;
  }

  /* FOOTER */
  footer{
    margin-top:50px;
    padding:80px 20px 40px;
    background:rgba(5,5,10,.5);
    border-top:1px solid var(--border);
  }

  .footer-content{
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
  }

  .footer-logo{
    display:block;
    margin-bottom:20px;
    font-size:2rem;
    font-weight:800;
    color:#fff;
    text-decoration:none;
  }

  .footer-logo span{ color:var(--fucsia); }

  .footer-desc{
    max-width:300px;
    opacity:.5;
    font-size:14px;
    line-height:1.6;
  }

  .footer-label{
    display:block;
    margin-bottom:20px;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--celeste);
  }

  .footer-links{
    list-style:none;
  }

  .footer-links a{
    display:inline-block;
    margin-bottom:10px;
    color:#fff;
    text-decoration:none;
    opacity:.6;
    font-size:14px;
    transition:opacity var(--transition), color var(--transition), transform var(--transition);
  }

  .footer-links a:hover{
    opacity:1;
    color:var(--fucsia);
    transform:translateX(5px);
  }

  .footer-bottom{
    max-width:1100px;
    margin:60px auto 0;
    padding-top:30px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    gap:20px;
    opacity:.3;
    font-size:11px;
  }

  /* RESPONSIVE */
  @media (max-width:900px){
    .menu-links{ display:none; }
    .hamburger{ display:flex; }

    .portfolio-grid,
    .services-bento,
    .showcase-grid,
    .footer-content{
      grid-template-columns:1fr;
    }

    .metrics-grid{
      grid-template-columns:1fr 1fr;
    }

    .showcase-top{
      flex-direction:column;
    }

    .footer-content{ gap:40px; }

    .footer-bottom{
      flex-direction:column;
      text-align:center;
      gap:15px;
    }

    .section-padding{
      padding:80px 20px;
    }

    .bento-card{
      padding:40px 30px;
    }

    .growth-track{
      height:110px;
    }
  }

  @media (max-width:640px){
    nav{ padding:0 22px; }

    .metrics-grid{
      grid-template-columns:1fr;
    }

    .m-item{ padding:24px; }

    .featured-showcase{
      padding:22px;
      border-radius:28px;
    }

    .metric-feature,
    .mini-card{
      min-height:auto;
    }

    .showcase-copy,
    .showcase-title{
      max-width:100%;
    }

    .showcase-title,
    .feature-value{
      letter-spacing:-2px;
    }

    .section-padding{
      margin:60px auto;
      padding:0 20px;
    }
  }

  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }

    *,
    *::before,
    *::after{
      animation:none !important;
      transition:none !important;
    }
  }
  .carta{
      color: #fff;
  }
  /* BOTÓN REDONDO WHATSAPP */
.float-wa {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  text-decoration: none;
  color: #fff;

  background: linear-gradient(135deg, var(--fucsia), var(--celeste));
  box-shadow: 0 10px 30px rgba(255, 0, 110, 0.4);

  transition: var(--transition);
}

/* ICONO */
.wa-icon {
  width: 30px;
  height: 30px;
  z-index: 2;
}

/* 💓 ANIMACIÓN LATIDO */
.float-wa::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 0, 110, 0.4);
  animation: pulse-ring 2s infinite;
  z-index: 1;
}

/* 🔄 ICONO ANIMADO */
.wa-icon {
  animation: bounce 2s infinite;
}

/* HOVER */
.float-wa:hover {
  transform: scale(1.1) rotate(8deg);
  box-shadow: 0 15px 40px rgba(255, 0, 110, 0.6);
}

/* KEYFRAMES */
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* MOBILE */
@media (max-width: 640px) {
  .float-wa {
    width: 58px;
    height: 58px;
    bottom: 20px;
    right: 20px;
  }

  .wa-icon {
    width: 26px;
    height: 26px;
  }
}