/* =====================================================
   MOBILE OPTIMIZATION — Ascend Life Partners
   Cargado al final — deshabilita efectos pesados en
   móvil y refina layout para pantallas pequeñas.
   ===================================================== */

/* ─────────────────────────────────────────────────────
   1. PREFERENCIA DE MOVIMIENTO REDUCIDO (accesibilidad)
───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-aurora { display: none !important; }
}

/* ─────────────────────────────────────────────────────
   2. TABLET — 768 px a 1024 px
   Ajustes de layout sin sacrificar efectos visuales.
───────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Carrier logos: 3 columnas en tablet */
  .carrier-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }

  /* Step grid: 2 columnas */
  .step-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Orbs un poco más pequeños */
  .orb-1 { width: 480px !important; height: 480px !important; }
  .orb-2 { width: 320px !important; height: 320px !important; }
  .orb-3 { width: 280px !important; height: 280px !important; }
}

/* ─────────────────────────────────────────────────────
   3. MÓVIL — hasta 768 px
   Elimina efectos GPU pesados, optimiza layout.
───────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── 3a. Fondo simplificado por tipo de página ── */
  .welcome-page {
    background:
      linear-gradient(180deg, #080f1c 0%, #0a1628 100%) !important;
  }
  body:not(.welcome-page) {
    background: var(--bg, #F5F2EC) !important;
  }

  /* ── 3b. Cuadrícula de fondo — deshabilitada en móvil ── */
  body::before { display: none !important; }

  /* ── 3c. Aurora orbs — deshabilitados en móvil ── */
  .hero-aurora { display: none !important; }

  /* ── 3d. Nav blur — deshabilitado (costoso en móvil) ── */
  .nav,
  .w-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* index.html: .nav sin .welcome-page en body → fondo claro */
  body:not(.welcome-page) .nav:not(.w-nav) {
    background: rgba(248, 245, 240, 0.98) !important;
  }
  /* recruit usa .nav pero con dark theme → fondo oscuro */
  body.welcome-page .nav:not(.w-nav),
  .w-nav {
    background: rgba(8, 15, 28, 0.98) !important;
  }

  /* ── 3e. Nav index — hamburger visible, nav-right oculto ── */
  .nav { padding: 10px 0 16px !important; position: relative !important; }

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

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

  /* ── 3f. Hero section — mejor proporción en móvil ── */
  .hero-section {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ── 3g. Cards — padding reducido ── */
  .card {
    padding: 20px 16px !important;
    border-radius: 20px !important;
    /* Sin box-shadow costoso en móvil */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  }

  /* ── 3h. Carrier logos — 3 columnas compactas ── */
  .carrier-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }

  .carrier-logo {
    max-height: 38px !important;
    /* Sin hover animation en móvil (touch) */
    transition: none !important;
  }

  /* ── 3i. Product grid — 2 columnas en móvil ── */
  .grid3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* La última card (¿No sabes cuál?) ocupa el ancho completo */
  .grid3 > .product-card:last-child {
    grid-column: 1 / -1 !important;
  }

  /* ── 3j. Step grid — 2 columnas en móvil ── */
  .step-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ── 3k. FAB simplificado — sin translateY (performance) ── */
  .fab,
  .w-fab-whatsapp,
  .fab-phone {
    animation: mobileFabPulse 2.5s ease-in-out infinite !important;
    right: 14px !important;
    bottom: 14px !important;
  }

  /* FAB full width solo en pantallas muy pequeñas */
  @media (max-width: 400px) {
    .fab {
      right: 12px !important;
      left: 12px !important;
      justify-content: center !important;
    }
  }

  @keyframes mobileFabPulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4); }
    50%      { box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6); }
  }

  /* Deshabilitar ring del FAB en móvil */
  .fab::before,
  .w-fab-whatsapp::before,
  .fab-phone::before {
    display: none !important;
  }

  /* ── 3l. H1 — tamaño adecuado para móvil ── */
  h1 {
    font-size: clamp(30px, 8vw, 46px) !important;
    letter-spacing: -1.4px !important;
    line-height: 1.05 !important;
  }

  h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
    letter-spacing: -0.8px !important;
  }

  .lead { font-size: 17px !important; }

  /* ── 3m. Wrap — padding mínimo ── */
  .wrap {
    width: calc(100% - 20px) !important;
    padding: 12px 0 32px !important;
  }

  /* ── 3n. Sección márgenes — más compactos ── */
  .section { margin-top: 14px !important; }

  /* ── 3n2. Bands — sin márgenes negativos en móvil ── */
  .testimonios-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── 3n3. Step grid connecting line — ocultar en móvil ── */
  .step-grid::before { display: none !important; }
  .step { margin: 4px 0 !important; }

  /* ── 3o. Trust strip — 3 columnas compactas ── */
  .trust-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .trust-item {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }

  /* ── 3p. CTA row — botón ancho completo ── */
  .cta-row .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── 3q. Testimonios — 1 columna en móvil ── */
  .grid3.testimonios,
  section .grid3:not(#productos .grid3) {
    grid-template-columns: 1fr !important;
  }

  /* ── 3r. Mini cards — sin transform hover en touch ── */
  .mini:hover,
  .product-card:hover,
  .step:hover {
    transform: none !important;
  }

  /* ── 3s. Card shimmer — deshabilitado en móvil ── */
  .w-testimonial::after { display: none !important; }

  /* ── 3t. Scroll progress bar — mantener (es ligero) ── */

  /* ── 3u. Logo reducido en móvil ── */
  .logo img { height: 60px !important; }

  /* ── 3v. Step num — tamaño reducido ── */
  .step-num { font-size: 26px !important; }

  /* ── 3w. Kicker — tamaño reducido ── */
  .kicker { font-size: 11px !important; padding: 6px 10px !important; }

  /* ── 3x. Footer compacto ── */
  .footer { padding: 20px 0 0 !important; font-size: 12px !important; }

  /* ── 3y. Typewriter — mantener pero más rápido ── */
  .tw-headline.tw-active {
    animation-duration: 1s !important;
  }

  /* ── 3z. Reveal stagger — más rápido en móvil ── */
  .reveal-stagger > * {
    transition-duration: 0.35s !important;
  }

  /* ── 3aa. Hero entrada lateral — sin translateX en móvil ── */
  .hero-enter-left,
  .hero-enter-right {
    transform: translateY(20px) !important;
    opacity: 0;
  }
  .hero-enter-left.enter-visible,
  .hero-enter-right.enter-visible {
    transform: translateY(0) !important;
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────────────
   4. TOUCH TARGETS — mínimo 44×44 px (WCAG 2.5.5)
───────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .btn       { min-height: 44px !important; }
  .w-btn     { min-height: 44px !important; }
  summary    { min-height: 44px !important; padding: 12px 0 !important; }
  .w-nav-link { min-height: 44px !important; }

  /* Más espacio en FAQ items para toque */
  details { padding: 4px 16px !important; }
}

