:root{
  --blue-600: #0b6ff0;
  --blue-700: #0958d6;
  --black: #0b0b0d;
  --white: #ffffff;
  --glass: rgba(255,255,255,0.06);
  --card-bg: rgba(255,255,255,0.04);
  --accent: var(--blue-600);
  --blur: 8px;
  --max-width: 1100px;
  --radius: 12px;
}


/* layout */
.container{max-width:var(--max-width);margin:0 auto;padding:1.5rem;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--white);}
.logo-mark{width:42px;height:42px;border-radius:8px;background:linear-gradient(135deg,var(--blue-600),var(--blue-700));box-shadow:0 6px 18px rgba(10,80,200,0.25);}
.brand-name{font-weight:700;font-size:1.05rem;letter-spacing:0.3px;}

/* nav */
.main-nav{display:flex;gap:1rem;}
.nav-link{text-decoration:none;color:rgba(255,255,255,0.9);padding:0.5rem 0.6rem;border-radius:8px;}
.nav-link:hover{background:rgba(255,255,255,0.04);}
.nav-link.active{background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.04);}

/* header smaller on scroll */
.site-header{position:sticky;top:0;z-index:30;padding:1rem 0;background:transparent;backdrop-filter: blur(4px);}

/* hero */
.hero {
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}


.hero-content{max-width:720px;}
.hero-title{font-size:2.2rem;margin:0 0 .6rem;color:var(--white);text-shadow:0 6px 28px rgba(2,6,23,0.7);}
.hero-sub{opacity:0.92;margin-bottom:1rem;color:rgba(255,255,255,0.9);}
.hero-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;text-decoration:none;color:var(--white);background:transparent;border:1px solid rgba(255,255,255,0.08);}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--blue-700));box-shadow:0 8px 30px rgba(11,111,240,0.18);border:0;}
.btn-outline{border:1px solid rgba(255,255,255,0.16);background:transparent;}

/* sections */
.about,.features,.services-list,.contact{padding:2.5rem 0;}
.grid-2{display:grid;grid-template-columns:1fr 420px;gap:1.25rem;align-items:start;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.cards{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem;}
.feature-card, .service{background:var(--card-bg);padding:1.1rem;border-radius:12px;}
.card-elevated{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));padding:1.1rem;border-radius:12px;box-shadow:0 6px 24px rgba(2,8,23,0.45);}

/* utilities */
.benefits{margin-top:0.6rem;list-style:disc;padding-left:1.1rem;line-height:1.6;}
.page-hero.small{padding:3.2rem 0 1.2rem;background:linear-gradient(180deg, rgba(0,0,0,0.25), transparent);}

/* contact form */
.contact-form{display:flex;flex-direction:column;gap:.75rem;background:rgba(255,255,255,0.02);padding:1rem;border-radius:10px;}
.contact-form label{font-size:.95rem;}
.contact-form input, .contact-form textarea{width:100%;padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.45);color:var(--white);outline: none;}
.form-msg{margin-top:.6rem;color:var(--accent);}

/* footer */
.site-footer{padding:1.5rem 0;border-top:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, transparent, rgba(0,0,0,0.2));}
.footer-inner{display:flex;justify-content:space-between;gap:1rem;align-items:center;}

/* responsive */
@media(max-width:900px){
  .grid-2{grid-template-columns:1fr;}.header-inner{gap:.5rem;}
  .nav-toggle{display:inline-block;}
  .main-nav{position:fixed;right:0;top:72px;background:linear-gradient(180deg, rgba(3,10,20,0.98), rgba(3,10,20,0.96));padding:1rem;border-radius:12px;display:none;flex-direction:column;width:220px;}
  .main-nav.show{display:flex;}
}
@media(min-width:901px){
  .nav-toggle{display:none;}
}

/* Marca AVIA */
.brand-logo{width:60px;height:60px;object-fit:contain;border-radius:10px;box-shadow:0 8px 24px rgba(11,111,240,0.12);}
.brand-text{display:flex;flex-direction:column;line-height:1;}
.brand-name{font-weight:800;font-size:1.05rem;color:var(--white);margin-left:0.25rem;}
.brand-tag{font-size:0.72rem;color:rgba(255,255,255,0.7);letter-spacing:0.6px;margin-top:2px;}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;}


