/*
 * ============================================================
 *  KAVALA DAY CLUB — Sistema de Estilos 2026
 *  Basado en: UI/UX Pro Max Skill v2.5.0
 *  Estética: Mediterranean Desert Chic · Premium Relajado
 *  Para implementar en: WordPress + Elementor (CSS adicional)
 * ============================================================
 */

/* ─── 1. FUENTES ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400;1,700&family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600&family=Montserrat:wght@600;700&display=swap');

/* Canela Trial — coloca los archivos en /fonts/  */
/* Descarga: https://commercialtype.com/catalog/canela/canela_trial */
@font-face {
  font-family: 'Canela Trial';
  src: url('fonts/CanelaTrial-Regular.woff2') format('woff2'),
       url('fonts/CanelaTrial-Regular.woff') format('woff'),
       url('fonts/CanelaTrial-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Canela Trial';
  src: url('fonts/CanelaTrial-Light.woff2') format('woff2'),
       url('fonts/CanelaTrial-Light.woff') format('woff'),
       url('fonts/CanelaTrial-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Canela Trial';
  src: url('fonts/CanelaTrial-Bold.woff2') format('woff2'),
       url('fonts/CanelaTrial-Bold.woff') format('woff'),
       url('fonts/CanelaTrial-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── 2. VARIABLES — SISTEMA DE TOKENS ───────────────────── */
:root {
  /* Colores primarios */
  --k-terracotta:         #C96A4A;
  --k-terracotta-deep:    #A8563B;
  --k-terracotta-light:   #DA8A6E;

  /* Superficies */
  --k-cream:              #F5EDE0;
  --k-white:              #FAF7F3;
  --k-sand:               #E8D5B0;
  --k-beige-light:        #F0E4CC;

  /* Textos */
  --k-brown-deep:         #2C1409;
  --k-brown-mid:          #5C3317;
  --k-brown-soft:         #8B5E3C;
  --k-gold-accent:        #C9965A;

  /* Accent agua */
  --k-pool:               #3D9EA8;
  --k-pool-light:         #6CBDC6;

  /* Overlays y gradientes */
  --k-overlay-hero:       rgba(44, 20, 9, 0.62);
  --k-overlay-section:    rgba(201, 106, 74, 0.08);
  --k-gradient-cta:       linear-gradient(135deg, #C96A4A 0%, #A8563B 100%);
  --k-gradient-hero:      linear-gradient(180deg, transparent 30%, rgba(44,20,9,0.85) 100%);
  --k-gradient-warm:      linear-gradient(135deg, #FAF7F3 0%, #E8D5B0 100%);

  /* Tipografías */
  --k-font-display:       'Canela Trial', 'Playfair Display', Georgia, serif;
  --k-font-heading:       'Cormorant Garamond', Georgia, serif;
  --k-font-body:          'Inter', -apple-system, sans-serif;
  --k-font-label:         'Montserrat', sans-serif;

  /* Escalas tipográficas — Desktop */
  --k-size-display:       clamp(38px, 6vw, 80px);
  --k-size-h1:            clamp(32px, 4.5vw, 60px);
  --k-size-h2:            clamp(26px, 3.5vw, 44px);
  --k-size-h3:            clamp(20px, 2.5vw, 32px);
  --k-size-h4:            20px;
  --k-size-body-lg:       18px;
  --k-size-body:          16px;
  --k-size-body-sm:       14px;
  --k-size-label:         12px;
  --k-size-button:        14px;

  /* Line heights */
  --k-lh-display:         1.1;
  --k-lh-heading:         1.25;
  --k-lh-body:            1.65;

  /* Letter spacing */
  --k-ls-display:         -0.02em;
  --k-ls-heading:         -0.01em;
  --k-ls-label:            0.12em;
  --k-ls-button:           0.08em;

  /* Espaciado */
  --k-space-1:   8px;
  --k-space-2:  16px;
  --k-space-3:  24px;
  --k-space-4:  32px;
  --k-space-5:  48px;
  --k-space-6:  64px;
  --k-space-7:  80px;
  --k-space-8:  96px;
  --k-space-9: 120px;

  /* Border radius */
  --k-radius-sm:   4px;
  --k-radius-md:   8px;
  --k-radius-lg:  16px;
  --k-radius-pill: 50px;

  /* Sombras */
  --k-shadow-card:   0 4px 24px rgba(44, 20, 9, 0.10);
  --k-shadow-card-h: 0 16px 40px rgba(44, 20, 9, 0.18);
  --k-shadow-cta:    0 4px 16px rgba(201, 106, 74, 0.35);
  --k-shadow-cta-h:  0 6px 24px rgba(201, 106, 74, 0.50);

  /* Transiciones */
  --k-transition:        all 0.25s ease;
  --k-transition-slow:   all 0.40s ease;
}

/* ─── 3. RESET Y BASE ────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Solo aplicar al contenido de la página Kavala */
/* En WordPress, usar el ID de la página: .page-id-XXX */
.kavala-page {
  font-family: var(--k-font-body);
  font-size: var(--k-size-body);
  line-height: var(--k-lh-body);
  color: var(--k-brown-mid);
  background-color: var(--k-cream);
  -webkit-font-smoothing: antialiased;
}

/* ─── 4. CONTENEDOR ──────────────────────────────────────── */
.k-container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--k-space-4);
  padding-right: var(--k-space-4);
}

.k-container--narrow {
  max-width: 860px;
}

@media (max-width: 768px) {
  .k-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ─── 5. TIPOGRAFÍA ──────────────────────────────────────── */
.k-label {
  font-family: var(--k-font-label);
  font-size: var(--k-size-label);
  font-weight: 700;
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  color: var(--k-gold-accent);
  display: block;
  margin-bottom: var(--k-space-2);
}

.k-display {
  font-family: var(--k-font-display);
  font-size: var(--k-size-display);
  font-weight: 700;
  line-height: var(--k-lh-display);
  letter-spacing: var(--k-ls-display);
  color: var(--k-white);
}

.k-h1 {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h1);
  font-weight: 700;
  line-height: var(--k-lh-display);
  letter-spacing: var(--k-ls-display);
  color: var(--k-brown-deep);
}

.k-h2 {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h2);
  font-weight: 700;
  line-height: var(--k-lh-heading);
  letter-spacing: var(--k-ls-heading);
  color: var(--k-brown-deep);
  margin-bottom: var(--k-space-3);
}

.k-h3 {
  font-family: var(--k-font-heading);
  font-size: var(--k-size-h3);
  font-weight: 600;
  line-height: var(--k-lh-heading);
  color: var(--k-brown-deep);
  margin-bottom: var(--k-space-2);
}

.k-body-lg {
  font-family: var(--k-font-body);
  font-size: var(--k-size-body-lg);
  line-height: var(--k-lh-body);
  color: var(--k-brown-mid);
  max-width: 65ch;
}

.k-text-white  { color: var(--k-white); }
.k-text-center { text-align: center; }
.k-text-center .k-body-lg { margin-left: auto; margin-right: auto; }

/* ─── 6. BOTONES ─────────────────────────────────────────── */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-1);
  font-family: var(--k-font-label);
  font-size: var(--k-size-button);
  font-weight: 700;
  letter-spacing: var(--k-ls-button);
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 32px;
  min-height: 52px;
  border-radius: var(--k-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--k-transition);
  white-space: nowrap;
}

/* Primario */
.k-btn--primary {
  background: var(--k-gradient-cta);
  color: var(--k-white);
  box-shadow: var(--k-shadow-cta);
}
.k-btn--primary:hover {
  background: linear-gradient(135deg, #A8563B, #8A3D1E);
  box-shadow: var(--k-shadow-cta-h);
  transform: translateY(-2px);
  color: var(--k-white);
}

/* Secundario / Outline */
.k-btn--secondary {
  background: transparent;
  color: var(--k-terracotta);
  border-color: var(--k-terracotta);
}
.k-btn--secondary:hover {
  background: var(--k-terracotta);
  color: var(--k-white);
}

/* Ghost — sobre fondos oscuros */
.k-btn--ghost {
  background: rgba(253, 250, 246, 0.15);
  color: var(--k-white);
  border-color: rgba(253, 250, 246, 0.6);
  backdrop-filter: blur(8px);
}
.k-btn--ghost:hover {
  background: rgba(253, 250, 246, 0.28);
  border-color: var(--k-white);
}

/* WhatsApp */
.k-btn--whatsapp {
  background: #25D366;
  color: white;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}
.k-btn--whatsapp:hover {
  background: #1DA851;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.50);
  transform: translateY(-2px);
  color: white;
}

/* Full width en mobile */
@media (max-width: 480px) {
  .k-btn { width: 100%; justify-content: center; }
}

/* Grupo de botones */
.k-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-2);
  align-items: center;
}

