:root{
  /* Palette: vivid but professional */
  --gd-primary: #0A2540; /* navy */
  --gd-accent:  #3D5AFE; /* electric blue */
  --gd-dark:    #071A1B;
  --gd-light:   #F6F8FA;
}
*{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
body{background: radial-gradient(1200px 700px at 10% 0%, rgba(61,90,254,.20), transparent 60%),
               radial-gradient(900px 600px at 90% 20%, rgba(10,37,64,.35), transparent 55%),
               #050f10;
     color: #e9eef1;}
a{color: var(--gd-accent); text-decoration: none;}
a:hover{opacity:.9;}
.topbar{background: linear-gradient(90deg, rgba(10,37,64,.85), rgba(7,26,27,.85)); border-bottom: 1px solid rgba(255,255,255,.06);}
.topbar-link{color: rgba(255,255,255,.75);}
.topbar-link:hover{color: #fff;}
.glass-nav{
  background: rgba(7,26,27,.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-logo{width: 36px; height: 36px; object-fit: contain;}
.btn-accent{
  background: linear-gradient(135deg, var(--gd-accent), #8C9EFF);
  border: none;
  color: #081427;
  font-weight: 600;
}
.btn-accent:hover{filter: brightness(.95);}
.site-main{min-height: 65vh;}
.hero{
  position: relative;
  padding: 5.5rem 0 4.2rem;
  overflow: hidden;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(1000px 600px at 20% 20%, rgba(61,90,254,.18), transparent 60%),
              radial-gradient(800px 500px at 80% 10%, rgba(102,227,255,.14), transparent 60%);
  pointer-events:none;
}
.hero-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 2.2rem;
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.kpi{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
}
.section-title{letter-spacing:-.02em;}
.card-glass{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.icon-pill{
  width: 46px; height:46px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(61,90,254,.14);
  border: 1px solid rgba(61,90,254,.22);
  color: var(--gd-accent);
}
.footer{background: linear-gradient(180deg, rgba(7,26,27,.25), rgba(7,26,27,.85)); border-top: 1px solid rgba(255,255,255,.08);}
.footer-link{color: rgba(255,255,255,.72);}
.footer-link:hover{color:#fff;}
.social{
  width: 38px; height: 38px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
}
.border-white-10{border-color: rgba(255,255,255,.10)!important;}
.badge-soft{
  background: rgba(61,90,254,.14);
  border: 1px solid rgba(61,90,254,.22);
  color: #bfefff;
}
.blog-cover{
  width:100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}
.blog-content img{
  max-width:100%;
  height:auto;
}
.blog-content figure{margin: 1rem 0;}
.form-control, .form-select{
  background: rgba(255,255,255,.03)!important;
  border: 1px solid rgba(255,255,255,.10)!important;
  color: #e9eef1!important;
}
.form-control::placeholder{color: rgba(233,238,241,.55);}
.table{--bs-table-bg: transparent; --bs-table-color: #e9eef1;}
.table td, .table th{border-color: rgba(255,255,255,.10);}
.alert{border-radius: 16px;}
/* ===============================
   BOTÓN SOPORTE – ANIMADO
   =============================== */

.topbar-support{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 14px;
  border-radius:999px;

  background:#ffffff;
  color:#000000 !important;

  font-weight:600;
  font-size:14px;
  text-decoration:none;

  box-shadow:0 4px 12px rgba(0,0,0,.15);
  opacity:0;
  transform:translateY(-6px) scale(.95);
}

/* Hover elegante, no exagerado */
.topbar-support:hover{
  background:#f2f2f2;
  color:#000;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* Icono ligeramente más visible */
.topbar-support i{
  font-size:16px;
}

/* ===============================
   ANIMACIÓN DE ENTRADA
   =============================== */

@keyframes supportFadeIn{
  0%{
    opacity:0;
    transform:translateY(-8px) scale(.95);
  }
  60%{
    opacity:1;
    transform:translateY(2px) scale(1.02);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.animate-support{
  animation:supportFadeIn .6s ease-out .3s forwards;
}
/* ===============================
   BOTÓN VISORDATAVOL – FOOTER
   =============================== */

.footer-visor{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;

  padding:6px 14px;
  border-radius:999px;

  background:rgba(255,255,255,.08);
  color:#ffffff;
  font-weight:600;
  font-size:14px;
  text-decoration:none;

  transition:all .2s ease;
}

.footer-visor:hover{
  background:rgba(255,255,255,.18);
  color:#ffffff;
}
.footer-visor {
    display: block;      /* Importante para que margin: auto funcione */
    width: fit-content;  /* Hace que el ancho sea solo el del texto */
    margin: 0 auto;      /* Centra horizontalmente */
    text-decoration: none; /* Quita el subrayado de enlace */
}
/* Blog post en fondo blanco (porque el texto negro es util si quieres leerlo) */
.blog-post-card{
  background:#ffffff;
  color:#000000;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.blog-post-card .blog-content{
  color:#000000;
}
.blog-post-card .blog-content a{ color: var(--gd-primary); }
.blog-post-card .blog-content a:hover{ opacity:.85; }

/* Titulo del blog en blanco (sobre el fondo oscuro de la pagina) */
.blog-title-white{ color:#ffffff; }
/* Por si algun template le deja text-dark al titulo. */
.blog-page .section-title{ color:#ffffff !important; }

/* Botones "Volver" en blogs */
.blog-back-top{ margin-bottom: 10px; }
.blog-back-bottom{ padding-left: 22px; padding-right: 22px; }

/* Animacion suave al hacer scroll en el contenido del blog */
.reveal-item{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal-item.is-visible{
  opacity: 1;
  transform: none;
}