/* ─────────────────────────────────────────────────────
   5. SALES.HTML — optimizaciones específicas
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Stats bar — 3 columnas compactas */
  .s-stats-bar {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .s-stat-num  { font-size: 28px !important; }
  .s-stat-label { font-size: 11px !important; }

  /* Pasos sales — apilados */
  .s-steps     { grid-template-columns: 1fr !important; }

  /* Productos sales — 2 columnas */
  .s-products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Hero sales — padding compacto */
  .s-hero-inner { padding: 28px 16px 32px !important; }
  .s-hero-title { font-size: clamp(28px, 7vw, 44px) !important; }

  /* FAQs sales */
  .s-faq-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────
   6. RECRUIT.HTML — optimizaciones específicas
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero 2 columnas → 1 columna */
  .hero-grid,
  .r-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Video thumbnail — altura reducida */
  .video-thumb,
  .hero-video {
    max-height: 220px !important;
    object-fit: cover !important;
  }

  /* Tabla comparativa — scroll horizontal */
  .comp-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .comp-table { min-width: 480px !important; }

  /* Beneficios grid — 2 columnas */
  .benefits-grid,
  .r-benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Form — ancho completo */
  .r-form,
  form.apply-form { padding: 20px 16px !important; }

  /* Testimonios — 1 columna */
  .testimonios-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────
   7. MUY PEQUEÑO — 375px y menos (iPhone SE, etc.)
───────────────────────────────────────────────────── */
@media (max-width: 375px) {
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }

  .grid3 { grid-template-columns: 1fr !important; }
  .step-grid { grid-template-columns: 1fr !important; }
  .carrier-grid { grid-template-columns: repeat(3, 1fr) !important; }

  .card { padding: 16px 14px !important; }

  .btn {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
}

/* ─────────────────────────────────────────────────────
   8. IMÁGENES — lazy load visual (fade-in)
───────────────────────────────────────────────────── */
img[loading="lazy"] {
  transition: opacity 0.4s ease;
}
img[loading="lazy"]:not([src]) {
  opacity: 0;
}