/* ==========================================================================
   NAMASTÉ - RESPONSIVE DESIGN & MOBILE FIRST OPTIMIZATIONS
   ========================================================================== */

/* --- Mobile Bottom Navigation --- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-nav-height);
  background-color: rgba(239, 232, 220, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-subtle);
  z-index: 150;
  padding: 0 1rem;
}

.mobile-nav-items {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  list-style: none;
}

.mobile-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  transition: color var(--transition-fast);
  padding: 0.35rem 0.5rem;
}

.mobile-nav-btn svg {
  width: 22px;
  height: 22px;
}

.mobile-nav-btn.active,
.mobile-nav-btn:hover {
  color: var(--terracotta);
}

/* --- Media Queries (Tablet & Desktop Small) --- */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-visual {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  .philosophy-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plans-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

  .pricing-card.recommended {
    transform: none;
  }

  .pricing-card.recommended:hover {
    transform: translateY(-4px);
  }

  /* Beneficios en modo horizontal deslizable */
  .benefits-section {
    padding-top: 2rem !important;
    padding-bottom: 0.9rem !important;
  }

  .steps-section {
    padding-top: 1.15rem !important;
    padding-bottom: 2.25rem !important;
  }

  .benefits-header {
    margin-bottom: 1.15rem !important;
  }

  .benefits-title {
    font-size: clamp(1.2rem, 5.2vw, 1.8rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.015em !important;
  }

  .benefits-subtitle {
    max-width: 320px !important;
    margin: 0.35rem auto 0 auto !important;
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  .benefits-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.85rem !important;
    padding: 0.25rem 0.5rem 0.85rem 0.25rem !important;
    max-width: 100% !important;
    margin: 0 !important;
    scrollbar-width: none !important;
  }

  .benefits-grid::-webkit-scrollbar {
    display: none !important;
  }

  .benefit-card {
    flex: 0 0 82% !important;
    min-width: 260px !important;
    max-width: 310px !important;
    padding: 1.35rem 1.25rem !important;
    border-radius: var(--radius-md) !important;
    gap: 0.75rem !important;
    scroll-snap-align: start !important;
  }

  .benefit-card h3 {
    font-size: 1.05rem !important;
  }

  .benefit-card p {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
  }

  .benefits-slider-hint {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0.2rem !important;
  }

  .benefits-drag-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--terracotta);
    opacity: 0.85;
    letter-spacing: 0.04em;
  }

  /* Reseñas / Testimonios Comprimido & Deslizable */
  .testimonials-section {
    padding-top: 2rem !important;
    padding-bottom: 2.25rem !important;
  }

  .testimonials-header {
    margin-bottom: 1.15rem !important;
  }

  .testimonials-title {
    font-size: clamp(1.2rem, 5.2vw, 1.8rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.015em !important;
  }

  .testimonials-subtitle {
    max-width: 320px !important;
    margin: 0.35rem auto 0 auto !important;
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  .testimonials-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.85rem !important;
    padding: 0.25rem 0.5rem 0.85rem 0.25rem !important;
    max-width: 100% !important;
    margin: 0 !important;
    scrollbar-width: none !important;
  }

  .testimonials-grid::-webkit-scrollbar {
    display: none !important;
  }

  .testimonial-card {
    flex: 0 0 82% !important;
    min-width: 260px !important;
    max-width: 310px !important;
    padding: 1.25rem 1.15rem !important;
    border-radius: var(--radius-md) !important;
    gap: 0.75rem !important;
    scroll-snap-align: start !important;
  }

  .testimonial-quote {
    font-size: 0.94rem !important;
    line-height: 1.48 !important;
  }

  .testimonial-author {
    padding-top: 0.65rem !important;
  }

  .testimonials-slider-hint {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0.2rem !important;
  }

  .testimonials-drag-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--terracotta);
    opacity: 0.85;
    letter-spacing: 0.04em;
  }

  .footer-compact-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .footer-brand-compact {
    justify-content: center;
  }

  .footer-nav-compact {
    justify-content: center;
    gap: 1rem;
  }

  .footer-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  .footer-copyright-text {
    white-space: nowrap !important;
    font-size: clamp(0.66rem, 2.75vw, 0.82rem) !important;
    line-height: 1.3 !important;
    display: block !important;
  }

  .footer-dev {
    font-size: 0.76rem !important;
    display: block !important;
  }

  .sanctuary-banner-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* FAQ Acordeón Comprimido (Preguntas en 1 solo renglón, respuestas concisas) */
  .faq-container {
    gap: 0.65rem !important;
  }

  .faq-trigger {
    padding: 1rem 1.15rem !important;
    gap: 0.65rem !important;
  }

  .faq-trigger h4 {
    font-size: clamp(0.82rem, 3.4vw, 0.95rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
  }

  .faq-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .faq-item.open .faq-content {
    padding: 0 1.15rem 1.15rem 1.15rem !important;
  }

  .faq-content p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
}

