/* =========================================================
  RESPONSIVE CSS — style-mobile.css
  Breakpoints:
    ≤ 992px  → Tablet
    ≤ 768px  → Mobile grande
    ≤ 576px  → Mobile chico
    ≤ 400px  → Mobile muy chico
========================================================= */


/* =========================================================
  BOTÓN FLOTANTE WSP — posición con banner abierto
  Se declara UNA sola vez, aplica a todos los breakpoints
========================================================= */
#wsp-btn.banner-open {
  bottom: 210px;
}


/* =========================================================
  TABLET (≤ 992px)
========================================================= */
@media (max-width: 992px) {

  /* Planes — encabezado */
  .planes-title       { font-size: 34px; }
  .font-plan          { font-size: 42px; }
  .planes-description { font-size: 18px; }

  /* Caja GB */
  .plan-box       { height: auto; padding: 25px 18px; }
  .plan-box h2    { font-size: 3.2rem; }
  .plan-box small { font-size: 1.6rem; }

  /* Ventajas */
  .ventaja-card   { width: 100%; max-width: 420px; }
  .mini-beneficio { width: 260px; }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}


/* =========================================================
  MOBILE GRANDE (≤ 768px)
========================================================= */
@media (max-width: 768px) {

  /* ----- HEADER ----- */
  .main-header { padding: 8px 0; }

  .main-header .container {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
  }

  .logo { flex-shrink: 0; }
  .logo img { max-height: 40px; }

  .nav__ctas {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  /* Atención: ícono circular */
  .btn-atencion {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    gap: 0;
  }
  .btn-atencion-text { display: none; }

  /* Botón llamar */
  .nav__cta-primary {
    padding: 7px 13px;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .nav__cta-primary .nav__cta-text {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
  }

  /* ----- ENCABEZADO PLANES ----- */
  .planes-title       { font-size: 30px; }
  .font-plan          { font-size: 38px; }
  .planes-description { font-size: 16px; }
  .subtitle           { font-size: 12px; }

  .planes-tabs { width: 100%; }
  .planes-tabs .tab-button,
  .planes-tabs .tab-active { width: 50%; }

  /* ----- CARDS DE PLANES ----- */
  .plan-card {
    padding: 20px 16px;
    gap: 8px;
  }

  .plan-box {
    padding: 20px 14px;
    min-height: 170px;
  }
  .plan-box h2    { font-size: 3rem; }
  .plan-box small { font-size: 1.5rem; }
  .plan-box p     { font-size: 17px; }

  .plan-header h5 { font-size: 1.15rem; }
  .icon-plan      { width: 30px; height: 30px; }

  .plan-price h3  { font-size: 2.2rem; }
  .old-price      { font-size: 13px; }

  .share-text { font-size: 16px; }

  .apps img   { height: 20px; width: 20px; }
  .apps p     { font-size: 17px; }

  .btn-contratar  { font-size: 15px; padding: 12px; }

  /* ----- BOTÓN FLOTANTE WSP ----- */
  #wsp-btn {
    bottom: 20px;
    right: 20px;
    height: 50px;
    padding: 0 18px 0 12px;
    gap: 8px;
  }
  #wsp-btn img    { width: 26px; }
  .wsp-label      { font-size: 14px; }

  /* ----- CTA FORM (llamada) ----- */
  .cta-title { font-size: 1.5rem; }

  .cta-btns-principales {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 16px;
  }

  .btn-cta-wsp,
  .btn-cta-tel {
    width: 100%;
    justify-content: center;
    font-size: 16px;
    padding: 15px 24px;
    box-sizing: border-box;
  }

  .cta-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 8px;
  }

  .input-numero-sm {
    width: 100%;
    box-sizing: border-box;
  }

  .btn-solicitar {
    width: 100%;
    box-sizing: border-box;
  }

  /* ----- BENEFICIOS ----- */
  .incluye-section   { padding: 36px 24px; }
  .incluye-header h3 { font-size: 1.6rem; }
  .incluye-card      { width: 100%; max-width: 400px; }

  .mini-beneficio { width: 100%; height: auto; }

  /* Grid 2 columnas para mini-beneficios */
  .row.g-4.justify-content-center .col-auto {
    width: calc(50% - 10px);
    box-sizing: border-box;
  }

  /* Ventajas */
  .ventaja-card { width: 100%; max-width: 420px; }
}


