/* ============================================================
   SAN MIGUEL S.A. — mobile-2026.css
   Optimización profesional para pantallas pequeñas y medianas.
   Se carga al final: solo ajusta escala, aire y jerarquía.
   ============================================================ */

/* ══ MÓVIL (≤575.98px) ═══════════════════════════════════════ */
@media (max-width: 575.98px) {

  /* ── Ritmo vertical más compacto ── */
  .section-pad    { padding: 56px 0 !important; }
  .section-pad-sm { padding: 40px 0 !important; }
  .container      { padding-left: 1.1rem; padding-right: 1.1rem; }

  /* ── Tipografía: escala armónica ── */
  .section-title    { font-size: 1.45rem !important; line-height: 1.25 !important; }
  .section-subtitle { font-size: .92rem !important; }
  .label-tag        { font-size: .68rem !important; padding: .3rem .8rem !important; }

  /* ── Hero ── */
  .hero-title, .display-title { font-size: 1.9rem !important; letter-spacing: -.02em !important; }
  .hero-subtitle  { font-size: .95rem !important; line-height: 1.6 !important; }
  .hero-stat .value { font-size: 1.4rem !important; }
  .hero-stat .label-sm, .hero-stat small { font-size: .72rem !important; }

  /* ── Tarjetas de producto ── */
  .product-card { padding: 1.35rem 1.2rem !important; border-radius: 18px !important; }
  .product-card h3, .product-card .product-title { font-size: 1.08rem !important; }
  .product-card p  { font-size: .88rem !important; }
  .product-card-icon { transform: scale(.88); transform-origin: left top; }
  .product-card ul li, .product-card .feature { font-size: .85rem !important; }
  .btn-sim-producto { width: 100%; justify-content: center; font-size: .88rem !important; padding: .6rem 1rem !important; }

  /* ── Simulador ── */
  .sim-card { padding: 1.35rem 1rem !important; border-radius: 18px !important; }
  .sim-tipo { flex-direction: row !important; }
  .sim-tipo-btn { font-size: .84rem !important; padding: .55rem .6rem !important; flex: 1; }
  .sim-tipo-hint { font-size: .78rem !important; line-height: 1.55 !important; }
  .sim-monto-val { font-size: 1.5rem !important; }
  .sim-result-cuota { font-size: 1.9rem !important; }
  .sim-result-sub { font-size: .8rem !important; flex-wrap: wrap; gap: .35rem 1rem; }
  .sim-cta { width: 100%; justify-content: center; font-size: .92rem !important; }
  .sim-nota { font-size: .72rem !important; }

  /* ── Historias ── */
  .story-card { min-height: 380px !important; }
  .story-card-title { font-size: 1rem !important; }
  .story-card-text  { font-size: .82rem !important; }

  /* ── Beneficios / diferenciales ── */
  .benefit-card { padding: 1.25rem 1.1rem !important; }
  .benefit-card h4, .benefit-card h5 { font-size: 1rem !important; }
  .benefit-card p { font-size: .85rem !important; }

  /* ── Franja de confianza / contadores ── */
  .trust-item .number { font-size: 1.6rem !important; }
  .trust-item .caption, .trust-item p { font-size: .78rem !important; }

  /* ── FAQ: pestañas deslizables en una línea ── */
  .faq-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .35rem;
    margin-left: -1.1rem; margin-right: -1.1rem;
    padding-left: 1.1rem; padding-right: 1.1rem;
  }
  .faq-tabs::-webkit-scrollbar { display: none; }
  .faq-tab { flex: 0 0 auto; font-size: .82rem !important; padding: .5rem 1rem !important; }
  .faq-question { font-size: .92rem !important; padding: 1rem 1.1rem !important; }
  .faq-answer, .faq-answer p { font-size: .86rem !important; }

  /* ── Testimonios ── */
  .testimonial-card { padding: 1.35rem 1.2rem !important; }
  .testimonial-card p { font-size: .88rem !important; }
  .testi-arrow { width: 38px !important; height: 38px !important; }

  /* ── Contacto ── */
  .contact-form-wrap { padding: 1.35rem 1.1rem !important; border-radius: 18px !important; }
  .contact-form-wrap .form-label { font-size: .85rem !important; }
  .contact-form-wrap .form-control,
  .contact-form-wrap .form-select { font-size: .92rem !important; }
  .contact-channel, .contact-info-item { padding: .9rem 1rem !important; }

  /* ── Footer ── */
  footer, .footer { text-align: left; }
  .footer h5, footer h5 { font-size: .95rem !important; margin-top: 1.25rem; }
  .footer a, footer a, .footer li, footer li { font-size: .88rem !important; }

  /* ── CTA banner ── */
  .cta-banner h2 { font-size: 1.4rem !important; }
  .cta-banner p  { font-size: .9rem !important; }

  /* ── Flotantes: tamaños contenidos y sin solaparse ── */
  .wa-float { width: 52px !important; height: 52px !important; }
  .chatbot-trigger { width: 54px !important; height: 54px !important; }

  /* ── Topbar: un pelín más compacta ── */
  .topbar { height: 32px !important; }
  #navbar { top: 32px !important; }
  .topbar-item { font-size: .72rem !important; }

  /* ── Botones grandes a ancho completo en secciones centradas ── */
  .text-center .btn-teal.btn-lg,
  .text-center .btn-navy.btn-lg { width: 100%; justify-content: center; }
}

