/* ===== AeroMetrics – CSS limpio ===== */

/* Paleta */
:root{
  --primary-color:#21c7bd;
  --secondary-color:#62a8ff;
  --section-bg-color:#0f1a2e;
  --white-color:#ffffff;
  --dark-color:#0b1220;
  --p-color:#a3afc7;
  --accent-gold:#f7c948; /* dorado para link activo */
}

/* Fondo base (único degradado) */
body{
  background:
    radial-gradient(1100px 600px at 70% -10%, rgba(98,168,255,.12), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(33,199,189,.10), transparent 60%),
    #0b1220 !important;
  color:#fff;
  min-height: 100vh;
}

/* Neural canvas detrás de todo */
#neural-bg{
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; opacity: .28; pointer-events: none;
}

/* ================= NAVBAR ================= */
.navbar.fixed-top{
  position: fixed; top:0; left:0; right:0;
  z-index: 1040;
  background: transparent !important;  /* sin glass */
  border: 0;
  box-shadow: none;
}
/* Rectángulo oscuro con degradado y bordes redondeados */
.navbar > .container{
  background: linear-gradient(180deg, rgba(12,18,28,.95), rgba(12,18,28,.90)) !important;
  border-radius: 20px !important;
  padding: 10px 18px !important;
  margin-top: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
}
/* Links */
.navbar .nav-link{
  color:#ffffff !important;
  opacity:.9;
  padding:.375rem .75rem;
  transition:opacity .2s ease,color .2s ease;
}
.navbar .nav-link:hover{ opacity:1; }
.navbar .nav-link.active{ color: var(--accent-gold) !important; }
/* Logo */
.navbar-brand-image{ height:72px; width:auto; display:block }

/* ================= HERO ================= */
.hero-section{
  position: relative;
  z-index: 3;
  min-height: 100vh;  /* imágenes desde arriba a pantalla completa */
  padding: 0;
  overflow: hidden;
}
.hero-slides{ position:absolute; inset:0; z-index: 1; }
/* Contenido por encima del fondo, separado del nav fijo */
.hero-section .container{
  position: relative; 
  z-index: 3;
  padding-top: 120px; /* evita solape con la barra fija */
}
/* Quita overlays extra (segundo fondo) */
.section-overlay{ display:none !important; }
.vegas-overlay{ display:none !important; }

/* Bloque central del héroe (solo el texto) */
.hero-glass{
  display:inline-block;
  background: linear-gradient(180deg, rgba(8,15,30,.55), rgba(8,15,30,.25));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 16px 20px;
  backdrop-filter: blur(2px) saturate(140%);
}
.hero-contrast{ text-shadow: 0 2px 12px rgba(0,0,0,.65), 0 0 1px rgba(0,0,0,.6); }
.hero-keywords{ color:#fff !important; } /* “Tecnología · Innovación · Productividad” */

/* ================= SECCIONES / TEXTO ================= */
h1,h2,h3,h4,h5,h6{ color:#e9edf5 !important }
p,.small-text,.badge,.nav-link{ color:var(--p-color) !important }
.section-bg{ background-color:#0f182a !important }

.team-block-wrap,.booking-form-wrap,.timeline-content{
  background:linear-gradient(180deg,#0f182a,#141f35) !important;
  border:1px solid rgba(255,255,255,.08);
  color:#e9edf5;
}
.form-control{
  background:#0b1426; color:#e9edf5; border-color:rgba(255,255,255,.15);
}
.form-control:focus{ border-color:#62a8ff; box-shadow:none }

/* ================= TARJETA “SOLUCIONES” ================= */
.feature-card{
  border-radius: 24px;
  overflow: hidden;
  /* degradado propio de la tarjeta (no cubre el fondo global) */
  background: linear-gradient(180deg, rgba(15,24,42,.92), rgba(20,31,53,.88));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

/* panel izquierdo con imagen (usa tarjeta.png) */
.feature-media{
  min-height: 360px;
  background-image: url('../assets/tarjeta.jpeg'); /* ruta relativa desde /css */
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Overlay azul fuerte abajo → azul pálido arriba */
.feature-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,45,115,0.85) 0%,   /* azul fuerte en la base */
    rgba(15,40,90,0.65) 50%,  /* azul medio */
    rgba(20,50,110,0.35) 80%, /* azul pálido */
    rgba(30,60,120,0.1) 100%  /* casi transparente arriba */
  );
  border-radius: inherit;
}


/* cuerpo derecho */
.feature-body{ padding: 48px; }
@media (max-width: 992px){
  .feature-body{ padding: 28px; }
}

/* botón */
.feature-btn{
  border: 1px solid var(--secondary-color);
  color: var(--white-color);
  background: linear-gradient(180deg, rgba(98,168,255,.18), rgba(33,199,189,.12));
  padding: .75rem 1.25rem;
  border-radius: 14px;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.feature-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(98,168,255,.20);
  background: linear-gradient(180deg, rgba(98,168,255,.25), rgba(33,199,189,.18));
}

/* Justificado */
.text-justify { text-align: justify; }

/* ================= FOOTER centrado + LinkedIn derecha ================= */
.site-footer-alt{
  border-top:1px solid rgba(255,255,255,.08); 
  background:rgba(9,15,28,.5);
  padding: 32px 0;
  position: relative;
}
.site-footer-alt .footer-logo{
  height:48px; 
  width:auto;
  display:block;
  margin: 0 auto;
}
.site-footer-alt p{ font-size:.9rem; }

.site-footer-alt .footer-brand{
  font-weight:600;
  font-size:1rem;
  color:#fff;
}
.site-footer-alt .footer-brand .tm{
  font-size:.7rem;
  vertical-align:super;
  margin-left:2px;
  opacity:.7;
}
/* LinkedIn ícono a la derecha */
.site-footer-alt .footer-linkedin{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  color:#62a8ff;
  font-size:1.6rem;
  transition:color .2s ease;
}
.site-footer-alt .footer-linkedin:hover{
  color:#21c7bd;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px){
  .navbar-brand-image{ height:60px }
  .hero-section .container{ padding-top: 96px; }
  /* mover un poco el icono en móviles */
  .site-footer-alt .footer-linkedin{ right:14px; }
}

/* ================= TRANSICIONES ENTRE PÁGINAS (suave) ================= */
/* Requiere <meta name="view-transition" content="same-origin"> en cada página */

::view-transition-old(root){
  animation: am-old-exit .85s cubic-bezier(.22,.8,.26,1) both;
}
::view-transition-new(root){
  animation: am-new-enter .85s cubic-bezier(.22,.8,.26,1) both;
}

@keyframes am-old-exit{
  from{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
  to{
    opacity: 0.96;                 /* menos “fade” para que no se sienta corte */
    transform: translateY(8px) scale(0.997);
    filter: blur(2px) saturate(98%) brightness(.985);
  }
}
@keyframes am-new-enter{
  from{
    opacity: 0.96;
    transform: translateY(10px) scale(0.997);
    filter: blur(4px) saturate(110%) brightness(1.02);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

/* Navegación: el botón también transiciona suave en hover/active */
.custom-btn{
  transition: transform .18s ease, box-shadow .22s ease, background .22s ease, filter .22s ease;
}
.custom-btn:active{ transform: translateY(1px) scale(.995); }

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none !important; }
}