/* =========================================
   HERO SEARCH BACKGROUND
   ========================================= */
*{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
.am-tutorials-hero{
position:relative;
background:url('/images/hero-main.jpg') center/cover no-repeat;
padding-top:20px;
padding-bottom:10px;
}

.am-tutorials-hero::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom, rgba(7,11,20,.7), rgba(7,11,20,1));
backdrop-filter:blur(4px);
}

.am-search-sticky{
position:sticky;
top:0;
z-index:50;
margin-bottom:20px;
}

.am-search-sticky,
.am-search-sticky *{
position:relative;
}

/* =========================================
   SEARCH BAR
   ========================================= */

.am-search-bar{
display:flex;
gap:14px;
padding:20px 0;
flex-wrap:wrap;
align-items:center;
}

/* FILTER BUTTON */

.am-filter-toggle{
display:flex;
align-items:center;
gap:6px;
background:#111827;
border:1px solid #1a2030;
padding:12px 16px;
border-radius:12px;
color:#cbd5e1;
cursor:pointer;
transition:.25s;
font-weight:600;
}

.am-filter-toggle:hover{
background:#1a2030;
color:white;
}

/* ICON ROTATION */

.am-filter-icon svg{
transition:transform .35s ease;
}

.am-filter-toggle.active .am-filter-icon svg{
transform:rotate(180deg);
}

/* FILTROS */

.am-filtros{
display:flex;
gap:14px;
max-height:0;
opacity:0;
overflow:hidden;
transition:max-height .35s ease, opacity .25s ease, padding .25s ease;
}

.am-filtros.active{
max-height:120px;
opacity:1;
padding-bottom:15px;
}

/* =========================================
   LIST MODE CARDS
   ========================================= */

.am-tutorial-card{
display:flex;
gap:20px;
background:#0b1220;
border-radius:14px;
padding:15px;
text-decoration:none;
color:white;
transition:.25s;
border:1px solid rgba(255,255,255,.04);
margin-bottom:15px;
}

.am-tutorial-card:hover{
transform:translateY(-3px);
background:#111827;
}

.am-tutorial-thumb{
width:260px;
aspect-ratio:16/9;
overflow:hidden;
border-radius:10px;
flex-shrink:0;
}

.am-tutorial-thumb img{
width:100%;
height:100%;
object-fit:cover;
}

.am-tutorial-info{
display:flex;
flex-direction:column;
justify-content:center;
gap:6px;
}

.am-tutorial-info h3{
font-size:18px;
margin-bottom:5px;
}

.am-tutorial-info p{
font-size:14px;
color:#9ca3af;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width:768px){

.am-tutorials-hero{
padding-top:10px;
}

.am-search-bar{
padding:12px 0;
}

.am-filter-toggle{
padding:10px 12px;
font-size:14px;
}

.am-filtros.active{
padding-bottom:10px;
}

.am-tutorial-card{
flex-direction:row;
gap:12px;
padding:10px;
align-items:center;
}

.am-tutorial-thumb{
width:120px;
aspect-ratio:16/10;
border-radius:8px;
}

.am-tutorial-info h3{
font-size:15px;
margin-bottom:2px;
}

.am-tutorial-info p{
font-size:12px;
}

}
/* BADGES NIVEL */

.am-badge{
padding:4px 10px;
border-radius:6px;
font-size:12px;
font-weight:600;
margin-left:6px;
}

/* VERDE */

.badge-basico{
background:#16a34a;
color:white;
}

/* AZUL */

.badge-intermedio{
background:#2563eb;
color:white;
}

/* NARANJA */

.badge-avanzado{
background:#ea580c;
color:white;
}/* ICONO INSTRUMENTO */

.am-icon{
width:16px;
height:16px;
margin-right:6px;
color:#f59e0b;
vertical-align:middle;
}.am-tonalidad{
font-size:13px;
color:#cbd5e1;
margin-top:2px;
}