/* ====================================================
   KHRIZ STUDIO TCG & WRESTLING
   mobile.css - ARCHIVO EXCLUSIVO PARA LA VERSIÓN MÓVIL
   
   IMPORTANTE:
   Este archivo está enlazado con:
   media="(hover: none) and (pointer: coarse) and (max-width: 768px)"
   
   Eso significa que:
   - Se activa ÚNICAMENTE en teléfonos móviles táctiles reales.
   - En computadoras de escritorio (Mac / PC) NUNCA se activa,
     incluso si achicas la ventana de tu navegador.
   - NINGÚN cambio aquí modificará la versión desktop.
==================================================== */

/* ----------------------------------------------------
   1. HERO / CABECERA MÓVIL
---------------------------------------------------- */
/* Altura del banner en móvil */
.hero-banner-section {
  min-height: 270px;
}

/* Enfoque de la imagen en móvil: mantiene la vitrina a la derecha */
.hero-banner-bg {
  background-position: right center !important;
}

/* El texto ocupa el 62% izquierdo para no tapar los productos de la derecha */
.hero-banner-content {
  max-width: 62% !important;
}

/* Tamaño de letra del titular en móvil */
.hero-banner-headline {
  font-size: clamp(1.35rem, 5.2vw, 1.85rem);
  line-height: 1.12;
}

/* Subtítulo en móvil */
.hero-banner-subtitle {
  font-size: 0.82rem;
  line-height: 1.35;
}

/* ----------------------------------------------------
   2. AJUSTES ADICIONALES PARA MÓVILES MUY PEQUEÑOS (<= 480px)
---------------------------------------------------- */
@media (max-width: 480px) {
  .hero-banner-section {
    min-height: 245px;
  }
  
  .hero-banner-content {
    max-width: 65% !important;
  }

  .hero-banner-headline {
    font-size: clamp(1.15rem, 5vw, 1.45rem);
  }
}

/* ----------------------------------------------------
   3. BANNER VISÍTANOS MÓVIL
---------------------------------------------------- */
.visitanos-banner {
  min-height: 270px;
}

.visitanos-banner-bg {
  background-position: right center !important;
}

.visitanos-banner-content {
  max-width: 68% !important;
}

.visitanos-headline {
  font-size: clamp(1.35rem, 5.2vw, 1.85rem);
  line-height: 1.12;
}

.visitanos-subtitle {
  font-size: 0.82rem;
  line-height: 1.35;
}

@media (max-width: 480px) {
  .visitanos-banner {
    min-height: 245px;
  }
  
  .visitanos-banner-content {
    max-width: 72% !important;
  }

  .visitanos-headline {
    font-size: clamp(1.15rem, 5vw, 1.45rem);
  }
}