/* ==========================================================================
   Clube SMK — Home
   ========================================================================== */

.csmk-home { overflow: hidden; }

/* ===== Banner / Carrossel ===== */
.csmk-banner { position: relative; background: var(--bg-soft); }
.csmk-banner__viewport { overflow: hidden; }
.csmk-banner__track { display: flex; transition: transform var(--t-slow) var(--ease-out); will-change: transform; }
.csmk-banner__track.no-anim { transition: none; }
.csmk-banner__slide { position: relative; flex: 0 0 100%; min-width: 100%; }
.csmk-banner__link { display: block; color: inherit; }
.csmk-banner__media { position: relative; aspect-ratio: 2.5 / 1; background: var(--bg-muted); }
@media (max-width: 768px) { .csmk-banner__media { aspect-ratio: 16 / 11; } }
.csmk-banner__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csmk-banner__ph { width: 100%; height: 100%; background: linear-gradient(135deg, #1a0d00, #c44600 70%, #fe5c00); }

/* Conteúdo sobre a imagem */
.csmk-banner__content { position: absolute; inset: 0; display: flex; align-items: center; }
.csmk-banner__content::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.csmk-banner__content .csmk-container { width: 100%; position: relative; z-index: 1; }
.csmk-banner__box { max-width: min(560px, 90%); }
.csmk-banner__eyebrow { display: inline-block; font-family: var(--font-sans); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--s-3); }
.csmk-banner__title { font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.08; margin-bottom: var(--s-3); }
.csmk-banner__desc { font-size: var(--fs-18); margin-bottom: var(--s-5); max-width: 46ch; }
.csmk-banner__btn { margin-top: var(--s-1); }

/* Tema de cor do texto + scrim para legibilidade */
.csmk-banner__slide.is-theme-light .csmk-banner__box { color: #fff; }
.csmk-banner__slide.is-theme-light .csmk-banner__eyebrow { color: #ff8b4d; }
.csmk-banner__slide.is-theme-light .csmk-banner__content::before { background: linear-gradient(90deg, rgba(8,6,12,0.66) 0%, rgba(8,6,12,0.25) 45%, rgba(8,6,12,0) 70%); }
.csmk-banner__slide.is-theme-dark .csmk-banner__box { color: var(--text); }
.csmk-banner__slide.is-theme-dark .csmk-banner__eyebrow { color: var(--c-purple); }
.csmk-banner__slide.is-theme-dark .csmk-banner__content::before { background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0) 70%); }
.csmk-banner__slide.is-align-center .csmk-banner__box { margin-inline: auto; text-align: center; }
.csmk-banner__slide.is-align-center .csmk-banner__desc { margin-inline: auto; }
.csmk-banner__slide.is-align-center .csmk-banner__content::before { background: linear-gradient(0deg, rgba(8,6,12,0.55), rgba(8,6,12,0.15) 60%); }
.csmk-banner__slide.is-align-center.is-theme-dark .csmk-banner__content::before { background: linear-gradient(0deg, rgba(255,255,255,0.7), rgba(255,255,255,0.2) 60%); }
.csmk-banner__slide.is-align-right .csmk-banner__box { margin-left: auto; text-align: right; }
.csmk-banner__slide.is-align-right .csmk-banner__desc { margin-left: auto; }
.csmk-banner__slide.is-align-right.is-theme-light .csmk-banner__content::before { background: linear-gradient(270deg, rgba(8,6,12,0.66) 0%, rgba(8,6,12,0.25) 45%, rgba(8,6,12,0) 70%); }

/* Setas */
.csmk-banner__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; border-radius: 50%;
	background: rgba(255,255,255,0.92); color: #15131a;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--sh-2); z-index: 2;
	transition: background var(--t-fast), transform var(--t-fast);
}
.csmk-banner__nav:hover { background: #fff; color: var(--c-purple); }
.csmk-banner__nav--prev { left: var(--s-5); }
.csmk-banner__nav--next { right: var(--s-5); }
@media (max-width: 768px) { .csmk-banner__nav { display: none; } }

/* Dots */
.csmk-banner__dots { position: absolute; bottom: var(--s-5); left: 50%; transform: translateX(-50%); display: flex; gap: var(--s-2); z-index: 2; }
.csmk-banner__dot { width: 9px; height: 9px; border-radius: var(--r-pill); background: rgba(255,255,255,0.55); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: width var(--t), background var(--t); }
.csmk-banner__dot.is-active { width: 26px; background: var(--c-purple); }

/* ===== Hero ===== */
.csmk-hero { position: relative; padding-block: clamp(3rem, 8vw, 6rem); overflow: hidden; }
.csmk-hero__glow {
	position: absolute; top: -20%; right: -10%;
	width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
	background: radial-gradient(circle, rgba(254,92,0,0.45), transparent 62%);
	filter: blur(20px); pointer-events: none;
}
.csmk-hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-10); align-items: center; }
@media (max-width: 900px) { .csmk-hero__inner { grid-template-columns: 1fr; text-align: center; } }
.csmk-hero__title { font-size: var(--fs-56); line-height: 1.05; margin: var(--s-3) 0 var(--s-4); }
.csmk-hero__title .accent { color: #ff8b4d; }
.csmk-hero__text { font-size: var(--fs-18); color: var(--dark-text-soft); max-width: 52ch; margin-bottom: var(--s-6); }
@media (max-width: 900px) { .csmk-hero__text { margin-inline: auto; } }
.csmk-hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-7); }
@media (max-width: 900px) { .csmk-hero__cta { justify-content: center; } }
.csmk-hero__trust { display: flex; gap: var(--s-5); flex-wrap: wrap; }
@media (max-width: 900px) { .csmk-hero__trust { justify-content: center; } }
.csmk-hero__trust li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-13); color: var(--dark-text-soft); }
.csmk-hero__trust svg { color: #ff8b4d; }
.csmk-hero__visual { display: flex; justify-content: center; }
.csmk-hero__product {
	display: block; width: min(100%, 420px); aspect-ratio: 1/1;
	border-radius: var(--r-xl); overflow: hidden;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: var(--sh-pop);
	transition: transform var(--t-slow) var(--ease);
}
.csmk-hero__product:hover { transform: translateY(-6px) rotate(-1deg); }
.csmk-hero__product img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Faixa de benefícios ===== */
.csmk-benefits-strip { border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.csmk-benefits-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); padding-block: var(--s-6); }
@media (max-width: 900px) { .csmk-benefits-strip__grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }
@media (max-width: 520px) { .csmk-benefits-strip__grid { grid-template-columns: 1fr; } }
.csmk-benefit { display: flex; align-items: center; gap: var(--s-3); }
.csmk-benefit__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--r); background: var(--c-purple-050); color: var(--c-purple); display: flex; align-items: center; justify-content: center; }
.csmk-benefit strong { display: block; font-size: var(--fs-14); }
.csmk-benefit span { font-size: var(--fs-12); color: var(--text-soft); }