/* ══ MÓVIL GRANDE / TABLET CHICA (576–767.98px) ═══════════════ */
@media (min-width: 576px) and (max-width: 767.98px) {
  .section-pad { padding: 72px 0 !important; }
  .section-title { font-size: 1.7rem !important; }
  .hero-title, .display-title { font-size: 2.4rem !important; }
  .product-card { padding: 1.6rem 1.4rem !important; }
  .sim-card { padding: 1.75rem 1.5rem !important; }
  .sim-result-cuota { font-size: 2.3rem !important; }
  .contact-form-wrap { padding: 1.75rem 1.5rem !important; }
  .faq-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .faq-tabs::-webkit-scrollbar { display: none; }
  .faq-tab { flex: 0 0 auto; }
}

/* ══ TABLET (768–991.98px) ═══════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .section-title { font-size: 1.9rem !important; }
  .product-card { padding: 1.75rem 1.5rem !important; }
  .story-card { min-height: 420px !important; }
  .sim-card { max-width: 640px; margin-left: auto; margin-right: auto; }
}

/* ══ TÁCTIL: objetivos de toque cómodos (cualquier tamaño) ════ */
@media (pointer: coarse) {
  .chat-option-btn, .faq-tab, .sim-tipo-btn, .nav-link { min-height: 44px; }
  .sim-range { height: 26px; }
  .sim-range::-webkit-slider-thumb { width: 26px; height: 26px; }
}


