@import 'tailwindcss';
  /* ——— Look tipo “Analytics Console” sin tocar tu HTML/JS ——— */

  /* ===== Paleta corporativa (ajústala a tu marca) ===== */
  :root{
    --bg:#f5f7fb;
    --surface:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --border:#e5e7eb;

    --primary:#2155CD;     /* azul corporativo */
    --primary-600:#1b47ab; /* hover */
    --primary-50:#edf2ff;

    --accent:#2155CD;      /* verde acción */
    --accent-600:#1b47ab;
  }

  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--text);
    overflow-x: hidden;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  }

  /* Header con degradado azul */
    .app-header {
      position: sticky;
      top: 0;
      z-index: 40;
      /* Degradado similar a la imagen: azul profundo -> azul medio */
      background: linear-gradient(180deg, #2e43a7 0%, #3256b0 35%, #3b7cbd 100%);
      color: #fff;
      box-shadow: 0 2px 10px rgba(0,0,0,.08);
    }
    .app-header .inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 14px 20px; }
    .app-header .brand { color: #fff; }
    .app-header a { color: #fff; }
    .app-header .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; }
    .app-header .btn-ghost:hover { background: rgba(255,255,255,.08); }
  .brand{
    display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
  }
  .brand .logo{
    width:258px; height:80px; display:grid; place-items:center;
   background: linear-gradient(180deg, #2e43a7 0%, #3256b0 35%, #3b7cbd 100%); color:#fff; border-radius:8px; font-size:14px; font-weight:800;
  }
  .brand .logo img{ width:100%; height:100%; object-fit:contain; display:block; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    border-radius:10px; padding:10px 16px; font-weight:700; border:1px solid transparent; cursor:pointer;
  }
  .btn-primary{ background:var(--primary); color:#fff; }
  .btn-primary:hover{ background:var(--primary-600); }
  .btn-accent{ background:var(--accent); color:#fff; margin-top: 10px; }
  .btn-accent:hover{ background:var(--accent-600); }
  .btn-ghost{ background:#fff; border:1px solid var(--border); color:var(--text); }
  .app-header .btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; }
  .app-header .btn-ghost:hover{ background: rgba(255,255,255,.08); }



body{
    font-family: 'Exo', sans-serif;
}


.context {
    width: 100%;
    position: absolute;
    top:50vh;
    
}

.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}


.area{
    background: #fcfcfc;  
    background: -webkit-linear-gradient(to left, #151fe9, #070d8a);  
    width: 100%;
    height:100vh;
    overflow-x: auto;
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #070d8a;
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

.layout-content{ position: relative; max-width:1200px; margin:0 auto; padding-top:20px; min-height:calc(100vh - 72px); box-sizing:border-box; overflow: hidden;}


@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}