/* ===== Categorias ===== */
.csmk-categories__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .csmk-categories__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } }
.csmk-cat-card {
	position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
	background: var(--bg-soft); border: 1px solid var(--border);
	transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t-fast);
}
.csmk-cat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--c-purple); }
.csmk-cat-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-muted); }
.csmk-cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.csmk-cat-card:hover .csmk-cat-card__media img { transform: scale(1.06); }
.csmk-cat-card__media--ph { background: var(--c-black); }
.csmk-cat-card__ph {
	position: relative;
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	background: linear-gradient(135deg, #5a2200 0%, #c44600 45%, #fe5c00 100%);
}
.csmk-cat-card__ph::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(circle at 75% 20%, rgba(255,255,255,0.22), transparent 55%);
}
.csmk-cat-card__ph--1 { background: linear-gradient(135deg, #3a1500 0%, #e85100 55%, #ff8b4d 100%); }
.csmk-cat-card__ph--2 { background: linear-gradient(135deg, #7a3000 0%, #fe5c00 60%, #ffbf99 100%); }
.csmk-cat-card__ph--3 { background: linear-gradient(135deg, #1a0d00 0%, #b34400 50%, #fe5c00 100%); }
.csmk-cat-card__initial {
	position: relative;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: clamp(2.5rem, 6vw, 4rem);
	color: #fff;
	letter-spacing: -0.02em;
	text-shadow: 0 4px 20px rgba(0,0,0,0.25);
	line-height: 1;
}
.csmk-cat-card__phicon {
	position: absolute; bottom: 12px; right: 12px;
	color: rgba(255,255,255,0.55);
}
.csmk-cat-card:hover .csmk-cat-card__ph::before { background: radial-gradient(circle at 75% 20%, rgba(255,255,255,0.32), transparent 55%); }
.csmk-cat-card__body { padding: var(--s-4); }
.csmk-cat-card__name { display: block; font-weight: var(--fw-semi); font-size: var(--fs-15, 0.95rem); }
.csmk-cat-card__count { font-size: var(--fs-12); color: var(--text-faint); }

/* ===== Linhas de produtos ===== */
.csmk-home-row .csmk-products { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .csmk-home-row .csmk-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .csmk-home-row .csmk-products { grid-template-columns: repeat(2, 1fr); } }

/* ===== Banner promo ===== */
.csmk-promo { position: relative; padding-block: clamp(3rem, 7vw, 5rem); overflow: hidden; }
.csmk-promo__glow {
	position: absolute; bottom: -40%; left: -5%;
	width: 50vw; height: 50vw; max-width: 600px; max-height: 600px;
	background: radial-gradient(circle, rgba(254,92,0,0.4), transparent 60%);
	filter: blur(10px); pointer-events: none;
}
.csmk-promo__inner { position: relative; max-width: 720px; }
.csmk-promo__title { font-size: var(--fs-40); line-height: 1.1; margin: var(--s-3) 0 var(--s-4); }
.csmk-promo__title .accent { color: #ff8b4d; }
.csmk-promo__text { color: var(--dark-text-soft); font-size: var(--fs-18); margin-bottom: var(--s-6); }

/* ===== Newsletter (card contido) ===== */
.csmk-newsletter { padding-block: clamp(2.5rem, 6vw, 4rem); }
.csmk-newsletter__card {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
	background: linear-gradient(135deg, #151221 0%, #1d1830 100%);
	border: 1px solid var(--dark-border);
	border-radius: var(--r-xl);
	padding: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 760px) { .csmk-newsletter__card { grid-template-columns: 1fr; gap: var(--s-5); text-align: center; } }
.csmk-newsletter__glow { position: absolute; top: -40%; right: -5%; width: 45%; aspect-ratio: 1/1; background: radial-gradient(circle, rgba(254,92,0,0.35), transparent 60%); filter: blur(12px); pointer-events: none; }
.csmk-newsletter__text { position: relative; }
.csmk-newsletter__title { font-size: var(--fs-28); line-height: var(--lh-tight); margin: var(--s-2) 0 var(--s-2); }
.csmk-newsletter__text p { color: var(--dark-text-soft); margin: 0; }
.csmk-newsletter__action { position: relative; }
.csmk-newsletter__form { display: flex; gap: var(--s-2); }
.csmk-newsletter__form input { flex: 1; min-width: 0; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: #fff; }
.csmk-newsletter__form input::placeholder { color: var(--dark-text-soft); }
.csmk-newsletter__form input:focus { background: rgba(255,255,255,0.1); border-color: var(--c-purple); box-shadow: 0 0 0 3px rgba(254,92,0,0.25); }
.csmk-newsletter__note { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-12); color: var(--dark-text-faint, #8b8499); margin-top: var(--s-3); }
.csmk-newsletter__note svg { color: var(--success); }
@media (max-width: 760px) { .csmk-newsletter__form, .csmk-newsletter__note { justify-content: center; } }
@media (max-width: 480px) { .csmk-newsletter__form { flex-direction: column; } }