*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;

    background:
        radial-gradient(
            ellipse at 0% 0%,
            rgba(37,99,235,.22) 0%,
            rgba(37,99,235,.10) 25%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(124,58,237,.20) 0%,
            rgba(124,58,237,.08) 25%,
            transparent 55%
        ),
        #050816;

    color:white;
    overflow-x:hidden;
}



.navbar{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:30px 10%;
    position:fixed;
    top:0;
    left: 0;
z-index: 1000;
background: rgba(5, 8, 22, 0.95);
backdrop-filter: blur(15px);
}

.brand{
    font-size:28px;
    font-weight:bold;
}

nav{
    display:flex;
    gap:35px;
    margin-left:auto;
}

nav a{
    color:white;
    text-decoration:none;
    transition:.3s;
}

nav a:hover{
    color:#60a5fa;
}

.language-switcher{
    display:flex;
    gap:4px;
    margin-left:22px;
    padding:4px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    background:rgba(255,255,255,.05);
}

.language-switcher button{
    border:0;
    border-radius:8px;
    padding:7px 9px;
    background:transparent;
    color:#bfc8e6;
    font:700 12px/1 Arial,Helvetica,sans-serif;
    cursor:pointer;
}

.language-switcher button[aria-pressed="true"]{
    background:#2563eb;
    color:#fff;
}

.language-switcher button:focus-visible{
    outline:3px solid #83bcff;
    outline-offset:2px;
}

main{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:180px 10% 120px;
}

.hero{
    max-width:900px;
    text-align:center;
}

.eyebrow{
    color:#60a5fa;
    letter-spacing:3px;
    font-size:14px;
}

.hero h1{
    margin-top:20px;
    font-size:68px;
    line-height:1.1;
}