/* ─── 7. SECCIONES ───────────────────────────────────────── */
.k-section {
  padding-top: var(--k-space-9);
  padding-bottom: var(--k-space-9);
}

.k-section--sm {
  padding-top: var(--k-space-7);
  padding-bottom: var(--k-space-7);
}

@media (max-width: 768px) {
  .k-section      { padding-top: var(--k-space-7); padding-bottom: var(--k-space-7); }
  .k-section--sm  { padding-top: var(--k-space-6); padding-bottom: var(--k-space-6); }
}

/* Variantes de fondo */
.k-bg-cream     { background-color: var(--k-cream); }
.k-bg-white     { background-color: var(--k-white); }
.k-bg-sand      { background-color: var(--k-sand); }
.k-bg-dark      { background-color: var(--k-brown-deep); }
.k-bg-warm      { background: var(--k-gradient-warm); }

/* ─── 8. HERO ────────────────────────────────────────────── */
.k-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.k-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.k-hero__video,
.k-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.k-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--k-overlay-hero);
  z-index: 1;
}

.k-hero__overlay--gradient {
  background: var(--k-gradient-hero);
}

.k-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--k-space-5) var(--k-space-4);
  max-width: 860px;
  margin: 0 auto;
}

.k-hero__badge {
  display: inline-block;
  font-family: var(--k-font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-gold-accent);
  margin-bottom: var(--k-space-3);
  opacity: 0.9;
}

