/* ============================================================
   PAYMETER · Responsive Layer
   Mobile-first overrides — se carga DESPUÉS de shared.css
   No toca desktop (>=1024px). Sólo añade fixes para mobile/tablet.

   Breakpoints normalizados:
     <= 480px  → mobile small  (iPhone SE, 320px-430px)
     <= 768px  → mobile/tablet
     <= 1024px → tablet
   ============================================================ */

/* ============================================================
   1. GLOBAL — Evitar overflow horizontal en mobile
   ============================================================ */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, svg, video { max-width: 100%; height: auto; }
}

/* ============================================================
   2. HEADER & NAV
   ============================================================ */
@media (max-width: 768px) {
  .site-header .nav { padding: 0 16px; height: 64px; }
  .nav-cta-group { gap: 6px; }
  .nav-cta-pill, .nav-cta-link, .nav-cta-btn { padding: 8px 12px; font-size: 13px; }
  .lang-menu { min-width: 120px; max-width: calc(100vw - 20px); }
  .lang-btn { padding: 8px 10px; font-size: 13px; }
}
@media (max-width: 480px) {
  .site-header .nav { padding: 0 12px; height: 60px; }
  .logo-img { max-width: 110px; }
  .nav-main { display: none; }                  /* desktop nav oculto */
  /* Botones header solo críticos en mobile */
  .nav-cta-group { gap: 4px; }
  .nav-cta-pill, .nav-cta-link, .nav-cta-btn { padding: 6px 10px; font-size: 12px; }
}

/* ============================================================
   3. HERO SECTIONS — tipografía fluida real desde 320px
   ============================================================ */
@media (max-width: 480px) {
  /* Hero principal */
  .hero h1,
  .hero-page h1 { font-size: clamp(1.625rem, 6vw, 2.25rem); line-height: 1.15; }
  .subtitle { font-size: 15px; line-height: 1.5; max-width: 100%; }
  .section-title { font-size: clamp(1.375rem, 5vw, 1.875rem); }
  .noapp-head h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .multi-title { font-size: clamp(1.5rem, 5.5vw, 2rem); }

  /* Buttons hero */
  .btn-primary,
  .btn-secondary,
  .pay-btn { padding: 14px 22px; font-size: 15px; min-height: 48px; }
}
@media (max-width: 380px) {
  .hero h1, .hero-page h1 { font-size: 1.4rem; }
  .subtitle { font-size: 14px; }
}

/* ============================================================
   4. APP CONTAINERS (pay-street, pay-fine, signup, etc.)
   ============================================================ */
@media (max-width: 480px) {
  .app-main { padding: 24px 16px 40px; }
  .form-card { padding: 20px 16px; border-radius: 12px; }
  .app-title { font-size: 22px; }
  .app-subtitle { font-size: 14px; line-height: 1.5; }
}
@media (max-width: 340px) {
  .app-main { padding: 16px 12px 32px; }
  .form-card { padding: 16px 12px; }
}

/* ============================================================
   5. GRIDS — colapsar a 1 columna en mobile
   ============================================================ */
@media (max-width: 768px) {
  .compare-grid,
  .reserve-grid,
  .pricing-grid { grid-template-columns: 1fr; gap: 24px; }

  .hiw,
  .pillars,
  .dl-benefits,
  .channels,
  .metrics-grid,
  .multicanal-grid,
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
  .hiw,
  .pillars,
  .dl-benefits,
  .channels,
  .metrics-grid,
  .multicanal-grid,
  .features-grid,
  .testimonials-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Sessions / payment summaries */
  .session-found .sf-grid,
  .payment-summary .ps-grid,
  .summary-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 32px 16px; }
  .footer-col h4 { margin-bottom: 8px; }
}

/* ============================================================
   6. CARDS y bloques de contenido
   ============================================================ */
@media (max-width: 768px) {
  .usp-big { padding: 28px 20px; }
  .upsell, .trust-row { flex-wrap: wrap; gap: 10px; }
  .upsell { padding: 16px; gap: 12px; }
  .upsell h4 { font-size: 14px; }
  .upsell p { font-size: 13px; line-height: 1.4; }
}
@media (max-width: 480px) {
  .usp-big { padding: 22px 16px; border-radius: 14px; }
  .pillar-card,
  .city-card,
  .feature-card,
  .testimonial-card { padding: 18px 16px; }
}

/* ============================================================
   7. PHONE MOCKUPS & IMAGES (no overflow)
   ============================================================ */
