/*=========================
  CARD
==========================*/

.ds-card{
    background:#fff;
    border-radius:22px;
    border:1px solid #E5E7EB;
    box-shadow:0 8px 24px rgba(15,23,42,.06);
    transition:.25s;
}

.ds-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 32px rgba(15,23,42,.10);
}

/*=========================
 HERO
==========================*/

.ds-hero{

background:linear-gradient(135deg,#2563EB,#020617);

color:white;

padding:22px;

border-radius:26px;

box-shadow:0 10px 28px rgba(37,99,235,.25);

}

.ds-hero small{

display:block;

font-weight:700;

color:#BFDBFE;

margin-bottom:8px;

}

.ds-hero h2{

font-size:30px;

margin:0;

}

.ds-hero p{

margin-top:6px;

color:#CBD5E1;

}

/*=========================
 BOTÓN
==========================*/

.ds-btn{

height:52px;

border:none;

border-radius:16px;

background:linear-gradient(135deg,#3B82F6,#1D4ED8);

color:white;

font-weight:800;

font-size:15px;

cursor:pointer;

transition:.25s;

}

.ds-btn:hover{

transform:translateY(-2px);

}

/*=========================
 BADGES
==========================*/

.ds-badge{

padding:6px 12px;

border-radius:999px;

font-size:11px;

font-weight:800;

}

.ds-success{

background:#DCFCE7;

color:#15803D;

}

.ds-danger{

background:#FEE2E2;

color:#DC2626;

}

.ds-warning{

background:#FEF3C7;

color:#B45309;

}

.ds-info{

background:#DBEAFE;

color:#2563EB;

}

/*=========================
 AVATAR
==========================*/

.ds-avatar{

width:64px;

height:64px;

border-radius:50%;

display:grid;

place-items:center;

background:#EFF6FF;

font-size:34px;

}

/*=========================
 TRANSICIONES
==========================*/

.fade-in{

animation:fade .35s;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(8px);

}

to{

opacity:1;

transform:none;

}

}