.k-hero__title {
  font-family: var(--k-font-display);
  font-size: var(--k-size-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--k-white);
  margin-bottom: var(--k-space-3);
}

.k-hero__subtitle {
  font-family: var(--k-font-body);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
  color: rgba(253, 250, 246, 0.85);
  margin-bottom: var(--k-space-5);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.k-hero__info-bar {
  margin-top: var(--k-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-3);
  justify-content: center;
  align-items: center;
}

.k-hero__info-item {
  font-family: var(--k-font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253, 250, 246, 0.75);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── 9. HORARIOS BAR ────────────────────────────────────── */
.k-schedule-bar {
  background: var(--k-terracotta);
  padding: var(--k-space-2) var(--k-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-4);
  justify-content: center;
  align-items: center;
}

.k-schedule-item {
  font-family: var(--k-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--k-white);
}

/* ─── 10. FEATURES GRID ──────────────────────────────────── */
.k-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--k-space-3);
  margin-top: var(--k-space-7);
}

@media (max-width: 768px) {
  .k-features-grid { grid-template-columns: repeat(2, 1fr); }
}

.k-feature-card {
  background: var(--k-white);
  border-radius: var(--k-radius-md);
  padding: var(--k-space-4);
  border: 1px solid rgba(200, 160, 100, 0.2);
  transition: var(--k-transition);
  text-align: center;
}

.k-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--k-shadow-card-h);
}

.k-feature-icon {
  font-size: 36px;
  margin-bottom: var(--k-space-2);
  display: block;
}

.k-feature-title {
  font-family: var(--k-font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--k-brown-deep);
  margin-bottom: var(--k-space-1);
}

.k-feature-text {
  font-size: var(--k-size-body-sm);
  color: var(--k-brown-soft);
  line-height: 1.55;
}

/* ─── 11. CARDS DE PAQUETE ───────────────────────────────── */
.k-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--k-space-3);
  margin-top: var(--k-space-6);
}

@media (max-width: 900px) {
  .k-packages-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}

.k-package-card {
  background: rgba(253, 250, 246, 0.12);
  border: 1px solid rgba(253, 250, 246, 0.2);
  border-radius: var(--k-radius-md);
  padding: var(--k-space-5) var(--k-space-4);
  text-align: center;
  backdrop-filter: blur(8px);
  transition: var(--k-transition);
  position: relative;
}

.k-package-card:hover {
  background: rgba(253, 250, 246, 0.20);
  transform: translateY(-4px);
}

.k-package-card--featured {
  border-color: var(--k-terracotta);
  background: rgba(201, 106, 74, 0.15);
}

.k-package-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--k-terracotta);
  color: var(--k-white);
  font-family: var(--k-font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 4px 18px;
  border-radius: var(--k-radius-pill);
  white-space: nowrap;
}

.k-package-icon {
  font-size: 40px;
  margin-bottom: var(--k-space-2);
  display: block;
}

.k-package-title {
  font-family: var(--k-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--k-white);
  margin-bottom: var(--k-space-2);
}

.k-package-text {
  font-size: var(--k-size-body-sm);
  color: rgba(253, 250, 246, 0.78);
  line-height: 1.6;
  margin-bottom: var(--k-space-4);
}

/* ─── 12. SPLIT LAYOUT ───────────────────────────────────── */
.k-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--k-space-7);
  align-items: center;
}

.k-split--reverse { direction: rtl; }
.k-split--reverse > * { direction: ltr; }

@media (max-width: 768px) {
  .k-split { grid-template-columns: 1fr; gap: var(--k-space-5); }
  .k-split--reverse { direction: ltr; }
}

.k-split__image {
  border-radius: var(--k-radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.k-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.k-split__image:hover img {
  transform: scale(1.03);
}

/* ─── 13. CHECKLIST ──────────────────────────────────────── */
.k-checklist {
  list-style: none;
  padding: 0;
  margin: var(--k-space-3) 0 var(--k-space-5);
  display: grid;
  gap: var(--k-space-2);
}

.k-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--k-space-2);
  font-size: var(--k-size-body);
  color: var(--k-brown-mid);
  line-height: 1.5;
}