@media (max-width: 768px) {
  .phones-row { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .phones-row .phone,
  .phone-frame,
  .phone-frame-sm { max-width: 100%; width: clamp(180px, 60vw, 260px); }
  .hero .screen-v3 { max-width: clamp(160px, 55vw, 280px); }
  .cta-band-mock .screen-v3 { max-width: clamp(140px, 50vw, 220px); }
  .ring { width: clamp(160px, 50vw, 220px); height: clamp(160px, 50vw, 220px); }
}
@media (max-width: 480px) {
  .phones-row .phone,
  .phone-frame,
  .phone-frame-sm { width: 80%; max-width: 280px; }
  .ring { width: 160px; height: 160px; }
}

/* ============================================================
   8. FORMS — inputs táctiles + alineación
   ============================================================ */
@media (max-width: 768px) {
  .signup-form,
  .form-card form,
  .pay-form { width: 100%; max-width: 100%; }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;          /* iOS no hace zoom si fontsize >= 16 */
    min-height: 44px;         /* hit-area táctil mínima */
  }

  .signup-form-side,
  .form-card { padding: 32px 20px; }

  /* OTP inputs — flex wrap */
  .otp-input { gap: 6px; flex-wrap: nowrap; justify-content: center; }
  .otp-input input { width: clamp(38px, 11vw, 52px); height: clamp(50px, 14vw, 62px); font-size: clamp(18px, 4.5vw, 24px); }
}
@media (max-width: 480px) {
  .signup-form-side { padding: 24px 16px; }
  /* Country pills wrap correctly */
  .country-pills { flex-wrap: wrap; gap: 8px; }
  .country-pill { padding: 8px 10px; font-size: 13px; }
}
@media (max-width: 380px) {
  .otp-input input { width: 36px; height: 48px; font-size: 18px; }
}

/* ============================================================
   9. BUTTONS — tamaños táctiles y jerarquía
   ============================================================ */
@media (max-width: 768px) {
  button, .btn, .pay-btn, .ps-actions button, .ps-actions a {
    min-height: 44px;
    font-size: 15px;
  }
  .stores { gap: 10px; flex-wrap: wrap; justify-content: center; }
  .store-btn { max-width: 160px; }
}
@media (max-width: 480px) {
  .ps-actions { gap: 8px; }
  .ps-actions button, .ps-actions a { padding: 14px 16px; font-size: 14px; }
}

/* ============================================================
   10. PAY-STREET / PAY-FINE — específicos
   ============================================================ */
@media (max-width: 480px) {
  /* Pre-pay summary grid */
  .ps-grid,
  .session-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .ps-cell,
  .session-cell { padding: 12px 14px; }

  /* Fine photos grid */
  .fine-photos { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Zone search input + buttons */
  #zone-search-input { font-size: 16px; padding: 12px 14px; }
  .zf-input { width: 100%; }
  .zone-option { padding: 12px; }
  .zone-option strong { font-size: 14px; }
  .zone-option small { font-size: 12px; }

  /* Amount box / chips */
  .amount-box { padding: 16px; }
  .amount-box .price-big { font-size: 32px; }
  .duration-chips { gap: 6px; flex-wrap: wrap; }
  .duration-chips .chip { padding: 8px 12px; font-size: 13px; min-height: 40px; }

  /* Redsys card section */
  #redsys-card-section { padding: 16px 12px; }
  .input-text { font-size: 16px; min-height: 44px; }
}

/* ============================================================
   11. PAY-SUCCESS — comprobante inline
   ============================================================ */
@media (max-width: 480px) {
  .receipt-card { padding: 20px 16px; border-radius: 12px; }
  .receipt-card h3 { font-size: 16px; }
  .receipt-card h4 { font-size: 13px; }
  .receipt-card .rc-row { padding: 10px 0; font-size: 13px; }
  .receipt-card .rc-total { font-size: 14px; padding: 12px 0; }
  .receipt-card .rc-total strong { font-size: 18px; }
  .receipt-card .rc-ref { padding: 12px; font-size: 11px; }
  .receipt-card .rc-ref strong { font-size: 13px; word-break: break-all; }

  .ps-check { width: 64px; height: 64px; }
  .ps-check svg { width: 32px; height: 32px; }

  .ps-warn { padding: 12px 14px; font-size: 13px; }
  .upsell-secondary { padding: 16px; flex-direction: column; text-align: center; gap: 10px; }
  .upsell-secondary a { width: 100%; text-align: center; }
}

/* ============================================================
   12. TABLES — overflow-x para mobile
   ============================================================ */
@media (max-width: 768px) {
  .table-wrap,
  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 100%; }
  .cities-table { font-size: 13px; }
  .cities-table th, .cities-table td { padding: 10px 12px; }
}