/* Línea superior difuminada que contiene el menú */

/* Contenedor interno alineado en una sola línea */
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.25rem;
}



/* Navegación en línea dentro de la tira */
.main-nav{
  display:flex;
  gap:0.65rem;
  align-items:center;
}
.nav-link{
  text-decoration:none;
  color:var(--white);
  padding:0.5rem 0.75rem;
  border-radius:8px;
  font-weight:600;
  background:transparent;
  transition: background .18s ease, transform .12s ease;
}
.nav-link:hover{background:rgba(255,255,255,0.04);transform:translateY(-2px);}
.nav-link.active{background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));}

/* Responsive: colapsar menú a panel lateral pequeño */
@media(max-width:900px){
  .main-nav{
    position:fixed;
    right:12px;
    top:64px;
    background:linear-gradient(180deg, rgba(3,10,20,0.98), rgba(3,10,20,0.96));
    padding:0.9rem;
    border-radius:12px;
    display:none;
    flex-direction:column;
    width:200px;
    gap:0.5rem;
    box-shadow:0 10px 40px rgba(2,6,23,0.6);
  }
  .main-nav.show{display:flex;}
  .nav-toggle{display:inline-block;}
}

/* Evitar que la hero se superponga bajo la tira */
.hero{padding-top:calc(6rem + 8px);}

.nav-strip{
  position:sticky;
  top:0;
  z-index:60;
  width:100%;
  display:block;
  /*background: linear-gradient(90deg, #0b6ff0 0%, #0958d6 100%);*/
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  /*border-bottom: 1px solid rgba(0,0,0,0.12);*/
  padding: 8px 0;
  /*box-shadow: 0 6px 30px rgba(2,6,23,0.45);*/
}

.nav-strip::after{
  content:"";
  display:block;
  height:0;
  width:100%;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  animation: fadeUp 0.8s ease-out forwards;
}

.btn:hover {
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(11,111,240,0.3);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.feature-card:hover, .card-elevated:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(2,8,23,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

.main-nav.show {
  animation: slideIn 0.3s ease-out;
}

@keyframes fadeMsg {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

#formMsg {
  animation: fadeMsg 0.5s ease-out;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  animation: fadeUp 0.8s ease-out forwards;
}
@keyframes fadeMsg {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-msg {
  animation: fadeMsg 0.5s ease-out;
}

.btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(11,111,240,0.3);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.site-header {
  animation: fadeSlideDown 0.6s ease-out;
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}


.site-header {
  background: linear-gradient(135deg, #0a1f3d 0%, #0b3a6f 50%, #0b6ff0 100%);
  backdrop-filter: blur(8px);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 6px 24px rgba(2,8,23,0.4);
}


.hero-content.centered {
  max-width: 1200px;
  margin: 0 auto;
}

.hero-slogan {
  font-size: clamp(3.5rem, 7vw, 6rem);
  margin-top: 0;
  font-weight: 900;
  line-height: 1.1;
  color: var(--white);
  text-shadow: 0 10px 40px rgba(2,6,23,0.7);
  margin-bottom: 1.2rem;
  letter-spacing: 0.8px;
  text-align: center;
  animation: fadeUp 0.8s ease-out forwards;
}

.hero-sub {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2rem;
  text-align: center;
}
@media(max-width: 800px) {
  .hero-slogan {
    font-size: 1.8rem;
  }
}


@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media(max-width: 600px) {
  .hero-slogan {
    font-size: 1.5rem;
    text-align: center;
  }
}

.site {
  min-height: 100vh;
  background-image: linear-gradient(135deg, rgba(10,31,61,0.85), rgba(11,58,111,0.85)), url("Background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fixed-footer {
  position:relative;
  bottom: 0;
  width: 100%;
  z-index: 30;
  background: linear-gradient(135deg, #0a1f3d 0%, #0b3a6f 50%, #0b6ff0 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -6px 24px rgba(2,8,23,0.4);
  padding: 1rem 0;
  color: var(--white);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer-links a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  margin-left: 1rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--white);
}