/* =========================================================
  MOBILE CHICO (≤ 576px)
========================================================= */
@media (max-width: 576px) {

  /* ----- TOPBAR ----- */
  .topbar { font-size: 12px; padding: 6px 10px; }

  /* ----- HEADER ----- */
  .main-header .container { padding: 6px 12px; }
  .logo img { max-height: 36px; }

  .nav__cta-primary {
    padding: 7px 12px;
    font-size: 12px;
    gap: 6px;
  }

  /* ----- CARRUSEL ----- */
  .carousel-cta { bottom: 80px; }

  .carousel-wsp-btn {
    padding: 11px 18px;
    font-size: 0.85rem;
    gap: 8px;
    margin-bottom: 20px;
  }
  .carousel-wsp-btn i { font-size: 1rem; }

  /* ----- ENCABEZADO PLANES ----- */
  .planes-title { font-size: 26px; }
  .font-plan    { font-size: 32px; }

  /* ----- CARDS DE PLANES ----- */
  .plan-card { padding: 18px 14px; }

  .plan-box {
    padding: 18px 12px;
    min-height: 160px;
  }
  .plan-box h2    { font-size: 2.6rem; }
  .plan-box small { font-size: 1.4rem; }
  .plan-box p     { font-size: 15px; }

  .plan-header h5 { font-size: 1.05rem; }

  .plan-price h3 { font-size: 2rem; }

  .gb-big-price   { font-size: 1.5rem; }
  .txt-roaming    { font-size: 11px; }
  .countries      { font-size: 10px; }
  .flags img      { width: 22px; }

  .apps img { height: 18px; width: 18px; }
  .apps p   { font-size: 15px; }

  .btn-contratar { font-size: 14px; padding: 11px; }

  /* ----- BOTÓN FLOTANTE WSP — solo ícono ----- */
  #wsp-btn {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
    bottom: 16px;
    right: 16px;
  }
  #wsp-btn img  { width: 26px; }
  .wsp-label    { display: none; }

  /* ----- CTA FORM ----- */
  .cta-title { font-size: 1.3rem; margin-bottom: 16px; }

  .cta-btns-principales {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
  }

  .btn-cta-wsp,
  .btn-cta-tel {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 14px 20px;
    box-sizing: border-box;
  }

  .cta-secundario { padding-top: 16px; }
  .cta-secundario-label { font-size: 12px; }

  .cta-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0;
  }

  .input-numero-sm {
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    padding: 10px 16px;
  }

  .btn-solicitar {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 10px 16px;
  }

  /* ----- VENTAJAS ----- */
  .ventaja-card {
    width: 100%;
    max-width: 100%;
    padding: 18px;
  }
  .ventaja-icon { width: 44px; }

  /* Mini-beneficios: 1 columna en mobile chico */
  .row.g-4.justify-content-center .col-auto {
    width: 100%;
    max-width: 340px;
    box-sizing: border-box;
  }

  .mini-beneficio {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 16px;
  }
  .mini-beneficio img { width: 46px; height: auto; }

  p.beneficios-txt { font-size: 14px; line-height: 1.3; }

  /* ----- CONOCE MÁS ----- */
  .conoce-script { font-size: 1.8rem; }
  .conoce-text   { font-size: 17px; }

  /* ----- BANNER DESLIZANTE ----- */
  .banner-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .banner-call-btn {
    width: 100%;
    justify-content: center;
    font-size: 14px;
    padding: 10px 18px;
  }
}


/* =========================================================
  MOBILE MUY CHICO (≤ 390px)
========================================================= */
@media (max-width: 390px) {

  /* ----- HEADER ----- */
  .logo img { max-height: 32px; }

  .nav__cta-primary {
    padding: 6px 10px;
    font-size: 11px;
  }

  /* ----- ENCABEZADO PLANES ----- */
  .planes-title { font-size: 22px; }
  .font-plan    { font-size: 28px; }

  /* ----- CARDS DE PLANES ----- */
  .plan-box h2    { font-size: 2.3rem; }
  .plan-box small { font-size: 1.3rem; }
  .plan-price h3  { font-size: 1.8rem; }

  .plan-header h5 { font-size: 1rem; }
  .icon-plan      { width: 26px; height: 26px; }

  /* ----- CTA FORM ----- */
  .btn-cta-wsp,
  .btn-cta-tel {
    font-size: 14px;
    padding: 13px 16px;
  }

  /* ----- MINI BENEFICIOS ----- */
  .mini-beneficio { padding: 14px; }
  .mini-beneficio img { width: 40px; }
}