/* responsive.css — todos los media queries */

/* ================================
   TABLET — 900px
================================ */
@media (max-width: 900px) {
  /* Header */
  .header-fade  { display: none; }
  .hamburger    { display: flex; }
  .mobile-nav   { display: block; }
  .site-nav     { display: none; }
    .header-logo{
      flex:1;}

  /* 3 columnas → apilado. Orden: main(1) → left(2) → right(3) */
  .page-inner { flex-direction: column; gap: 14px; }
  .main-content { order: 1; width: 100%; }
  .sidebar-left  { order: 2; width: 100%; }
  .sidebar-right { order: 3; width: 100%; }

  /* Sidebars en fila horizontal en tablet */
  .sidebar-left .sidebar-inner  { flex-direction: row; flex-wrap: wrap; }
  .sidebar-left .sidebar-card   { flex: 1 1 200px; min-width: 180px; }
  .sidebar-right .sidebar-inner { flex-direction: row; flex-wrap: wrap; }
  .sidebar-right .sidebar-card  { flex: 1 1 200px; }

  /* Stats en 4 columnas */
  .sidebar-stats { grid-template-columns: repeat(4,1fr); }
  .stat-item { border-right: 1px solid rgba(109,196,255,.1); border-bottom: none; }
  .stat-item:last-child { border-right: none; }

  /* Banner */
  .banner      { height: 260px; }
  .slide       { padding: 0 50px; }
  .slide-icon  { width: 80px; height: 80px; margin-right: 20px; }
  .slide-title { font-size: 1.4rem; }
  .slide-desc  { font-size: .8rem; }

  /* Grids */
  .service-checklist  { grid-template-columns: 1fr; }
  .contact-info-grid  { grid-template-columns: 1fr; gap: 12px; }
  .plan-grid          { grid-template-columns: 1fr; max-width: 360px; }
  .testimonials-grid  { grid-template-columns: 1fr; }
  .areas-detail-grid  { grid-template-columns: 1fr; }
  .stats-row          { grid-template-columns: 1fr 1fr; }
  .stat-highlight:nth-child(2)   { border-right: none; }
  .stat-highlight      { border-bottom: 1px solid rgba(109,196,255,.12); }
  .stat-highlight:nth-child(n+3) { border-bottom: none; }
  .rating-summary { flex-direction: column; gap: 16px; }

  /* Footer */
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-brand  { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}

/* ================================
   MOBILE — 600px
================================ */
@media (max-width: 600px) {
  /* Header */
  .logo-text span  { display: none; }
  .logo-text       { font-size: .88rem; }
  .header-logo svg { width: 28px; height: 28px; }
  .header-phone    { display: none; }

  /* Banner */
  .banner      { height: 210px; }
  .slide       { padding: 0 44px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
  .slide-icon  { display: none; }
  .slide-tag   { font-size: .58rem; }
  .slide-title { font-size: 1.1rem; }
  .slide-desc  { font-size: .72rem; -webkit-line-clamp: 2; }
  .slide-cta   { font-size: .68rem; padding: 7px 14px; }
  .slider-prev, .slider-next { width: 28px; height: 28px; font-size: .8rem; }

  /* Page hero */
  .page-hero-inner { padding: 22px 14px 18px; }

  /* Layout */
  .page-inner { padding: 14px 12px; }

  /* Sidebars apilados */
  .sidebar-left .sidebar-inner,
  .sidebar-right .sidebar-inner { flex-direction: column; }
  .sidebar-stats { grid-template-columns: 1fr 1fr; }
  .stat-item { border-right: 1px solid rgba(109,196,255,.1); border-bottom: 1px solid rgba(109,196,255,.1); }
  .stat-item:nth-child(even) { border-right: none; }
  .stat-item:nth-child(n+3) { border-bottom: none; }

  /* Grids 1 col */
  .services-grid     { grid-template-columns: 1fr; }
  .service-checklist { grid-template-columns: 1fr; }
  .whyus-grid        { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .areas-grid        { grid-template-columns: 1fr; }
  .areas-detail-grid { grid-template-columns: 1fr; }
  .stats-row         { grid-template-columns: 1fr 1fr; }
  .plan-grid         { max-width: 100%; }

  /* Forms */
  .form-row  { grid-template-columns: 1fr; }
  .cta-row   { flex-direction: column; }
  .cta-row .btn-primary,
  .cta-row .btn-secondary { text-align: center; }

  /* Pricing */
  .pricing-table th,
  .pricing-table td { padding: 8px 10px; font-size: .75rem; }

  /* Footer */
  .footer-grid   { grid-template-columns: 1fr; gap: 20px; }
  .footer-inner  { padding-bottom: 80px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .bottom-call-bar { display: block; }
}

/* ================================
   VERY SMALL — 380px
================================ */
@media (max-width: 380px) {
  .logo-text   { font-size: .76rem; }
  .slide-title { font-size: .95rem; }
  .slide-desc  { display: none; }
  .page-hero h1 { font-size: 1.2rem; }
}