/*==========================================
  SERVICIOS MÓVIL - CR DIGITAL
  Optimización de servicios para móvil
==========================================*/

/*==================== SERVICIOS MÓVIL ====================*/
@media screen and (max-width: 992px) {
  /* Sección servicios - COMPLETAMENTE VISIBLE */
  .services {
    padding: var(--spacing-3xl) 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  .services .container {
    padding: 0 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Header de servicios */
  .section__header {
    text-align: center !important;
    margin-bottom: var(--spacing-xl) !important;
  }
  
  .section__title {
    font-size: var(--font-size-3xl) !important;
    margin-bottom: var(--spacing-md) !important;
  }
  
  .section__subtitle {
    font-size: var(--font-size-base) !important;
  }
  
  /* Grid de servicios - 1 columna en móvil */
  .services__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--spacing-lg) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  /* Tarjetas de servicios - COMPLETAMENTE VISIBLES */
  .service__card {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--spacing-lg) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }
  
  /* Asegurar que las tarjetas no se oculten */
  .service__card * {
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .service__card--featured {
    transform: none !important;
  }
  
  .service__card:hover {
    transform: translateY(-4px) !important;
  }
  
  /* Número del servicio */
  .service__number {
    font-size: 3rem !important;
    top: var(--spacing-md) !important;
    left: var(--spacing-md) !important;
  }
  
  /* Icono del servicio */
  .service__icon {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.75rem !important;
    margin-bottom: var(--spacing-md) !important;
  }
  
  /* Título del servicio */
  .service__title {
    font-size: var(--font-size-xl) !important;
    margin-bottom: var(--spacing-sm) !important;
  }
  
  /* Descripción */
  .service__description {
    font-size: var(--font-size-sm) !important;
    line-height: 1.6 !important;
    margin-bottom: var(--spacing-md) !important;
  }
  
  /* Features */
  .service__features {
    gap: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-md) !important;
  }
  
  .service__features li {
    font-size: var(--font-size-sm) !important;
    padding-left: 1.5rem !important;
  }
  
  /* Trust indicators */
  .services__trust {
    flex-direction: column !important;
    gap: var(--spacing-md) !important;
    margin-top: var(--spacing-xl) !important;
  }
  
  .trust__item {
    width: 100% !important;
    justify-content: center !important;
    padding: var(--spacing-md) !important;
  }
}

/*==================== MÓVIL PEQUEÑO ====================*/
@media screen and (max-width: 576px) {
  .services {
    padding: var(--spacing-2xl) 0;
  }
  
  .services .container {
    padding: 0 0.75rem;
  }
  
  .services__grid {
    gap: var(--spacing-md) !important;
  }
  
  .service__card {
    padding: var(--spacing-md) !important;
  }
  
  .service__number {
    font-size: 2.5rem !important;
  }
  
  .service__icon {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.5rem !important;
  }
  
  .service__title {
    font-size: var(--font-size-lg) !important;
  }
  
  .service__description {
    font-size: var(--font-size-xs) !important;
  }
}

/*==================== PREVENIR OVERFLOW ====================*/
@media screen and (max-width: 992px) {
  .services,
  .services .container,
  .services__grid,
  .service__card {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}