/* ===========================================================
   VARIABLES BÁSICAS (modo claro moderno)
   =========================================================== */
   :root{
    --primary:#04344d; /* azul petróleo */
    --accent:#00bcd4;  /* turquesa */
    --light:#f5f6f7;  /* gris muy claro (fondo) */
  }
  
  /* ===========================================================
     ESTILO GENERAL
     =========================================================== */
  body{
    background:var(--light);
    font-family:'Segoe UI',sans-serif;
  }
  
  /* Colores utilitarios */
  .bg-primary{background-color:var(--primary)!important;}
  .text-accent{color:var(--accent);}
  
  h1,h2,h3,h4{color:var(--primary);}
  
  /* Botón principal turquesa */
  .btn-accent{
    background:var(--accent);
    color:#fff;
    border:none;
    transition:.25s;
  }
  .btn-accent:hover{opacity:.9;}
  
  /* ===========================================================
     NAVBAR
     =========================================================== */
  .navbar-dark .navbar-nav .nav-link.active,
  .navbar-dark .navbar-nav .nav-link:hover{
    color:var(--accent)!important;
  }
  
  /* ===========================================================
     HERO / PORTADA
     =========================================================== */
  .hero{
    position:relative;
    height:85vh;                     /* pantalla casi completa */
    background-attachment:fixed;     /* parallax suave */
  }
  .hero-overlay{
    position:absolute;inset:0;
    background:rgba(0,0,0,.45);      /* oscurece la imagen */
  }
  .hero-title{
    font-size:clamp(2.2rem,6vw,4rem);
    font-weight:800;
    line-height:1.2;
    color:#fff;                      /* fallback */
    text-shadow:0 4px 18px rgba(0,0,0,.8);
    opacity:0;transform:translateY(40px);
    animation:slideUp 1s .3s forwards ease-out;
  }
  /* Gradiente animado sobre “Aridam Informática” */
  .brand-gradient{
    display:inline-block;
    background:linear-gradient(120deg,var(--accent) 0%,#52e3f6 50%,var(--accent) 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    color:transparent;
    animation:shine 6s linear infinite;
  }
  .hero-subtitle{
    opacity:0;transform:translateY(20px);
    animation:slideUp .8s .8s forwards ease-out;
    color:white;
  }

  /* Logo grande centrado en el hero */
.hero-main-logo{
  width:min(150px, 30vw);  /* hasta 220 px, adapta en pantallas chicas */
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));
}

/* Añade un poco de margen entre logo y título */
@media (min-width: 576px){
  .hero-main-logo{margin-bottom:2.5rem;}
}
  /* Onda SVG opcional (si la usas en el HTML) */
  .hero-wave{position:absolute;bottom:-1px;left:0;width:100%;}
  
  /* ===========================================================
     TARJETAS / FEATURE CARDS
     =========================================================== */
  .feature-card{transition:.3s;}
  .feature-card:hover{transform:translateY(-4px);}
  
  /* ===========================================================
     IMÁGENES DE BLOQUES (cover)
     =========================================================== */
  .object-fit-cover{
    object-fit:cover;
    object-position:center;
  }
  
  /* ===========================================================
     FOOTER
     =========================================================== */
  .footer{
    background:#1b1d21;
  }
  .footer a{color:#adb5bd;text-decoration:none;}
  .footer a:hover,.footer .social:hover{color:var(--accent);}
  .footer .social{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    border:1px solid #45484d;border-radius:50%;
    transition:.3s;
  }
  
  /* Enlaces secundarios dentro del footer */
  .footer-link{color:#adb5bd;text-decoration:none;}
  .footer-link:hover{color:var(--accent);}
  
  /* ===========================================================
     ANIMACIONES KEYFRAMES
     =========================================================== */
  @keyframes shine{
    0%  {background-position:0 0;}
    100%{background-position:-200% 0;}
  }
  @keyframes slideUp{
    to{opacity:1;transform:translateY(0);}
  }
  

  /* Tarjetas elegante para soporte remoto */
.remote-card{
  background:linear-gradient(135deg,#fff 0%,#f1f7f8 100%);
  transition:.35s cubic-bezier(.19,1,.22,1);
  display:flex;flex-direction:column;
}
.remote-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 28px rgba(0,0,0,.15);
}
/* Ícono con círculo tenue */
.remote-card i{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,188,212,.12);
  border-radius:50%;
}