.hero h1 span{
  background:linear-gradient(90deg,#60a5fa,#a855f7);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero p{
    margin:35px auto;
    max-width:700px;
    color:#bfc8e6;
    font-size:22px;
    line-height:1.8;
}

.hero-actions{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.button{
    position:relative;
    padding:18px 34px;
    border-radius:16px;
    text-decoration:none;
    font-weight:700;
    color:white;
    overflow:hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;

    background:
        linear-gradient(135deg,#159cff 0%,#5364ff 48%,#8b3dff 100%);

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

    box-shadow:
        0 10px 25px rgba(37,99,235,.25),
        0 0 18px rgba(124,58,237,.18),
        inset 0 1px 1px rgba(255,255,255,.35),
        inset 0 -2px 8px rgba(0,0,0,.18);
}

.button::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:14px;
    background:linear-gradient(
        120deg,
        rgba(255,255,255,.18),
        transparent 35%,
        transparent 65%,
        rgba(255,255,255,.08)
    );
    pointer-events:none;
}

.primary,
.secondary{
    color:white;
    background:
        linear-gradient(135deg,#159cff 0%,#5364ff 48%,#8b3dff 100%);
}

.button:hover{
    transform:translateY(-4px) scale(1.02);
    filter:brightness(1.12);

    box-shadow:
        0 14px 32px rgba(37,99,235,.35),
        0 0 25px rgba(124,58,237,.30),
        inset 0 1px 1px rgba(255,255,255,.40);
}
/* ===== WHY US ===== */

.why-us{
    padding:120px 10%;
}

.section-heading{
    text-align:center;
    max-width:850px;
    margin:0 auto 70px;
}

.section-heading span{
    color:#60A5FA;
    letter-spacing:3px;
    font-size:14px;
    font-weight:bold;
}

.section-heading h2{
    font-size:52px;
    margin:20px 0;
    line-height:1.2;
}

.section-heading p{
    color:#BFC8E6;
    font-size:20px;
    line-height:1.8;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.why-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:35px;
    transition:.35s;
    backdrop-filter:blur(12px);
}

.why-card:hover{
    transform:translateY(-10px);
    border-color:#60A5FA;
    box-shadow:0 0 40px rgba(96,165,250,.20);
}

.why-card h3{
    font-size:26px;
    margin-bottom:18px;
}

.why-card p{
    color:#BFC8E6;
    line-height:1.8;
}.services{
    padding:120px 10%;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:60px;
}

.service-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:35px;
    transition:.35s;
}

.service-card:hover{
    transform:translateY(-10px);
    border-color:#6aa5fa;
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

.service-card h3{
    margin-bottom:20px;
    font-size:24px;
}

.service-card p{
    color:#bfc8e6;
    line-height:1.7;
}
.process{
    padding:120px 10%;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    margin-top:50px;
}

.step{
    position:relative;
    text-align:center;
    padding:32px 24px;
    min-height:245px;
    background:linear-gradient(
        145deg,
        rgba(15,31,65,.80),
        rgba(12,18,45,.72)
    );
    border:1px solid rgba(79,163,255,.22);
    border-radius:20px;
    box-shadow:
        0 16px 35px rgba(0,0,0,.22),
        0 0 22px rgba(79,163,255,.07),
        inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(12px);
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.step:hover{
    transform:translateY(-6px);
    border-color:rgba(79,163,255,.48);
    box-shadow:
        0 20px 42px rgba(0,0,0,.30),
        0 0 28px rgba(79,163,255,.15),
        0 0 18px rgba(141,107,255,.10);
}

.number{
    width:64px;
    height:64px;
    margin:0 auto 22px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        rgba(21,156,255,.25),
        rgba(139,61,255,.28)
    );
    border:1px solid rgba(79,163,255,.40);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:27px;
    box-shadow:
        0 0 20px rgba(79,163,255,.18),
        inset 0 1px 0 rgba(255,255,255,.14);
}

.step h3{
    margin-bottom:15px;
}

.step p{
    color:#bfc8e6;
    line-height:1.6;
}/* ===== CONTACTO ===== */

.contact{
    padding:120px 10%;
}

.contact-container{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:60px;
    margin-top:60px;
    align-items:start;
}

.contact-info h3{
    font-size:32px;
    margin-bottom:25px;
}

.contact-info p{
    margin-bottom:18px;
    color:#bfc8e6;
    font-size:18px;
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-form input,
.contact-form textarea{

    width:100%;
    padding:18px;
    border:none;
    border-radius:15px;

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

    color:white;

    font-size:16px;

    outline:none;
}

.contact-form textarea{
    min-height:180px;
    resize:none;
}

.contact-form button{

    padding:18px;

    border:none;

    border-radius:15px;

    background:linear-gradient(135deg,#4fa3ff,#8d6bff);

    color:white;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

.contact-form button:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(79,163,255,.35);

}form.contact-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  width: 100% !important;
}

form.contact-form input,
form.contact-form textarea,
form.contact-form button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}.whatsapp-button{
    position:fixed;
    right:28px;
    bottom:28px;
    width:62px;
    height:62px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#25d366;
    color:white;
    font-size:30px;
    text-decoration:none;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    z-index:1200;
    transition:.3s;
}

.whatsapp-button:hover{
    transform:translateY(-4px) scale(1.05);
}@media (max-width: 768px){

  .navbar{
    padding:18px 6%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-direction:row;
}

  .brand{
    font-size:23px;
  }

  nav{
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
  }

  nav a{
    font-size:14px;
  }

  main{
    padding:130px 6% 70px;
}

  .hero{
    max-width:100%;
  }.hero h1{
    font-size:32px;
    line-height:1.2;
}

  .hero h1{
    font-size:40px;
    line-height:1.1;
  }

  .hero p{
    font-size:16px;
  }

  .hero-actions{
    flex-direction:column;
    align-items:center;
    width:100%;
  }

  .button{
    width:100%;
    max-width:320px;
    text-align:center;
  }

  .why-grid,
  .services-grid,
  .process-grid{
    grid-template-columns:1fr;
  }

  .contact-container{
    grid-template-columns:1fr;
    gap:35px;
  }

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

  .contact,
  .process,
  .services,
  .why-us{
    padding:85px 6%;
  }

  .contact-form,
  .contact-form input,
  .contact-form textarea,
  .contact-form select,
  .contact-form button{
    width:100%;
  }

  .whatsapp-button{
    width:54px;
    height:54px;
    right:16px;
    bottom:16px;
  }


@media (max-width:768px){



    .navbar{
        justify-content:space-between;
    }

   .navbar nav{
    display:flex;
    align-items:center;
    gap:12px;
}

.navbar nav a{
    font-size:13px;
    white-space:nowrap;
}

.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.brand{
    font-size:20px;
    white-space:nowrap;
}

}/* ==========================
   PROYECTOS
========================== */

.projects{
    padding:100px 8%;
    background:transparent;
}

.section-heading{
    text-align:center;
    max-width:800px;
    margin:0 auto 60px;
}

.section-heading span{
    color:#4F8CFF;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.section-heading h2{
    margin-top:15px;
    font-size:2.5rem;
    color:#fff;
}

.section-heading p{
    margin-top:20px;
    color:#b7c0d1;
    line-height:1.8;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.project-card{
    background:#121826;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:30px;
    transition:.35s;
}

.project-card:hover{
    transform:translateY(-8px);
    border-color:#4F8CFF;
    box-shadow:0 10px 30px rgba(79,140,255,.25);
}

.project-icon{
    font-size:3rem;
    margin-bottom:20px;
}

.project-card h3{
    color:white;
    margin-bottom:20px;
}

.project-card p{
    color:#c7cfdd;
    line-height:1.8;
    margin-bottom:15px;
}/* Ajuste de Proyectos en escritorio */
@media (min-width: 901px){

  .projects{
    padding:100px 8%;
  }

  .project-grid{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:28px !important;
    max-width:1200px;
    margin:50px auto 0;
    align-items:stretch;
  }

  .project-card{
    display:flex;
    flex-direction:column;
    height:100%;
    padding:30px;
    border-radius:20px;
    background:rgba(18,24,38,.78);
    border:1px solid rgba(255,255,255,.10);
  }

  .project-card p{
    margin-bottom:14px;
  }
}
}
.contact-container{
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:32px;
  align-items:start;
}

.contact-info{
  align-self:start;
  padding-top:18px;
}

.contact-form{
  max-width:560px;
  width:100%;
  margin:0 auto;
  padding:28px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    0 0 30px rgba(79,163,255,.10);
  backdrop-filter:blur(14px);
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:15px 16px;
  background:rgba(255,255,255,.06);
  color:white;
  outline:none;
  font-size:16px;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color:rgba(79,163,255,.75);
  box-shadow:0 0 0 3px rgba(79,163,255,.10);
}

.contact-form select{
  appearance:none;
  -webkit-appearance:none;
  background:
    linear-gradient(135deg,rgba(21,156,255,.14),rgba(139,61,255,.14)),
    rgba(255,255,255,.06);
  cursor:pointer;
}

.contact-form select option{
  background:#0b1224;
  color:#ffffff;
}
.contact-form textarea{
  min-height:150px;
  resize:vertical;
}

.contact-form button{
  border:none;
  border-radius:16px;
  padding:16px 22px;
  font-weight:700;
  color:white;
  background:linear-gradient(135deg,#159cff 0%,#5364ff 48%,#8b3dff 100%);
  box-shadow:
    0 10px 25px rgba(37,99,235,.24),
    0 0 18px rgba(124,58,237,.18);
  cursor:pointer;
}

.contact-form button:hover{
  transform:translateY(-3px);
  box-shadow:
    0 14px 32px rgba(37,99,235,.32),
    0 0 24px rgba(124,58,237,.26);
}

@media (max-width:768px){
  .contact-container{
    grid-template-columns:1fr;
    max-width:560px;
  }
  .contact-info{
    text-align:center;
    padding-top:0;
  }

  .contact-form{
    padding:22px;
  }
}
#contact-form{
  scroll-margin-top:90px;
}

.hero h1 .hero-lead{
  display:block;
  background:none;
  -webkit-text-fill-color:white;
}

form.contact-form input.form-honeypot{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

.bella-offer{
  max-width:1100px;
  margin:0 auto;
  padding:90px 24px;
}

.bella-offer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);
  gap:28px;
  align-items:stretch;
}

.bella-benefits,.pilot-price{
  padding:32px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(10,18,34,.78);
}

.bella-benefits h3{font-size:1.5rem;margin-top:0}.bella-benefits ul{display:grid;gap:13px;margin:0 0 28px;padding-left:22px}.pilot-price{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;border-color:rgba(90,164,255,.55);box-shadow:0 20px 55px rgba(0,0,0,.25)}.pilot-price>span{color:#83bcff;font-size:.78rem;font-weight:800;letter-spacing:2px}.pilot-price>strong{font-size:3.4rem;line-height:1;margin-top:16px}.pilot-price .monthly{font-size:2rem;margin-top:14px}.pilot-price small{font-size:1rem;color:#b7c5d9}.pilot-price .button{margin-top:12px}

@media(max-width:760px){.bella-offer{padding:65px 20px}.bella-offer-grid{grid-template-columns:1fr}.bella-benefits,.pilot-price{padding:24px}.pilot-price>strong{font-size:2.8rem}}

@media(max-width:768px){
  .navbar{flex-wrap:wrap;row-gap:12px}
  .navbar nav{order:3;flex-basis:100%;margin-left:0;justify-content:center}
  .language-switcher{margin-left:auto}
  main{padding-top:175px}
}