/* VARIABLES DE COLOR Y BASE */
:root{
  --blue:#007BFF;
  --blue-2:#00A2FF;
  --bg:#0D1117;
  --bg-2:#1C1C1C;
  --text:#FFFFFF;
  --muted:#AAB2C0;
  --card:#161B22;
  --border:#1F2937;
}

/* RESETEO Y TIPOGRAFÍA */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Estilos responsive para móviles */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    padding: 10px;
  }

  /* Header */
  .header-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
  }

  .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .brand-logo {
    height: 60px;
    margin-bottom: 10px;
  }

  .brand-text {
    font-size: 0.9rem;
  }

  /* Navegación */
  .main-nav ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    padding: 0;
  }

  .main-nav li {
    list-style: none;
  }

  .nav-link {
    display: block;
    padding: 12px;
    text-align: center;
    font-size: 1rem;
  }

  /* Intro hero */
  .intro {
    text-align: center;
    padding: 20px;
  }

  .intro-title {
    font-size: 1.4rem;
    line-height: 1.3;
    margin-bottom: 20px;
  }

  .cta-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cta-group .btn {
    width: 100%;
    text-align: center;
    padding: 12px;
    font-size: 1rem;
  }

  /* Secciones */
  .section {
    padding: 30px 15px;
  }

  .section-title {
    font-size: 1.3rem;
    text-align: center;
  }

  .section-lead {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 20px;
  }

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

  .card {
    padding: 15px;
    text-align: center;
  }

  /* Contacto */
  .contact-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .form-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  /* WhatsApp flotante */
  .whatsapp-float {
    bottom: 15px;
    right: 15px;
  }

  .wa-logo {
    width: 45px;
    height: 45px;
  }

  /* Imágenes generales */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* HEADER VISUAL Y ANIMADO */
/* Animación vertical para el logo */
.brand-logo {
  display: inline-block;
  animation: floatLogo 3s ease-in-out infinite;
}

@keyframes floatLogo {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px); /* sube */
  }
  100% {
    transform: translateY(0); /* baja */
  }
}

.site-header{
  position:relative;
  overflow:hidden;
  padding:48px 0 96px;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(0,123,255,.25), transparent 60%),
    linear-gradient(180deg, #0A0F14 0%, #0D1117 100%);
  border-bottom:1px solid var(--border);
}

.header-bg .bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  opacity:.25;
}
.bg-orb{
  position:absolute; width:420px; height:420px; border-radius:50%;
  filter:blur(40px);
  background:radial-gradient(circle at 30% 30%, var(--blue-2), transparent 60%);
  opacity:.35; mix-blend-mode:screen;
}
.orb-1{top:-80px; left:-80px}
.orb-2{bottom:-120px; right:-120px}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:0 24px; max-width:1200px; margin:0 auto;
}

/* Evitar que el fondo decorativo bloquee los clics en el hero */
.header-bg .bg-grid,
.bg-orb {
  pointer-events: none; /* No capturan hover ni clic */
}

/* Asegurar que el contenido del header esté por encima del fondo */
.site-header {
  position: relative;
}
.header-inner,
.intro,
.cta-group {
  position: relative;
  z-index: 2; /* Por encima de .bg-grid y .bg-orb */
}

/* Confirmar que los botones se comportan como botones */
.btn {
  cursor: pointer; /* Forzar cursor de botón */
}

/* MARCA */
.brand{display:flex; align-items:center; gap:16px; text-decoration:none}
.brand-logo{width:72px; height:72px; flex:0 0 auto;}
.brand-text{display:flex; flex-direction:column}
.brand-name{
  font-weight:700; letter-spacing:.08em; font-size:1.4rem;
}
.brand-tagline{
  color:var(--muted); font-size:.95rem;
}

/* NAVEGACIÓN */
.main-nav ul{display:flex; gap:12px; list-style:none; margin:0; padding:0}
.nav-link{
  color:var(--text); text-decoration:none; padding:10px 14px; border-radius:10px;
  transition:all .25s ease;
}
.nav-link:hover{background:rgba(255,255,255,.06)}
.btn-outline{
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:saturate(180%) blur(6px);
}
.btn-outline:hover{border-color:var(--blue); color:var(--blue)}

/* INTRO HERO */
.intro{max-width:1200px; margin:48px auto 0; padding:0 24px; text-align:center}
.intro-title{
  font-size:2.2rem; margin:0 0 18px; letter-spacing:.02em;
  background:linear-gradient(90deg, #fff, #9ecbff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cta-group{display:flex; gap:12px; justify-content:center}

/* BOTONES */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:14px; font-weight:600;
  text-decoration:none; cursor:pointer; transition:all .25s ease;
}
.btn-primary{
  color:#fff; background:
    linear-gradient(180deg, var(--blue-2), var(--blue));
  box-shadow:0 10px 24px rgba(0,123,255,.35);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,123,255,.45)}
.btn-ghost{
  color:#cfe6ff; background:rgba(0,123,255,.12); border:1px solid rgba(0,123,255,.35);
}
.btn-ghost:hover{background:rgba(0,123,255,.18); transform:translateY(-2px)}