/* --- Media Queries (Mobile & Phablet) --- */
@media (max-width: 768px) {
  /* 1. Eliminar apartado de arriba en celulares */
  .top-bar {
    display: none !important;
  }

  .nav-links {
    display: none !important;
  }

  /* 2. Header reducido con menú hamburguesa */
  .site-header {
    height: 56px !important;
    padding: 0.35rem 0 !important;
  }

  .brand-logo {
    gap: 0.55rem;
  }

  .brand-icon-img {
    width: 36px !important;
    height: 36px !important;
  }

  .brand-title {
    font-size: 1.18rem !important;
    letter-spacing: 0.14em !important;
  }

  .brand-tagline {
    font-size: 0.52rem !important;
    letter-spacing: 0.18em !important;
  }

  .header-actions #nav-btn-start,
  .header-actions #nav-btn-login {
    display: none !important;
  }

  .hamburger-btn {
    display: flex !important;
  }

  /* 3. Hero visible en pantallazo inicial con imagen difuminada en el fondo */
  .hero-section {
    min-height: calc(100svh - 60px) !important;
    min-height: calc(100dvh - 60px) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 1.5rem 0 1.25rem 0 !important;
    background-color: #FAF8F5 !important;
    box-sizing: border-box !important;
  }

  .hero-section::before,
  .hero-section::after {
    display: none !important;
  }

  .hero-bg-mobile {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .hero-bg-mobile-img {
    position: absolute !important;
    top: -5% !important;
    left: -5% !important;
    width: 110% !important;
    height: 110% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    filter: blur(0.8px) brightness(0.98) saturate(1.02) !important;
    opacity: 0.54 !important;
    transform: scale(1.04) !important;
  }

  .hero-bg-mobile-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(250, 248, 245, 0.60) 0%,
      rgba(250, 248, 245, 0.28) 32%,
      rgba(250, 248, 245, 0.55) 70%,
      rgba(250, 248, 245, 0.90) 100%
    ) !important;
  }

  .hero-grid {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-header-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    padding-top: clamp(4.5rem, 13vh, 6.5rem) !important;
    box-sizing: border-box !important;
  }

  .hero-emblem-badge {
    align-self: center !important;
    margin: 0 auto 0.25rem auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    gap: 0.45rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-emblem-img {
    width: 20px !important;
    height: 20px !important;
  }

  .hero-emblem-text {
    font-size: 0.74rem !important;
    letter-spacing: 0.14em !important;
    color: var(--terracotta) !important;
    font-weight: 600 !important;
  }

  .hero-title {
    font-size: clamp(1.75rem, 7.8vw, 2.35rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 0.2rem !important;
    text-align: center !important;
  }

  .hero-title-line-1 {
    display: block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
  }

  .hero-title-line-2 {
    display: block !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .hero-title-line-2 em {
    white-space: nowrap !important;
  }

  .hero-description {
    font-size: 0.94rem !important;
    line-height: 1.55 !important;
    color: var(--text-secondary);
    margin: 0 auto !important;
    max-width: 92% !important;
    text-align: center !important;
  }

  /* Bloque inferior de acciones: botón Comenzar en la parte inferior y datos de confianza */
  .hero-actions-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 1rem !important;
  }

  /* 6. Solo botón comenzar */
  .hero-ctas {
    width: 100% !important;
    margin-top: 0 !important;
  }

  .hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.85rem 1.4rem !important;
    font-size: 1.05rem !important;
  }

  /* 4. Tarjetas horizontales de datos reales (ambas en 1 solo renglón, arriba del botón) */
  .hero-trust-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }

  .trust-card {
    padding: 0.65rem 0.45rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    justify-content: center !important;
    gap: 0.2rem !important;
  }

  .trust-number {
    font-size: clamp(0.9rem, 3.4vw, 1.15rem) !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
  }

  .trust-label {
    font-size: clamp(0.55rem, 2.1vw, 0.65rem) !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  /* Ocultar bloque visual extra para mantener el pantallazo inicial limpio */
  .hero-visual {
    display: none !important;
  }

  /* Frase Diaria Móvil (Tarjeta Destacada Estética & Cálida) */
  .daily-quote-section {
    padding: 2.2rem 1.15rem !important;
    width: 100% !important;
  }

  .daily-quote-container {
    padding: 0 !important;
    width: 100% !important;
  }

  .daily-quote-inner {
    padding: 1.85rem 1.15rem 1.5rem 1.15rem !important;
    border-radius: 20px !important;
    gap: 0.75rem !important;
    border: 1.5px solid rgba(182, 94, 66, 0.30) !important;
    box-shadow: 0 10px 30px -6px rgba(182, 94, 66, 0.13), 0 3px 12px rgba(43, 35, 29, 0.04) !important;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(253, 248, 242, 0.94) 100%) !important;
  }

  .daily-quote-bg-img {
    opacity: 0.28 !important;
  }

  .daily-quote-watermark {
    font-size: 5.5rem !important;
    top: -0.8rem !important;
    opacity: 0.07 !important;
  }

  .daily-quote-header {
    padding: 0.28rem 0.85rem !important;
    background: linear-gradient(135deg, rgba(182, 94, 66, 0.12) 0%, rgba(204, 115, 87, 0.18) 100%) !important;
    border: 1px solid rgba(182, 94, 66, 0.32) !important;
    box-shadow: 0 2px 8px rgba(182, 94, 66, 0.08) !important;
  }

  .daily-quote-label {
    font-size: 0.66rem !important;
    letter-spacing: 0.15em !important;
    color: var(--terracotta-dark) !important;
  }

  .daily-quote-phrase {
    font-size: clamp(1.22rem, 5vw, 1.42rem) !important;
    line-height: 1.42 !important;
    margin: 0.15rem 0 0.1rem 0 !important;
    max-width: 95% !important;
    color: var(--text-primary) !important;
  }

  .daily-quote-author {
    font-size: 0.76rem !important;
    letter-spacing: 0.10em !important;
    color: var(--terracotta-dark) !important;
    margin-top: 0.35rem !important;
    padding-top: 0.65rem !important;
  }

  /* Nuestra Esencia Móvil (Sin Fondo, Sin Tarjeta, Editorial Premium) */
  .philosophy-section {
    padding: 2.8rem 1.25rem !important;
    background-color: var(--bg-canvas-alt) !important;
  }

  .philosophy-content {
    max-width: 100% !important;
  }

  .philosophy-title {
    font-size: clamp(1.85rem, 6.5vw, 2.3rem) !important;
    margin-bottom: 0.6rem !important;
  }

  .philosophy-divider {
    width: 36px !important;
    height: 1.5px !important;
    margin: 0 auto 1rem auto !important;
  }

  .philosophy-text {
    font-size: 0.98rem !important;
    line-height: 1.68 !important;
  }

  /* Cómo Funciona / Paso a Paso Móvil */
  .benefits-section {
    padding-top: 1.85rem !important;
    padding-bottom: 0.85rem !important;
  }

  .steps-section {
    padding-top: 1.15rem !important;
    padding-bottom: 2.25rem !important;
  }

  .steps-section .section-header {
    margin-bottom: 1.25rem !important;
  }

  .steps-section .eyebrow {
    margin-bottom: 0.45rem !important;
  }

  .steps-title {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.015em !important;
  }

  .steps-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.85rem !important;
    padding: 0.25rem 0.5rem 0.85rem 0.25rem !important;
    max-width: 100% !important;
    margin: 0 !important;
    scrollbar-width: none !important;
  }

  .steps-grid::-webkit-scrollbar {
    display: none !important;
  }

  .step-card {
    flex: 0 0 82% !important;
    min-width: 260px !important;
    max-width: 310px !important;
    padding: 1.4rem 1.3rem !important;
    border-radius: var(--radius-md) !important;
    gap: 0.75rem !important;
    scroll-snap-align: start !important;
  }

  .step-card h3 {
    font-size: 1.05rem !important;
  }

  .step-card p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  .steps-slider-hint {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0.2rem !important;
  }

  .steps-drag-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--terracotta);
    opacity: 0.85;
    letter-spacing: 0.04em;
  }

  /* Planes y Membresías Móvil */
  .plans-section {
    padding: 2.25rem 0 2.5rem 0 !important;
  }

  .plans-header {
    margin-bottom: 1.5rem !important;
  }

  .plans-title {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    line-height: 1.2 !important;
  }

  .billing-switcher-container {
    margin-top: 1.15rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  .billing-switcher {
    padding: 3px !important;
    margin: 0 auto !important;
    display: inline-flex !important;
    justify-content: center !important;
  }

  .billing-switch-btn {
    padding: 0.45rem 1.35rem !important;
    font-size: 0.84rem !important;
    min-width: 95px !important;
    text-align: center !important;
  }

  /* Carrusel Horizontal de Planes Móvil (Deslizable como las reseñas) */
  .plans-slider-wrap {
    position: relative !important;
    width: 100% !important;
  }

  .plans-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.85rem !important;
    padding: 0.85rem 0.5rem 1.25rem 0.5rem !important;
    max-width: 100% !important;
    margin: 0 !important;
    scrollbar-width: none !important;
  }

  .plans-grid::-webkit-scrollbar {
    display: none !important;
  }

  .pricing-card {
    flex: 0 0 84% !important;
    min-width: 270px !important;
    max-width: 320px !important;
    padding: 1.65rem 1.4rem !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(199, 107, 78, 0.25) !important;
    box-shadow: 0 10px 30px rgba(44, 38, 35, 0.1), 0 2px 8px rgba(44, 38, 35, 0.04) !important;
    scroll-snap-align: start !important;
  }

  .pricing-card.recommended {
    border: 2.5px solid var(--terracotta) !important;
    box-shadow: 0 14px 40px rgba(199, 107, 78, 0.25), 0 4px 12px rgba(199, 107, 78, 0.1) !important;
  }

  .plans-slider-hint {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0.25rem !important;
  }

  .plans-drag-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--terracotta);
    opacity: 0.85;
    letter-spacing: 0.04em;
  }

  .pricing-desc {
    min-height: auto !important;
    font-size: 0.82rem !important;
    margin-bottom: 0.5rem !important;
  }

  .pricing-amount {
    font-size: 2.2rem !important;
  }

  .pricing-features-list {
    gap: 0.45rem !important;
    margin-bottom: 1.15rem !important;
  }

  .pricing-feature-item {
    font-size: 0.84rem !important;
  }

  .classes-catalog-grid {
    grid-template-columns: 1fr;
  }

  .hero-floating-quote {
    position: static;
    margin-top: 1rem;
    max-width: 100%;
  }

  .filter-row-top {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-search-box {
    width: 100%;
  }

  .filter-tabs {
    overflow-x: auto;
    padding-bottom: 0.4rem;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .filter-tab-pill {
    white-space: nowrap;
  }

  .resume-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .resume-right {
    width: 100%;
  }

  .resume-right .btn {
    width: 100%;
  }

  /* Reproductor Inmersivo de Video / Detalle de Clase Móvil */
  .player-modal-backdrop {
    padding: 0 !important;
  }

  .player-modal-dialog {
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  .player-video-wrapper {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 40vh !important;
    flex-shrink: 0 !important;
  }

  .player-video-wrapper video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .player-close-floating {
    top: 0.75rem !important;
    right: 0.75rem !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
  }

  .player-details-scroll {
    padding: 0.95rem 0.85rem 3.5rem 0.85rem !important;
    gap: 0.7rem !important;
    background-color: var(--bg-surface) !important;
  }

  .player-meta-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.25rem !important;
  }

  .player-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    margin-bottom: 0.1rem !important;
  }

  .player-tags .player-meta-pill {
    padding: 0.18rem 0.55rem !important;
    font-size: 0.7rem !important;
  }

  .player-class-main-title {
    font-size: clamp(1.1rem, 4.8vw, 1.3rem) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }

  .player-compact-controls-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
    padding: 0.45rem 0.6rem !important;
    margin-top: 0.15rem !important;
  }

  .player-playback-group {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .btn-complete-practice {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.42rem 0.75rem !important;
    font-size: 0.8rem !important;
  }

  .player-description-text {
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
  }

  .player-specs-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .player-props-box {
    padding: 0.75rem 0.85rem !important;
  }

  .player-music-section {
    padding-top: 0.65rem !important;
  }

  .btn-spotify-playlist {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.82rem !important;
  }

  .footer-compact-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }

  .footer-brand-text {
    justify-content: center;
  }

  /* Header del Panel de Alumno en Móvil */
  .platform-header {
    height: 60px !important;
    padding: 0 0.5rem !important;
  }

  .platform-header-inner {
    padding: 0 !important;
  }

  .platform-nav-left {
    gap: 0.75rem !important;
  }

  .platform-nav-left .platform-links {
    display: none !important;
  }

  .platform-user-panel {
    gap: 0.5rem !important;
  }

  .streak-badge {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.76rem !important;
    gap: 0.3rem !important;
  }

  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: flex !important;
  }

  .platform-hamburger-btn {
    display: flex !important;
    width: 38px !important;
    height: 38px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: var(--radius-sm) !important;
  }

  /* Frase Diaria Móvil en el Panel del Alumno */
  .platform-daily-quote-strip {
    padding: 0.4rem 0.75rem !important;
  }

  .platform-quote-container {
    gap: 0.3rem 0.65rem !important;
  }

  .platform-quote-badge {
    padding: 0.15rem 0.55rem !important;
    font-size: 0.64rem !important;
  }

  .platform-quote-phrase {
    font-size: 0.88rem !important;
    line-height: 1.3 !important;
  }

  .platform-quote-author {
    font-size: 0.72rem !important;
  }

  /* Banner de Bienvenida y Métricas Concisas en Móvil */
  .sanctuary-banner {
    padding: 0.9rem 0 0.8rem 0 !important;
  }

  .sanctuary-banner-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .greeting-title {
    font-size: clamp(1.4rem, 5.5vw, 1.75rem) !important;
    margin-bottom: 0.1rem !important;
  }

  .greeting-subtitle {
    font-size: 0.8rem !important;
    margin-bottom: 0.15rem !important;
  }

  .stats-compact-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.4rem !important;
    margin-top: 0.55rem !important;
  }

  .stat-compact-card {
    padding: 0.45rem 0.3rem !important;
    gap: 0.25rem !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    border-radius: var(--radius-sm) !important;
  }

  .stat-icon-wrap {
    width: 26px !important;
    height: 26px !important;
  }

  .stat-icon-wrap svg {
    width: 13px !important;
    height: 13px !important;
  }

  .stat-compact-info {
    align-items: center !important;
  }

  .stat-compact-info strong {
    font-size: 1.12rem !important;
  }

  .stat-compact-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.02em !important;
  }

  .live-class-card {
    padding: 0.75rem 0.85rem !important;
    gap: 0.45rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    border-radius: var(--radius-md) !important;
  }

  .live-card-title {
    font-size: 0.95rem !important;
  }

  .live-card-meta {
    font-size: 0.74rem !important;
  }

  .btn-live-action {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.78rem !important;
  }

  /* Resume Section en Móvil */
  .resume-section {
    padding: 0.75rem 0 0.25rem 0 !important;
  }

  .resume-card {
    padding: 0.75rem 0.85rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }

  .resume-thumb {
    width: 64px !important;
    height: 42px !important;
  }

  .btn-play-resume {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    padding: 0.45rem 0.8rem !important;
  }

  .platform-quick-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 1.15rem !important;
  }

  .platform-search-clean {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .platform-search-clean .filter-search-input {
    padding: 0.48rem 0.85rem 0.48rem 2.1rem !important;
    font-size: 0.82rem !important;
    text-overflow: ellipsis !important;
  }

  .btn-filter-trigger {
    padding: 0.48rem 0.8rem !important;
    font-size: 0.8rem !important;
  }

  .filter-popover-menu {
    max-width: calc(100vw - 1.5rem) !important;
    width: 290px !important;
  }

  /* Carruseles Horizontales de Yoga y Meditación en Móvil */
  .classes-section-group {
    margin-bottom: 1.5rem !important;
  }

  .classes-group-header {
    margin-bottom: 0.55rem !important;
  }

  .classes-group-title {
    font-size: 1.2rem !important;
  }

  .group-header-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .classes-group-subtitle {
    font-size: 0.76rem !important;
    white-space: nowrap !important;
  }

  .classes-group-count {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.55rem !important;
  }

  .classes-carousel {
    gap: 0.75rem !important;
    padding: 0.2rem 0.15rem 0.65rem 0.15rem !important;
  }

  .classes-carousel .class-card {
    flex: 0 0 76% !important;
    min-width: 230px !important;
    max-width: 280px !important;
  }

  .class-card-body {
    padding: 0.85rem 0.95rem !important;
    gap: 0.45rem !important;
  }

  .class-card-title {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }

  .class-card-desc {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    min-height: 2.25em !important;
  }

  .class-card-footer {
    padding-top: 0.55rem !important;
    margin-top: 0.4rem !important;
    font-size: 0.78rem !important;
  }

  /* Drawer de Perfil & Membresía Móvil */
  .profile-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }

  .profile-drawer-header {
    padding: 1rem 1.25rem !important;
  }

  .profile-drawer-body {
    padding: 1.15rem !important;
    gap: 1rem !important;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 1.5rem 0 1.25rem 0 !important;
  }

  .hero-content {
    gap: 0 !important;
  }

  .hero-header-block {
    gap: 0.55rem !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    padding-top: clamp(4.5rem, 13vh, 6.5rem) !important;
  }

  .hero-actions-block {
    gap: 0.65rem !important;
    margin-top: auto !important;
    padding-top: 0.75rem !important;
  }

  .hero-title {
    font-size: clamp(1.7rem, 7.8vw, 2.15rem) !important;
    text-align: center !important;
  }

  .modal-backdrop {
    padding: 0.65rem 0.5rem !important;
  }

  .modal-dialog {
    border-radius: var(--radius-lg);
  }

  .modal-body {
    padding: 1.25rem;
  }

  /* Ocultar flechas de carrusel en móvil (swipe táctil nativo) */
  .carousel-arrow {
    display: none !important;
  }

  .progress-stats-summary-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  .toast-container {
    left: 16px;
    right: 16px;
    bottom: calc(var(--mobile-nav-height, 64px) + 12px);
  }

  .namaste-toast {
    max-width: 100%;
    font-size: 0.84rem;
    padding: 0.75rem 1rem;
  }
}