/* =====================================================================
   RAMNET TELECOM — mobile.css
   Estilos dedicados para experiência mobile (≤ 768px)
   ===================================================================== */

/* ─── Horizontal scroll on plan cards (mobile snap) ───────────────── */
@media(max-width:600px){
  .plans__grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:16px;
    padding:0 24px 16px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    max-width:100%;
    margin:0;
  }
  .plans__grid::-webkit-scrollbar{display:none}
  .plan-card{
    flex:0 0 280px;
    scroll-snap-align:center;
    transform:none!important;
  }
  .plan-card--featured{
    border-width:3px;
    box-shadow:0 12px 32px rgba(0,168,212,.25);
  }
  .plans__grid::after{
    content:'';
    flex:0 0 8px;
  }
  /* Swipe indicator */
  .plans .section-header::after{
    content:'← Deslize para ver mais planos →';
    display:block;
    font-size:.75rem;
    color:var(--gray-text);
    margin-top:8px;
    text-align:center;
  }
}

/* ─── Hero touch swipe hint ────────────────────────────────────────── */
@media(max-width:768px){
  .hero__arrow{display:none}
  .hero__dots{bottom:14px}
  .hero__title{max-width:100%}
}

/* ─── Mobile combo builder ──────────────────────────────────────────── */
@media(max-width:768px){
  .combo__sidebar{
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:800;
    border-radius:16px 16px 0 0;
    box-shadow:0 -4px 32px rgba(0,0,0,.18);
    transform:translateY(calc(100% - 68px));
    transition:transform .32s cubic-bezier(.25,.46,.45,.94);
  }
  .combo__sidebar.expanded{
    transform:translateY(0);
  }
  .combo-sidebar__inner{
    padding:0;
  }
  .combo-sidebar__handle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 22px;
    border-bottom:1px solid var(--gray-mid);
    cursor:pointer;
  }
  .combo-sidebar__handle-text{
    font-family:'Exo 2',sans-serif;
    font-weight:700;
    font-size:.9rem;
    color:var(--text);
  }
  .combo-sidebar__handle-price{
    font-family:'Exo 2',sans-serif;
    font-weight:900;
    font-size:1.25rem;
    color:var(--cyan);
  }
  .combo-sidebar__handle::before{
    content:'';
    position:absolute;
    top:8px;left:50%;transform:translateX(-50%);
    width:36px;height:4px;border-radius:2px;
    background:var(--gray-mid);
  }
  .combo-sidebar__content{
    padding:18px 20px 20px;
    max-height:60vh;
    overflow-y:auto;
  }
  /* Push content above fixed sidebar */
  .combo-builder{padding-bottom:80px}
}

/* ─── Mobile channel grid ───────────────────────────────────────────── */
@media(max-width:480px){
  .channels__grid{
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }
  .ch-card{padding:8px}
  .channels__tabs{flex-direction:column;gap:8px}
  .ch-tab{text-align:left;padding:12px 16px}
}

/* ─── Mobile apps grid ──────────────────────────────────────────────── */
@media(max-width:400px){
  .apps__grid{grid-template-columns:repeat(2,1fr)}
}

/* ─── Mobile navigation ─────────────────────────────────────────────── */
@media(max-width:768px){
  .header__inner{padding:12px 20px}
  .header__logo-link img{height:40px}
  .top-bar__phone{display:none}
  .cat-bar{display:none} /* Hide category bar on mobile, nav drawer is sufficient */
}

/* ─── Mobile contact form ───────────────────────────────────────────── */
@media(max-width:600px){
  .contact-form{padding:22px 18px}
  .contact-wa{padding:22px 18px}
  .contact__tabs{background:transparent;padding:0;width:100%;flex-direction:row;flex-wrap:wrap}
  .ctab{flex:1;min-width:0;padding:10px 12px;font-size:.82rem;background:var(--gray-bg);border:1px solid var(--gray-mid);border-radius:8px}
  .ctab.active{background:var(--cyan);color:#fff}
}

/* ─── Mobile empresa cards ──────────────────────────────────────────── */
@media(max-width:768px){
  .empresa-card{padding:22px 18px}
}

/* ─── Mobile footer ─────────────────────────────────────────────────── */
@media(max-width:480px){
  .footer{padding:40px 0 0}
  .footer__grid{gap:20px;padding-bottom:28px}
  .whatsapp-float{bottom:16px;right:16px}
}

/* ─── Touch-friendly minimum tap targets ────────────────────────────── */
@media(max-width:768px){
  .btn{min-height:48px}
  .city-chip{min-height:40px;padding:9px 16px}
  .ptoggle{min-height:44px}
  .ch-cat{min-height:38px}
}

/* ─── Prevent text overflow on small screens ────────────────────────── */
@media(max-width:380px){
  .section-title{font-size:1.75rem}
  .hero__title{font-size:1.625rem}
  .coverage__title{font-size:1.625rem}
  .empresa-grid{gap:16px}
}

/* ─── WhatsApp float — avoid overlap with combo sidebar ─────────────── */
@media(max-width:768px){
  .whatsapp-float{bottom:80px}
  .page-combo .whatsapp-float{bottom:124px}
}