/* SECCIONES BASE */
.section{padding:80px 24px}
.container{max-width:1200px; margin:0 auto}
.section-title{font-size:2rem; margin:0 0 8px}
.section-lead{color:var(--muted); margin:0 0 28px}

/* CARDS DE SERVICIOS */
.cards{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
}
@media (max-width:1200px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

.card{
  background:linear-gradient(180deg, #0F141A 0%, #121821 100%);
  border:1px solid var(--border);
  border-radius:16px; padding:22px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative; overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:auto -40% -40% auto; width:160px; height:160px;
  background:radial-gradient(circle, rgba(0,123,255,.25), transparent 60%);
  transform:rotate(25deg);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(0,123,255,.25);
  border-color:rgba(0,123,255,.35);
}
.card h3{margin:6px 0 4px; font-size:1.1rem}
.card p{color:#cbd5e1; margin:0 0 10px}
.card-link{
  margin-top:auto; color:#9ecbff; text-decoration:none; font-weight:600;
}
.card-link:hover{color:#fff}

/* ICONOS DE CARDS */
.card-icon{width:42px; height:42px; border-radius:10px; background:rgba(0,123,255,.14); border:1px solid rgba(0,123,255,.35); position:relative}
.i-layout::before,.i-layout::after{
  content:""; position:absolute; inset:8px; border:2px solid var(--blue); border-radius:6px;
}
.i-layout::after{inset:18px 8px 8px 8px; border-color:rgba(255,255,255,.18)}
.i-cart::before{
  content:""; position:absolute; left:9px; top:10px; width:22px; height:14px;
  border:2px solid var(--blue); border-bottom:none; border-radius:6px 6px 0 0;
}
.i-cart::after{
  content:""; position:absolute; left:11px; top:22px; width:18px; height:2px; background:var(--blue);
  box-shadow:0 8px 0 var(--blue);
}
.i-speed::before{
  content:""; position:absolute; left:8px; top:8px; width:26px; height:26px; border:2px solid var(--blue); border-radius:50%;
}
.i-speed::after{
  content:""; position:absolute; left:20px; top:12px; width:2px; height:14px; background:var(--blue); transform:rotate(35deg); transform-origin:bottom;
}
.i-integration::before{
  content:""; position:absolute; left:8px; top:8px; width:26px; height:26px; border-radius:8px; border:2px dashed var(--blue);
}
.i-integration::after{
  content:""; position:absolute; left:14px; top:14px; width:14px; height:14px; border-radius:50%; background:rgba(0,123,255,.25); border:2px solid var(--blue);
}
.i-shield::before{
  content:""; position:absolute; left:11px; top:8px; width:20px; height:26px;
  border:2px solid var(--blue); border-radius:12px 12px 8px 8px;
}

/* SOBRE NOSOTROS */
.about-grid{display:grid; grid-template-columns:1.5fr .8fr; gap:24px}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}
.about-text p{margin:0 0 12px; color:#d1d5db}
.about-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.about-list .dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--blue); margin-right:8px}

/* CONTACTO */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px;
}
.contact-card a{color:#9ecbff; text-decoration:none}
.contact-card a:hover{color:#fff}

.contact-form{
  background:linear-gradient(180deg, #0F141A 0%, #121821 100%);
  border:1px solid var(--border); border-radius:16px; padding:22px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:700px){.form-row{grid-template-columns:1fr}}
input, textarea, select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #243041;
  background:#0B1117; color:#e5e7eb; outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,123,255,.25)}
.btn-send{margin-top:12px; width:100%}
.form-note{color:#94a3b8; font-size:.9rem; margin-top:8px}

/* FOOTER */
.site-footer{border-top:1px solid var(--border); padding:28px 24px; background:#0A0F14}
.footer-inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
.footer-link{color:#9ecbff; text-decoration:none; margin-left:12px}
.footer-link:hover{color:#fff}

/* BOTÓN FLOTANTE WHATSAPP */
.whatsapp-float{
  position:fixed; bottom:20px; right:20px; z-index:1500;
}
.wa-logo{width:50px; height:50px}
/* Animación de pulso para el botón flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  animation: pulse 3s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
/* Animación al poner cursor encima del botón flotante de WhatsApp */
.whatsapp-float:hover {
  animation: bounce 0.6s;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}


/* MODAL DE AVISOS */
.modal{display:none; position:fixed; inset:0; z-index:1200}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  z-index:1100;
}
.modal-content{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(520px, 92vw);
  background:#0F141A;
  border:1px solid var(--border);
  border-radius:16px; padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  z-index:1201;
}
.modal-title{margin:0 0 12px; font-size:1.3rem}
.modal-body{margin:0 0 16px; color:#d1d5db}
.modal-actions{text-align:right}
.modal-close{
  position:absolute; top:10px; right:14px; background:none; border:none;
  color:#fff; font-size:1.4rem; cursor:pointer;
}

/* ANIMACIONES */
@keyframes logoIntro{
  from{opacity:0; transform:translateY(12px) scale(.96)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* FIN */