.k-checklist li::before {
  content: '✓';
  font-family: var(--k-font-label);
  font-weight: 700;
  color: var(--k-gold-accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.k-checklist--white li { color: rgba(253, 250, 246, 0.88); }
.k-checklist--white li::before { color: var(--k-gold-accent); }

/* ─── 14. GALERÍA ────────────────────────────────────────── */
.k-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--k-space-2);
}

@media (max-width: 768px) {
  .k-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

.k-gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--k-radius-sm);
  cursor: pointer;
}

.k-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.k-gallery-item:hover img {
  transform: scale(1.08);
}

/* ─── 15. FAQ ACCORDION ──────────────────────────────────── */
.k-faq-list {
  display: grid;
  gap: var(--k-space-1);
  max-width: 860px;
  margin: var(--k-space-6) auto 0;
}

.k-faq-item {
  border: 1px solid rgba(200, 160, 100, 0.25);
  border-radius: var(--k-radius-sm);
  overflow: hidden;
  background: var(--k-white);
}

.k-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: var(--k-space-3) var(--k-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-3);
  cursor: pointer;
  text-align: left;
  font-family: var(--k-font-body);
  font-size: var(--k-size-body);
  font-weight: 600;
  color: var(--k-brown-deep);
  transition: var(--k-transition);
}

.k-faq-question:hover {
  color: var(--k-terracotta);
}

.k-faq-question::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  color: var(--k-terracotta);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.k-faq-item.open .k-faq-question::after {
  transform: rotate(45deg);
}

.k-faq-answer {
  display: none;
  padding: 0 var(--k-space-4) var(--k-space-4);
  font-size: var(--k-size-body);
  color: var(--k-brown-mid);
  line-height: var(--k-lh-body);
}

.k-faq-item.open .k-faq-answer {
  display: block;
}

/* ─── 16. WHATSAPP STICKY ────────────────────────────────── */
/* Desktop: Botón flotante redondo */
.k-wa-sticky {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 9999;
  background: #25D366;
  color: white;
  border-radius: var(--k-radius-pill);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--k-font-label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  animation: k-pulse-wa 2.5s infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.k-wa-sticky:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.60);
  color: white;
}

.k-wa-sticky__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

@keyframes k-pulse-wa {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45); }
  50%       { box-shadow: 0 4px 32px rgba(37, 211, 102, 0.72); }
}

/* Mobile: Bar sticky full width */
@media (max-width: 768px) {
  .k-wa-sticky {
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 0;
    justify-content: center;
    padding: 16px 24px;
    font-size: 13px;
    animation: none;
  }
  /* Dejar espacio para la barra en el footer */
  body { padding-bottom: 64px; }
}

/* ─── 17. SECCIÓN TAANAH (Cross-sell) ────────────────────── */
.k-taanah-section {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.k-taanah-section__overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 20, 9, 0.70);
  z-index: 1;
}

.k-taanah-section__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: var(--k-space-7) var(--k-space-4);
}

/* ─── 18. CTA FINAL ──────────────────────────────────────── */
.k-cta-final {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.k-cta-final__overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 20, 9, 0.72);
}

.k-cta-final__content {
  position: relative;
  z-index: 2;
  padding: var(--k-space-8) var(--k-space-4);
}

.k-cta-final__microcopy {
  margin-top: var(--k-space-3);
  font-size: var(--k-size-body-sm);
  color: rgba(253, 250, 246, 0.60);
  font-family: var(--k-font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── 19. ANIMACIONES DE SCROLL ──────────────────────────── */
.k-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.k-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.k-animate--delay-1 { transition-delay: 0.1s; }
.k-animate--delay-2 { transition-delay: 0.2s; }
.k-animate--delay-3 { transition-delay: 0.3s; }
.k-animate--delay-4 { transition-delay: 0.4s; }

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .k-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── 20. PASOS / STEPS ──────────────────────────────────── */
.k-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--k-space-3);
  margin: var(--k-space-5) 0;
}

@media (max-width: 768px) {
  .k-steps { grid-template-columns: 1fr; }
}

.k-step {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-2);
}

.k-step__number {
  width: 40px;
  height: 40px;
  background: var(--k-terracotta);
  color: var(--k-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--k-font-label);
  font-weight: 700;
  font-size: 16px;
}

.k-step__text {
  font-size: var(--k-size-body);
  color: var(--k-brown-mid);
  line-height: 1.5;
}

/* ─── 21. RESPONSIVE HELPERS ─────────────────────────────── */
.k-hidden-mobile  { display: block; }
.k-hidden-desktop { display: none; }

@media (max-width: 768px) {
  .k-hidden-mobile  { display: none; }
  .k-hidden-desktop { display: block; }
}