*{ box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
      background: radial-gradient(900px 600px at 20% 10%, rgba(84,92,255,.18), transparent 60%),
                  radial-gradient(900px 600px at 80% 20%, rgba(0,255,209,.08), transparent 60%),
                  var(--bg);
      color: var(--text);
      overflow-x: hidden;
    }

    a{ color: inherit; text-decoration: none; }
    .wrap{ width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

    /* NAV */
    .nav{
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.15));
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .nav-inner{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 0;
      gap: 14px;
    }
    .brand{
      display:flex; align-items:center; gap: 10px;
      font-weight: 800;
      letter-spacing: .5px;
    }
    .logo{
      width: 36px; height: 36px; border-radius: 12px;
      background: linear-gradient(145deg, var(--primary), rgba(84,92,255,.75));
      box-shadow: 0 12px 30px rgba(7,10,40,.55);
      border: 1px solid rgba(255,255,255,.12);
    }
    .nav-links{
      display:flex; align-items:center; gap: 18px;
      font-size: 14px; color: var(--muted);
    }
    .nav-links a{ padding: 10px 18px; border-radius: 40px; font-size:16px; }
    .nav-links a:hover{ background: rgba(255,255,255,.06); color: var(--text); }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap: 10px;
      padding: 12px 24px;
      border-radius: 40px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: var(--text);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
    .btn-primary{
      background: linear-gradient(145deg, var(--primary), rgba(84,92,255,.80));
      border-color: rgba(255,255,255,.14);
    }
    .btn-primary:hover{ background: linear-gradient(145deg, rgba(84,92,255,.92), var(--primary)); }

    /* SECCIONES HERO (90-100vh) */
    section.hero{
      min-height: 100vh;
      display:flex;
      align-items: center;
      position: relative;
      overflow:hidden;
      padding: 110px 0 70px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      isolation: isolate;
    }
    
    /*imagenes de fondo*/
    .hero::before{
    content:"";
    position:absolute;

    top:0;
    left:0;
    right:0;
    bottom:0;

    background-image:var(--hero-image);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    transform:scale(1.02);

    z-index:-2;

    filter:saturate(1.05) contrast(1.02);

    pointer-events:none;
    }

    /* Overlay */
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,.55)),
        radial-gradient(900px 600px at 20% 20%, rgba(7,10,40,.70), transparent 70%),
        radial-gradient(900px 600px at 80% 30%, rgba(84,92,255,.18), transparent 70%);
      z-index: -1;
    }

    .grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 26px;
      align-items: center;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
      .nav-links{ display:none; }
    }

    .kicker{
      display:inline-flex; gap:10px; align-items:center;
      font-size: 12px;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: rgba(233,236,246,.75);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      padding: 10px 12px;
      border-radius: 999px;
      width: fit-content;
    }
    h1{
      margin: 16px 0 10px;
      font-size: clamp(34px, 4.3vw, 56px);
      line-height: 1.02;
      letter-spacing: -0.02em;
    }
    .lead{
      margin: 12px 0 22px;
      font-size: 18px;
      line-height: 1.65;
      color: var(--muted);
      max-width: 62ch;
    }
    .cta-row{
      display:flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items:center;
    }
    .meta{
      margin-top: 18px;
      display:flex;
      gap: 16px;
      flex-wrap: wrap;
      color: rgba(233,236,246,.70);
      font-size: 13px;
    }
    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding: 10px 12px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .card h3{
      margin: 0 0 6px;
      font-size: 16px;
      letter-spacing: .2px;
    }
    .card p, .card li{
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
      font-size: 14px;
    }
    .stack{ display:grid; gap: 12px; }

    .cols-3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    @media (max-width: 980px){
      .cols-3{ grid-template-columns: 1fr; }
    }

    .list{
      padding-left: 18px;
      margin: 10px 0 0;
    }

    /*whatsapp nav menu*/
    .btn-whatsapp{
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px 22px;
      background:#25D366;
      color:white;
      font-weight:600;
      font-size: 15px;
      border-radius:50px;
      transition:.3s;
      box-shadow:0 10px 30px rgba(37,211,102,.35);
    }

    .btn-whatsapp:hover{
      background:#1EBE5D;
      transform:translateY(-2px);
    }

    /* Anchors offset for fixed nav */
    .anchor{ position: relative; top: -88px; }

    /* Footer */
    footer{
      padding: 48px 0 30px;
      background: rgba(0,0,0,.35);
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .foot{
      display:flex; align-items:flex-start; justify-content:space-between;
      gap: 16px; flex-wrap: wrap;
      color: rgba(233,236,246,.75);
      font-size: 15px;
    }
    .small{ color: rgba(233,236,246,.62); }

    /* WhatsApp floating button */
    .wa-float{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 60;
    }
    .wa-btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding: 14px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(145deg, rgba(0, 200, 120, .92), rgba(0, 160, 100, .92));
      box-shadow: 0 18px 45px rgba(0,0,0,.45);
      font-weight: 800;
    }
    .wa-btn:hover{ transform: translateY(-1px); }
    .wa-dot{
      width: 10px; height: 10px; border-radius: 999px;
      background: rgba(255,255,255,.92);
      box-shadow: 0 0 0 6px rgba(255,255,255,.14);
    }
    /*nueva sección*/
    .company-info{
      display:flex;
      flex-direction:column;
      gap:35px;
    }

    .info-block{
      padding-bottom:0px;
      border-bottom:0px solid rgba(255,255,255,.12);
    }

    .info-block:last-child{
      border-bottom:none;
      padding-bottom:0;
    }

    .info-block p{
      color:rgba(255,255,255,.82);
      line-height:1.65;
      font-size:18px;
    }

    .values-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
    }

    .values-list li{
      position:relative;
      padding-left:22px;
    }

    .values-list li::before{
      content:"✓";
      position:absolute;
      left:0;
      color:#25D366;
      font-weight:bold;
    }
    /*submenu proyectos*/
    /* Dropdown */
    .dropdown{
      position:relative;
    }

    .dropbtn{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .dropbtn span{
      font-size:10px;
      transition:.3s;
    }

    .dropdown-content{
      position:absolute;
      top:100%;
      left:0;
      min-width:350px;
      margin-top:15px;
      padding:10px;
      background:rgba(7,10,40,.98);
      backdrop-filter:blur(18px);
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      box-shadow:0 20px 50px rgba(0,0,0,.35);
      opacity:0;
      visibility:hidden;
      transform:translateY(10px);
      transition:.25s ease;
    }

    .dropdown-content a{
      display:block;
      padding:12px 15px;
      border-radius:12px;
      transition:.25s;
      color:#fff;
    }

    .dropdown-content a:hover{
      background:rgba(255,255,255,.08);
      padding-left:22px;
    }

    .dropdown:hover .dropdown-content{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }

    .dropdown:hover .dropbtn span{
      transform:rotate(180deg);
    }
    
    /*======================================
PAGINAS DE PROYECTOS
=======================================*/

.hero-project{
    min-height:100vh;
    display:flex;
    align-items:center;
}

.hero-project-content{
    max-width:760px;
}

/*========================*/

.gallery-section{
    padding:30px 0;
    background:#ffffff;
    position:relative;
    z-index:2;
}

.gallery-section h2{
    color:#070A28;
}

.gallery-section p{
    color:#1a1a1a;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-size:42px;
    margin-bottom:15px;
}

.section-title p{
    max-width:760px;
    margin:auto;
    font-size:18px;
    color:#1a1a1a;
    line-height:1.65;
}

/*========================*/

.gallery{
    column-count:3;
    column-gap:22px;
}

.gallery-item{
    break-inside:avoid;
    margin-bottom:22px;
    overflow:hidden;
    border-radius:20px;
}

.gallery img{
    width:100%;
    display:block;
    cursor:pointer;
    transition:.35s;
    border-radius:20px;
}

.gallery img:hover{
    transform:scale(1.05);
}

/*========================*/

.cta-project{
    padding:30px 0;
    text-align:center;

    background:#131532;

    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:none;
}

.cta-project h2{
    font-size:44px;
    margin-bottom:10px;
}

.cta-project p{
    max-width:760px;
    margin:auto auto 35px;
    font-size:18px;
    line-height:1.65;
    color:var(--muted);

}

/*========================*/

#lightbox{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.94);
    z-index:9999;
}

#lightbox img{
    max-width:92%;
    max-height:92%;
    border-radius:15px;
}

#close-lightbox{
    position:absolute;
    top:35px;
    right:45px;
    font-size:42px;
    cursor:pointer;
    color:#fff;
}

/*========================*/

@media(max-width:900px){

.gallery{

column-count:2;

}

}

@media(max-width:600px){

.gallery{
    column-count:1;
}

.hero-project{
    text-align:center;
}

.section-title h2{
    font-size:34px;
}

.cta-project h2{
    font-size:34px;
}

}