/* ══ FORMULARIO DE CONTACTO EN MÓVIL: centrado y con cristal ══ */
@media (max-width: 767.98px) {
  .contact-form-wrap {
    max-width: 500px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [data-theme="dark"] .contact-form-wrap {
    background: linear-gradient(160deg, rgba(22,60,72,.36) 0%, rgba(10,20,48,.5) 100%) !important;
    backdrop-filter: blur(17px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(17px) saturate(1.3) !important;
    border: 1px solid rgba(150,215,220,.16) !important;
  }
  [data-theme="light"] .contact-form-wrap {
    background: linear-gradient(160deg, rgba(255,255,255,.74) 0%, rgba(236,246,249,.66) 100%) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    border: 1px solid rgba(18,120,120,.14) !important;
  }
}


/* ══ MÓVIL: tarjetas y elementos translúcidos (se aprecia el fondo) ══ */
@media (max-width: 767.98px) {
  [data-theme="dark"] .product-card,
  [data-theme="dark"] .benefit-card,
  [data-theme="dark"] .gt-impact-card,
  [data-theme="dark"] .faq-item,
  [data-theme="dark"] .mv-card,
  [data-theme="dark"] .testimonial-card,
  [data-theme="dark"] .value-badge,
  [data-theme="dark"] .contact-card,
  [data-theme="dark"] .sim-card,
  [data-theme="dark"] #contactForm {
    background: linear-gradient(160deg, rgba(22,60,72,.32) 0%, rgba(10,20,48,.46) 100%) !important;
    backdrop-filter: blur(14px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
    border: 1px solid rgba(150,215,220,.15) !important;
    box-shadow: 0 10px 30px rgba(4,10,26,.32) !important;
  }
  [data-theme="light"] .product-card,
  [data-theme="light"] .benefit-card,
  [data-theme="light"] .gt-impact-card,
  [data-theme="light"] .faq-item,
  [data-theme="light"] .mv-card,
  [data-theme="light"] .testimonial-card,
  [data-theme="light"] .value-badge,
  [data-theme="light"] .contact-card,
  [data-theme="light"] .sim-card,
  [data-theme="light"] #contactForm {
    background: linear-gradient(160deg, rgba(255,255,255,.66) 0%, rgba(236,246,249,.56) 100%) !important;
    backdrop-filter: blur(14px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
    border: 1px solid rgba(18,120,120,.13) !important;
    box-shadow: 0 8px 26px rgba(15,35,60,.10) !important;
  }
  /* velo del fondo un poco más ligero para que el cristal respire */
  [data-theme="dark"] body::after {
    background: linear-gradient(180deg, rgba(9,16,40,.52) 0%, rgba(9,16,40,.62) 100%) !important;
  }
  [data-theme="light"] body::after {
    background: linear-gradient(180deg, rgba(244,247,252,.62) 0%, rgba(238,242,249,.72) 100%) !important;
  }
}


/* ══ MÓVIL: LEGIBILIDAD SOBRE CRISTAL (auditoría WCAG 2.1 AA) ══
   El gris secundario #94A3B8 daba 3.07:1 en oscuro y 1.89:1 en claro
   sobre el peor caso del fondo (cielo/agua tras el cristal). Se
   sustituye por tonos con contraste ≥ 4.5:1 medido. */
@media (max-width: 767.98px) {

  /* — Tema oscuro: texto secundario claro (5.9:1 en el peor caso) — */
  [data-theme="dark"] .product-card p,
  [data-theme="dark"] .product-card li,
  [data-theme="dark"] .benefit-card p,
  [data-theme="dark"] .gt-impact-card p,
  [data-theme="dark"] .mv-card p,
  [data-theme="dark"] .testimonial-card p,
  [data-theme="dark"] .faq-answer,
  [data-theme="dark"] .faq-answer p,
  [data-theme="dark"] .sim-tipo-hint,
  [data-theme="dark"] .sim-nota,
  [data-theme="dark"] .contact-form-wrap p,
  [data-theme="dark"] .contact-form-wrap small {
    color: rgba(228, 236, 252, .92) !important;
  }
  [data-theme="dark"] .product-card h3,
  [data-theme="dark"] .benefit-card h4, [data-theme="dark"] .benefit-card h5,
  [data-theme="dark"] .testimonial-card strong,
  [data-theme="dark"] .faq-question {
    color: #FFFFFF !important;
  }
  /* Títulos que caen directo sobre la foto: halo para asegurar lectura */
  [data-theme="dark"] .section-title { text-shadow: 0 2px 14px rgba(0,0,0,.5) !important; }
  [data-theme="dark"] .section-subtitle { color: rgba(226,235,255,.88) !important; text-shadow: 0 1px 10px rgba(0,0,0,.45) !important; }

  /* — Tema claro: texto secundario oscurecido (≥5.5:1) — */
  [data-theme="light"] .product-card p,
  [data-theme="light"] .product-card li,
  [data-theme="light"] .benefit-card p,
  [data-theme="light"] .gt-impact-card p,
  [data-theme="light"] .mv-card p,
  [data-theme="light"] .testimonial-card p,
  [data-theme="light"] .faq-answer,
  [data-theme="light"] .faq-answer p,
  [data-theme="light"] .sim-tipo-hint,
  [data-theme="light"] .sim-nota,
  [data-theme="light"] .contact-form-wrap p,
  [data-theme="light"] .contact-form-wrap small {
    color: #3D4A63 !important;
  }
  [data-theme="light"] .section-subtitle { color: #33415C !important; }

  /* — Campos de formulario: texto y placeholder legibles — */
  [data-theme="dark"] .contact-form-wrap .form-control,
  [data-theme="dark"] .contact-form-wrap .form-select,
  [data-theme="dark"] .sim-card .form-select {
    color: #FFFFFF !important;
    background: rgba(0,0,0,.38) !important;
  }
  [data-theme="dark"] .contact-form-wrap .form-control::placeholder {
    color: rgba(255,255,255,.66) !important;
  }
  [data-theme="light"] .contact-form-wrap .form-control,
  [data-theme="light"] .contact-form-wrap .form-select {
    color: #1E293B !important;
    background: rgba(255,255,255,.85) !important;
  }
  [data-theme="light"] .contact-form-wrap .form-control::placeholder {
    color: #5B6880 !important;
  }
}


/* ══ MÓVIL: MODAL DE CONTACTO centrado y cristal (como desktop) ══ */
@media (max-width: 767.98px) {
  .contact-modal-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
  }
  .contact-modal {
    margin: auto !important;
    width: calc(100% - 1.5rem) !important;
    max-width: 440px !important;
    max-height: 86dvh !important;
    overflow-y: auto !important;
  }
  [data-theme="dark"] .contact-modal {
    background: linear-gradient(160deg, rgba(22,60,72,.42) 0%, rgba(10,20,48,.60) 100%) !important;
    backdrop-filter: blur(18px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
    border: 1px solid rgba(150,215,220,.18) !important;
  }
  [data-theme="light"] .contact-modal {
    background: linear-gradient(160deg, rgba(255,255,255,.80) 0%, rgba(236,246,249,.72) 100%) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    border: 1px solid rgba(18,120,120,.15) !important;
  }

  /* Tarjetas aún más transparentes (el fondo se aprecia claramente) */
  [data-theme="dark"] .product-card,
  [data-theme="dark"] .benefit-card,
  [data-theme="dark"] .gt-impact-card,
  [data-theme="dark"] .faq-item,
  [data-theme="dark"] .mv-card,
  [data-theme="dark"] .testimonial-card,
  [data-theme="dark"] .value-badge,
  [data-theme="dark"] .contact-card,
  [data-theme="dark"] .sim-card,
  [data-theme="dark"] #contactForm {
    background: linear-gradient(160deg, rgba(22,60,72,.22) 0%, rgba(10,20,48,.36) 100%) !important;
  }
  [data-theme="light"] .product-card,
  [data-theme="light"] .benefit-card,
  [data-theme="light"] .gt-impact-card,
  [data-theme="light"] .faq-item,
  [data-theme="light"] .mv-card,
  [data-theme="light"] .testimonial-card,
  [data-theme="light"] .value-badge,
  [data-theme="light"] .contact-card,
  [data-theme="light"] .sim-card,
  [data-theme="light"] #contactForm {
    background: linear-gradient(160deg, rgba(255,255,255,.56) 0%, rgba(236,246,249,.46) 100%) !important;
  }

  /* Burbuja del chat: compacta, encima del botón y sin bloquear toques */
  .chatbot-bubble-hint {
    max-width: 190px !important;
    font-size: .78rem !important;
    padding: .5rem .8rem !important;
    pointer-events: none;
    margin-bottom: .25rem;
  }
}


/* ══ MÓVIL: superficies restantes translúcidas (pasada final) ══ */
@media (max-width: 767.98px) {
  /* Sección del simulador: sin panel sólido en tema claro */
  [data-theme="light"] #simulador { background: transparent !important; }

  /* Banner CTA: velo navy translúcido en vez de degradado sólido */
  .cta-banner,
  [data-theme="dark"] .cta-banner {
    background: linear-gradient(160deg, rgba(12,21,54,.58) 0%, rgba(10,18,46,.66) 100%) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  }
  [data-theme="light"] .cta-banner {
    background: linear-gradient(160deg, rgba(27,46,107,.60) 0%, rgba(13,31,78,.68) 100%) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  }

  /* Canales de contacto e ítems informativos */
  [data-theme="dark"] .contact-channel,
  [data-theme="dark"] .contact-info-item {
    background: linear-gradient(160deg, rgba(22,60,72,.22) 0%, rgba(10,20,48,.36) 100%) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    border: 1px solid rgba(150,215,220,.14) !important;
  }
  [data-theme="light"] .contact-channel,
  [data-theme="light"] .contact-info-item {
    background: linear-gradient(160deg, rgba(255,255,255,.56) 0%, rgba(236,246,249,.46) 100%) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    border: 1px solid rgba(18,120,120,.12) !important;
  }
}


/* ══ MÓVIL: transparencia máxima de cristal (ajuste fino) ══ */
@media (max-width: 767.98px) {
  [data-theme="dark"] .product-card,
  [data-theme="dark"] .benefit-card,
  [data-theme="dark"] .gt-impact-card,
  [data-theme="dark"] .faq-item,
  [data-theme="dark"] .mv-card,
  [data-theme="dark"] .testimonial-card,
  [data-theme="dark"] .value-badge,
  [data-theme="dark"] .contact-card,
  [data-theme="dark"] .sim-card,
  [data-theme="dark"] .contact-channel,
  [data-theme="dark"] .contact-info-item,
  [data-theme="dark"] #contactForm {
    background: linear-gradient(160deg, rgba(20,55,66,.15) 0%, rgba(10,20,48,.26) 100%) !important;
  }
  [data-theme="light"] .product-card,
  [data-theme="light"] .benefit-card,
  [data-theme="light"] .gt-impact-card,
  [data-theme="light"] .faq-item,
  [data-theme="light"] .mv-card,
  [data-theme="light"] .testimonial-card,
  [data-theme="light"] .value-badge,
  [data-theme="light"] .contact-card,
  [data-theme="light"] .sim-card,
  [data-theme="light"] .contact-channel,
  [data-theme="light"] .contact-info-item,
  [data-theme="light"] #contactForm {
    background: linear-gradient(160deg, rgba(255,255,255,.46) 0%, rgba(236,246,249,.36) 100%) !important;
  }
  /* velo global aún más ligero: el lago se ve de verdad */
  [data-theme="dark"] body::after {
    background: linear-gradient(180deg, rgba(9,16,40,.44) 0%, rgba(9,16,40,.54) 100%) !important;
  }
  [data-theme="light"] body::after {
    background: linear-gradient(180deg, rgba(244,247,252,.55) 0%, rgba(238,242,249,.65) 100%) !important;
  }
}


/* Salvaguarda de legibilidad: halo sutil en texto sobre cristal (oscuro) */
@media (max-width: 767.98px) {
  [data-theme="dark"] .product-card p, [data-theme="dark"] .product-card li,
  [data-theme="dark"] .benefit-card p, [data-theme="dark"] .testimonial-card p,
  [data-theme="dark"] .faq-answer, [data-theme="dark"] .sim-tipo-hint {
    text-shadow: 0 1px 8px rgba(2, 10, 28, .6);
  }
}