/* ============================================================
   13. MODALES / DRAWERS / OVERLAYS
   ============================================================ */
@media (max-width: 768px) {
  .modal { width: calc(100% - 24px); max-width: 480px; padding: 24px 20px; max-height: 88vh; overflow-y: auto; }
  .drawer { width: 100%; max-width: 100%; }
  .modal-content { padding: 24px 20px; }
}

/* ============================================================
   14. TIPOGRAFÍA RESPONSIVE GLOBAL
   ============================================================ */
@media (max-width: 480px) {
  body { font-size: 15px; line-height: 1.55; }
  h1 { font-size: clamp(1.625rem, 6vw, 2.25rem); }
  h2 { font-size: clamp(1.375rem, 5vw, 1.875rem); }
  h3 { font-size: clamp(1.125rem, 4vw, 1.5rem); }
  p, li { font-size: 15px; }
  .hint, .small, small { font-size: 12px; }
}

/* ============================================================
   15. SPACING — secciones generales
   ============================================================ */
@media (max-width: 768px) {
  section { padding: 48px 0; }
  .container, .wrap, .inner { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
  section { padding: 36px 0; }
}

/* ============================================================
   16. FOOTER
   ============================================================ */
@media (max-width: 480px) {
  footer { padding: 28px 0 20px; }
  .footer-brand { text-align: center; }
  .footer-logo { max-width: 130px; margin: 0 auto; }
  .b2b-big { padding: 14px 16px; }
  .footer-col ul { padding: 0; list-style: none; }
  .footer-col li a { padding: 6px 0; display: inline-block; min-height: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; padding: 20px 16px; }
  .footer-bottom .legal-links { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
}

/* ============================================================
   17. UTILITY — touch-friendly defaults
   ============================================================ */
@media (max-width: 768px) {
  a, button, [role="button"] { touch-action: manipulation; }
  .btn-icon { min-width: 44px; min-height: 44px; }
}

/* ============================================================
   18. TABLET (768-1024) — ajustes intermedios
   ============================================================ */
@media (min-width: 481px) and (max-width: 1023px) {
  .pillars,
  .dl-benefits,
  .features-grid,
  .channels { grid-template-columns: repeat(2, 1fr); }

  .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  .hero h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); }
  .section-title { font-size: clamp(1.75rem, 3.8vw, 2.25rem); }

  .phones-row .phone,
  .phone-frame { max-width: clamp(220px, 35vw, 300px); }
}

/* ============================================================
   19. NAV "Operadores" / "Crear cuenta" — hide button labels en <480px
   ============================================================ */
@media (max-width: 480px) {
  .nav-cta-pill .badge,
  .nav-cta-link .badge { display: none; }
}

/* ============================================================
   20. LEGAL PAGES (privacy/terms)
   ============================================================ */
@media (max-width: 480px) {
  .legal-content { padding: 24px 16px; font-size: 14px; }
  .legal-content h1 { font-size: 1.5rem; }
  .legal-content h2 { font-size: 1.25rem; margin-top: 24px; }
  .legal-content ol, .legal-content ul { padding-left: 18px; }
}

/* ============================================================
   21. TABLET (769-900px): show nav-cta-group with primary CTA only
   ============================================================ */
@media(max-width:900px) and (min-width:769px) {
  .nav-cta-group { display: inline-flex !important; }
  .nav-cta-btn:not(.nav-cta-btn--primary) { display: none !important; }
}

/* ============================================================
   22. REDSYS MOBILE — breathing room + safe-area (iPhone)
   Based on native app reference — improve surrounding context,
   DO NOT touch Redsys iframe internals.
   ============================================================ */
@media (max-width: 768px) {
  /* Give the card-form-shell more vertical space on mobile */
  .card-form-shell{
    padding: 22px 18px 20px !important;
  }
  /* Slightly taller iframe on narrow screens so button isn't clipped */
  #card-form iframe{
    min-height: 300px !important;
  }
  /* Breathe between steps on mobile */
  .form-card + .form-card{
    margin-top: 12px;
  }
  /* Pay button: clear the iOS home indicator */
  .pay-btn{
    margin-bottom: max(0px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 430px) {
  /* iPhone 15 Pro Max (430px) — tighten horizontal padding slightly */
  .card-form-shell{ padding: 20px 14px 18px !important; }
  .cfs-footer{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}