/* ============== HOME ============== */
.hero-home { position:relative; padding:5rem 0 4rem; overflow:hidden; }
.hero-home__bg{
	position:absolute; inset:0; z-index:0;
	background:
		radial-gradient(1200px 600px at 20% 10%, rgba(245,197,24,.18), transparent 60%),
		radial-gradient(900px 500px at 90% 80%, rgba(139,69,19,.25), transparent 60%),
		linear-gradient(180deg, #0b0b0e, #14141a);
}
.hero-home__inner { position:relative; z-index:1; display:grid; grid-template-columns: 1.4fr 1fr; align-items:center; gap:3rem; }
.hero-home__text .eyebrow{ color:#f5c518; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; }
.hero-home__text h1{ font-family:'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3.6rem); line-height:1.05; margin:.5rem 0 1rem; }
.hero-home__text h1 span{ color:#f5c518; }
.hero-home__text p{ font-size:1.1rem; color:#cbd5e1; margin-bottom:1.5rem; max-width:46ch; }
.hero-home__cta{ display:flex; gap:.75rem; flex-wrap:wrap; }
.hero-home__bullets{ list-style:none; padding:0; margin:2rem 0 0; display:flex; gap:1.25rem; flex-wrap:wrap; color:#cbd5e1; }
.hero-home__bullets li i{ color:#f5c518; margin-right:.4rem; }
.hero-home__art{ display:flex; justify-content:center; }
.hero-home__art img{ width:min(360px, 80%); filter: drop-shadow(0 20px 40px rgba(245,197,24,.25)); }

@media (max-width: 880px){
	.hero-home__inner{ grid-template-columns: 1fr; }
	.hero-home__art{ order:-1; }
	.hero-home__art img{ width:160px; }
}

/* ============== CARRUSEL ============== */
.carousel{ position:relative; }
.carousel__track{
	display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.5rem 0 1.25rem;
	scrollbar-width:thin;
}
.carousel__track::-webkit-scrollbar{ height:6px; }
.carousel__track::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px; }
.carousel__track > * { flex: 0 0 280px; scroll-snap-align: start; }
.carousel__btn{
	position:absolute; top:50%; transform:translateY(-50%);
	width:42px; height:42px; border-radius:50%; border:0;
	background:#1a1a22; color:#f5c518; font-size:1rem; cursor:pointer; z-index:2;
	display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.35);
	transition: background .2s;
}
.carousel__btn:hover{ background:#26262f; }
.carousel__btn--prev{ left:-12px; }
.carousel__btn--next{ right:-12px; }
@media (max-width:600px){ .carousel__btn{ display:none; } }

/* ============== CARDS DE MARIACHI ============== */
.m-card{
	display:flex; flex-direction:column; text-decoration:none; color:inherit;
	border-radius:14px; overflow:hidden; transition:transform .2s, box-shadow .2s;
}
.m-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.m-card__pic{
	position:relative; aspect-ratio: 4 / 3; background:#1c1c24;
	display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.m-card__pic img{ width:100%; height:100%; object-fit:cover; }
.m-card__pic span{ font-family:'Playfair Display', serif; font-size:3.5rem; color:#f5c518; }
.m-card__status{
	position:absolute; top:.6rem; left:.6rem;
	background:rgba(0,0,0,.7); color:#fff; padding:.3rem .55rem; border-radius:999px;
	font-size:.72rem; font-weight:600; backdrop-filter: blur(4px);
}
.m-card__status i{ font-size:.55rem; margin-right:.3rem; }
.m-card__status--ok i{ color:#22c55e; }
.m-card__status--busy i{ color:#ef4444; }
.m-card__verified{
	position:absolute; top:.6rem; right:.6rem;
	background:#f5c518; color:#0b0b0e;
	width:24px; height:24px; border-radius:50%;
	display:grid; place-items:center; font-size:.7rem;
}
.m-card__body{ padding:.85rem 1rem 1.1rem; }
.m-card__body h3{ margin:0 0 .25rem; font-size:1.05rem; }
.m-card__meta{ display:flex; gap:.85rem; margin-top:.5rem; font-size:.85rem; color:#cbd5e1; flex-wrap:wrap; }
.m-card__meta i{ margin-right:.25rem; }
.m-card--busy .m-card__pic img{ filter: grayscale(.6) brightness(.7); }

/* ============== HOW IT WORKS ============== */
.how-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1.25rem; }
.how-card{ padding:1.5rem; text-align:center; position:relative; }
.how-card__num{
	position:absolute; top:-14px; left:50%; transform:translateX(-50%);
	background:#f5c518; color:#0b0b0e; width:32px; height:32px; border-radius:50%;
	display:grid; place-items:center; font-weight:700;
}
.how-card > i{ font-size:2rem; color:#f5c518; margin:.5rem 0 .75rem; }
.how-card h3{ margin:.25rem 0 .5rem; }

/* ============== CTA banner ============== */
.section--cta{ padding:3rem 0; }
.cta-banner{
	display:grid; grid-template-columns: 1.3fr auto; align-items:center; gap:2rem;
	background:linear-gradient(135deg, rgba(245,197,24,.15), rgba(139,69,19,.25));
	border:1px solid rgba(245,197,24,.25); border-radius:18px; padding:2rem;
}
.cta-banner h2{ margin:0 0 .35rem; }
@media (max-width: 720px){ .cta-banner{ grid-template-columns:1fr; text-align:center; } }

.section--alt{ background: rgba(255,255,255,.02); }

/* ============== Mariachi profile public extra ============== */
.musico-gallery{
	display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap:.75rem; margin-top:.75rem;
}
.musico-gallery a{ display:block; aspect-ratio:1; border-radius:10px; overflow:hidden; background:#1c1c24; }
.musico-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.musico-gallery a:hover img{ transform:scale(1.05); }
.musico-videos{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; margin-top:.75rem; }
.musico-videos iframe, .musico-videos video{ width:100%; aspect-ratio:16/9; border-radius:10px; border:0; background:#000; }

.stars{ color:#f5c518; letter-spacing:.05em; }
.stars .muted-star{ color:#444; }
.review{
	border-top:1px solid rgba(255,255,255,.08); padding:1rem 0;
}
.review:first-of-type{ border-top:0; }
.review__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.review__name{ font-weight:600; }
.review__date{ color:#94a3b8; font-size:.8rem; }

.badge--busy{ background:#ef4444; color:#fff; }
.badge--ok{ background:#22c55e; color:#0b0b0e; }

.mariachis-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:1.25rem; }