/* ==========================================================================
   Clube SMK — Páginas Sobre nós e Contato
   ========================================================================== */

/* ===================== SOBRE NÓS ===================== */
.csmk-about { overflow: hidden; }

/* Hero */
.csmk-about__hero { position: relative; padding-block: clamp(3rem, 8vw, 6rem); overflow: hidden; text-align: center; }
.csmk-about__hero-glow {
	position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
	width: 80vw; max-width: 820px; aspect-ratio: 1/1;
	background: radial-gradient(circle, rgba(254,92,0,0.38), transparent 62%);
	filter: blur(20px); pointer-events: none;
}
.csmk-about__hero-inner { position: relative; max-width: 760px; margin-inline: auto; }
.csmk-about__title { font-size: var(--fs-56); line-height: 1.05; margin: var(--s-3) 0 var(--s-4); }
.csmk-about__title .accent { color: #ff8b4d; }
.csmk-about__lead { font-size: var(--fs-18); color: var(--dark-text-soft); margin-bottom: var(--s-6); }
.csmk-about__hero-cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* História */
.csmk-about__story-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .csmk-about__story-grid { grid-template-columns: 1fr; } }
.csmk-about__story-text .csmk-section__title { margin: var(--s-2) 0 var(--s-4); }
.csmk-about__story-text p { color: var(--text-soft); margin-bottom: var(--s-4); line-height: 1.7; }
.csmk-about__checklist { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.csmk-about__checklist li { display: flex; align-items: center; gap: var(--s-3); font-weight: var(--fw-med); }
.csmk-about__checklist svg { color: var(--c-purple); flex-shrink: 0; }

.csmk-about__story-media {
	position: relative; overflow: hidden;
	border-radius: var(--r-xl);
	background: linear-gradient(135deg, #1a0d00 0%, #b34400 55%, #fe5c00 100%);
	min-height: 340px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4);
	padding: var(--s-10);
	box-shadow: var(--sh-3);
}
.csmk-about__media-glow { position: absolute; top: -20%; right: -10%; width: 60%; aspect-ratio: 1/1; background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 60%); }
.csmk-about__media-logo { position: relative; width: min(70%, 260px); height: auto; }
.csmk-about__media-tag { position: relative; color: rgba(255,255,255,0.9); font-size: var(--fs-13); font-weight: var(--fw-semi); letter-spacing: 0.04em; }

/* Valores */
.csmk-about__values { background: var(--bg-soft); }
.csmk-about__values-head { justify-content: center; text-align: center; margin-bottom: var(--s-8); }
.csmk-about__values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .csmk-about__values-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .csmk-about__values-grid { grid-template-columns: 1fr; } }
.csmk-about__value { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); transition: transform var(--t), box-shadow var(--t), border-color var(--t-fast); }
.csmk-about__value:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--c-purple); }
.csmk-about__value-icon { display: inline-flex; width: 52px; height: 52px; border-radius: var(--r); background: var(--c-purple-050); color: var(--c-purple); align-items: center; justify-content: center; margin-bottom: var(--s-4); }
.csmk-about__value h3 { font-size: var(--fs-18); margin-bottom: var(--s-2); }
.csmk-about__value p { color: var(--text-soft); font-size: var(--fs-14); line-height: 1.6; }

/* CTA + stats */
.csmk-about__cta { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem); }
.csmk-about__cta-glow { position: absolute; bottom: -40%; right: -5%; width: 50vw; max-width: 620px; aspect-ratio: 1/1; background: radial-gradient(circle, rgba(254,92,0,0.4), transparent 60%); filter: blur(10px); }
.csmk-about__stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); list-style: none; padding: 0; margin: 0 0 var(--s-12); border-bottom: 1px solid var(--dark-border); padding-bottom: var(--s-10); }
@media (max-width: 700px) { .csmk-about__stats { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.csmk-about__stats li { display: flex; flex-direction: column; gap: var(--s-1); text-align: center; }
.csmk-about__stats strong { font-family: var(--font-display); font-size: var(--fs-40); line-height: 1; color: #ff8b4d; }
.csmk-about__stats span { font-size: var(--fs-13); color: var(--dark-text-soft); }
.csmk-about__cta-box { position: relative; text-align: center; max-width: 620px; margin-inline: auto; }
.csmk-about__cta-box h2 { font-size: var(--fs-32); margin-bottom: var(--s-3); }
.csmk-about__cta-box p { color: var(--dark-text-soft); margin-bottom: var(--s-6); }

/* ===================== CONTATO ===================== */
.csmk-contact { padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
.csmk-contact__header { max-width: 640px; margin-bottom: var(--s-8); }
.csmk-contact__header .csmk-page__title { margin: var(--s-2) 0 var(--s-3); }
.csmk-contact__lead { color: var(--text-soft); font-size: var(--fs-18); }

.csmk-contact__layout { display: grid; grid-template-columns: 360px 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
@media (max-width: 860px) { .csmk-contact__layout { grid-template-columns: 1fr; } }

/* Cartões de canal */
.csmk-contact__info { display: flex; flex-direction: column; gap: var(--s-3); }
.csmk-contact__card { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t), transform var(--t-fast); }
a.csmk-contact__card:hover { border-color: var(--c-purple); box-shadow: var(--sh-1); transform: translateY(-2px); }
.csmk-contact__card-icon { flex-shrink: 0; width: 50px; height: 50px; border-radius: var(--r); background: var(--c-purple-050); color: var(--c-purple); display: flex; align-items: center; justify-content: center; }
.csmk-contact__card-body { display: flex; flex-direction: column; min-width: 0; }
.csmk-contact__card-body strong { font-size: var(--fs-15, 0.95rem); }
.csmk-contact__card-body span { font-size: var(--fs-14); color: var(--text-soft); word-break: break-word; }
.csmk-contact__card-arrow { margin-left: auto; color: var(--text-faint); }
a.csmk-contact__card:hover .csmk-contact__card-arrow { color: var(--c-purple); }
.csmk-contact__card--wa { background: #0c0a12; border-color: #0c0a12; color: #fff; }
.csmk-contact__card--wa .csmk-contact__card-icon { background: #25d366; color: #fff; }
.csmk-contact__card--wa .csmk-contact__card-body span { color: rgba(255,255,255,0.7); }
.csmk-contact__card--wa .csmk-contact__card-arrow { color: rgba(255,255,255,0.6); }
.csmk-contact__card--wa:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }

/* Formulário */
.csmk-contact__form-wrap { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 2.5rem); }
.csmk-contact__form-title { font-size: var(--fs-24); margin-bottom: var(--s-5); }
.csmk-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 560px) { .csmk-contact__row { grid-template-columns: 1fr; } }
.csmk-contact__form .csmk-field label { display: block; font-size: var(--fs-13); font-weight: var(--fw-semi); margin-bottom: var(--s-2); }
.csmk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.csmk-contact__submit { width: 100%; margin-top: var(--s-2); }
.csmk-contact__feedback { padding: var(--s-3) var(--s-4); border-radius: var(--r); margin-bottom: var(--s-4); font-size: var(--fs-14); font-weight: var(--fw-med); }
.csmk-contact__feedback.is-success { background: var(--success-bg); color: var(--success); }
.csmk-contact__feedback.is-error { background: var(--error-bg); color: var(--error); }

/* Mapa */
.csmk-contact__map { margin-top: clamp(1rem, 3vw, 2rem); }
.csmk-contact__map iframe { display: block; width: 100%; height: 380px; border: 0; filter: grayscale(0.15); }
@media (max-width: 560px) { .csmk-contact__map iframe { height: 280px; } }