/* ══════════════════════════════════════════════════════
   TECNIAIRES — CSS EXCLUSIVO PARA MÓVIL
   Aplica en pantallas <= 768px
══════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {

  /* ── GENERAL ── */
  * { -webkit-tap-highlight-color: transparent; }
  body { overflow-x: hidden; }
  .container { padding: 0 14px !important; }
  .section { padding: 40px 0 !important; }
  .section-title { font-size: 20px !important; line-height: 1.25 !important; }
  .section-sub { font-size: 13px !important; }

  /* ── NAVBAR ── */
  #navbar { height: 56px !important; padding: 0 14px !important; }
  .nav-logo img { height: 34px !important; }
  .nav-logo span { font-size: 12px !important; }
  .nav-logo span em { font-size: 8px !important; display: inline !important; }
  .nav-links { display: none !important; }
  .nav-links.open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 56px !important; left: 0 !important; right: 0 !important;
    background: #0D1F6B !important;
    padding: 16px !important;
    gap: 0 !important;
    z-index: 999 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
  }
  .nav-links.open a {
    display: block !important;
    padding: 12px 4px !important;
    font-size: 14px !important;
    color: rgba(255,255,255,.85) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  .nav-links.open .btn {
    margin-top: 12px !important;
    display: flex !important;
    justify-content: center !important;
  }
  .nav-toggle { display: block !important; }

  /* ── BANNER ── */
  .banner { width: 100% !important; overflow: hidden !important; }
  .banner-track { display: flex !important; width: 100% !important; }
  .banner-slide {
    min-width: 100vw !important;
    width: 100vw !important;
    height: 480px !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  .banner-slide > img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  .banner-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(10,20,80,.3) 0%, rgba(10,20,80,.85) 100%) !important;
    z-index: 1 !important;
  }
  .banner-content {
    position: absolute !important;
    bottom: 60px !important;
    left: 0 !important; right: 0 !important;
    padding: 0 18px !important;
    z-index: 2 !important;
    max-width: 100% !important;
  }
  .banner-tag { font-size: 10px !important; margin-bottom: 8px !important; }
  .banner-content h2 { font-size: 20px !important; margin-bottom: 8px !important; line-height: 1.2 !important; }
  .banner-content p { font-size: 12px !important; margin-bottom: 12px !important; display: none !important; }
  .b-btns {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .b-btns .btn, .b-btns button, .b-btns a {
    flex: 1 !important;
    min-width: 120px !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
  .banner-badge { display: none !important; }
  .b-nav { display: none !important; }
  .b-dots { bottom: 14px !important; }
  .b-d { width: 6px !important; height: 6px !important; }
  .b-d.on { width: 16px !important; }
  .b-prog { height: 2px !important; }

  /* ── STATS ── */
  .stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .stat-item { padding: 14px 8px !important; border-right: 1px solid #BDD8FF !important; }
  .stat-item:nth-child(2) { border-right: none !important; }
  .stat-item:nth-child(3) { border-top: 1px solid #BDD8FF !important; }
  .stat-item:nth-child(4) { border-top: 1px solid #BDD8FF !important; border-right: none !important; }
  .stat-val { font-size: 22px !important; }
  .stat-label { font-size: 10px !important; }

  /* ── SERVICIOS ── */
  .services-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .svc-card { padding: 16px !important; }
  .svc-icon { width: 40px !important; height: 40px !important; font-size: 18px !important; }

  /* ── GALERÍA ── */
  .gallery-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* ── WHY ── */
  .why-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .why-item { padding: 14px !important; }

  /* ── PROCESO ── */
  .process-steps { grid-template-columns: 1fr 1fr !important; }
  .process-steps::before { display: none !important; }
  .step-num { width: 44px !important; height: 44px !important; font-size: 16px !important; }
  .step h4 { font-size: 13px !important; }
  .step p { font-size: 11px !important; }

  /* ── PLANES ── */
  .plans-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .plan.featured { transform: none !important; }
  .plan { padding: 18px !important; }
  .plan-price { font-size: 26px !important; }

  /* ── TESTIMONIOS ── */
  .testimonials-grid { grid-template-columns: 1fr !important; }
  .testi { padding: 16px !important; }

  /* ── CONTACTO ── */
  .contact-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .contact-form { padding: 18px !important; }
  .contact-info h3 { font-size: 16px !important; }

  /* ── CTA BAR ── */
  .cta-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .cta-inner h2 { font-size: 17px !important; }
  .cta-inner > div:last-child { display: flex !important; gap: 8px !important; width: 100% !important; }
  .cta-inner > div:last-child .btn { flex: 1 !important; justify-content: center !important; }

  /* ── FOOTER ── */
  footer { padding: 40px 0 0 !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-brand img { height: 36px !important; }
  .footer-bottom { flex-direction: column !important; gap: 6px !important; text-align: center !important; }

  /* ── POPUPS ── */
  #popup-convenios,
  #popup-agenda,
  #popup-hogares,
  #popup-empresas,
  #popup-industrias,
  #popup-hospitalario {
    align-items: flex-end !important;
  }
  #popup-convenios .popup-box,
  #popup-hogares > div,
  #popup-empresas > div,
  #popup-industrias > div,
  #popup-hospitalario > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh !important;
  }
  #popup-agenda > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    align-self: flex-end !important;
  }
  .convenios-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* ── BOTONES FLOTANTES ── */
  .float-btns { bottom: 14px !important; right: 12px !important; gap: 8px !important; }
  .wa-btn, .ai-btn { width: 46px !important; height: 46px !important; font-size: 20px !important; }

  /* ── CERTIFICACIONES ── */
  #certificaciones .container > div:last-child {
    grid-template-columns: 1fr !important;
  }

  /* ── PRODUCTOS ── */
  #tab-servicios-btn, #tab-aires-btn {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }
  #productos .container > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #promociones .container > div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* ── HERO SECTION ── */
  #hero { padding-top: 76px !important; padding-bottom: 40px !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-visual { display: none !important; }
  .hero h1 { font-size: 24px !important; }
  .hero-sub { font-size: 13px !important; margin-bottom: 20px !important; }
  .hero-btns { flex-direction: column !important; gap: 10px !important; }
  .hero-btns .btn { width: 100% !important; justify-content: center !important; }
  .hero-chips { gap: 6px !important; }
  .chip { font-size: 10px !important; padding: 4px 8px !important; }

  /* ── SECCIONES SECTOR ── */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── PANTALLAS MUY PEQUEÑAS ── */
@media screen and (max-width: 380px) {
  .banner-slide { height: 500px !important; }
  .banner-content h2 { font-size: 17px !important; }
  .b-btns .btn, .b-btns button, .b-btns a { font-size: 11px !important; padding: 8px !important; }
  .process-steps { grid-template-columns: 1fr !important; }
}