/* ═══════════════════════════════════════════════════════════════════════════
   MUELLER — Responsividade
   Breakpoints: 1200px, 1024px, 768px, 480px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════ 1200px ════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  :root { --section-pad: var(--space-16); }

  .solucoes-grid { grid-template-columns: repeat(2, 1fr); }
  .hosting-features { grid-template-columns: repeat(2, 1fr); }

  .ia-visual-card { max-width: 320px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
}

/* ════════ 1024px ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Header */
  .nav-desktop { display: none; }
  .bubble-trigger { display: flex; }
  .bubble-menu { display: block; }

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
  }

  .hero-visual-col {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-4);
  }

  .hero-tech-panel {
    max-width: 520px;
    margin-inline: auto;
    text-align: left;
  }

  .hero-sub { max-width: 100%; margin-inline: auto; }
  .hero-ctas { justify-content: center; }
  .hero-services { justify-content: center; }

  /* IA */
  .ia-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .ia-visual { display: none; }

  /* Desenvolvimento */
  .dev-grid { grid-template-columns: 1fr; gap: var(--space-10); }

  /* Infra */
  .infra-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .infra-grid { grid-template-columns: repeat(2, 1fr); }

  /* Segurança */
  .sec-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .sec-card { min-height: auto; }

  /* Atendimento */
  .attend-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .attend-highlight { min-height: auto; }

  /* Experiência */
  .exp-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }
  .exp-number-block { padding: var(--space-8); }
  .exp-pillars { justify-content: center; }

  /* Contato */
  .contact-inner { grid-template-columns: 1fr; gap: var(--space-10); }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .footer-desc { max-width: 100%; }
}

/* ════════ 768px ═════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --section-pad: var(--space-12);
    --header-height: 64px;
  }

  /* Container */
  .container { padding-inline: var(--space-4); }

  /* Tipografia */
  h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 2rem); }

  /* Logo */
  .logo-name { font-size: 1.2rem; }
  .logo-tagline { display: none; }

  /* Hero */
  #inicio { min-height: auto; padding-bottom: var(--space-16); }
  .hero-title { font-size: clamp(1.8rem, 7vw, 2.8rem); }
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; max-width: 320px; justify-content: center; }

  .hero-tech-panel {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-lg);
  }
  .tech-panel-title { font-size: 0.72rem; }
  .tech-status-item { padding: 6px 10px; }
  .tech-status-name { font-size: 0.78rem; }
  .tech-status-val { font-size: 0.72rem; }
  .tech-step-icon { width: 28px; height: 28px; }
  .tech-step-label { font-size: 0.62rem; }
  .tech-flow-connector { min-width: 6px; }

  /* Soluções */
  .solucoes-grid { grid-template-columns: 1fr; gap: var(--space-4); }

  /* Hospedagem */
  .hosting-hero-bar { flex-direction: column; text-align: center; }
  .hosting-features { grid-template-columns: 1fr 1fr; }

  /* Atendimento */
  .attend-features { grid-template-columns: 1fr; }

  /* Dev mini cards */
  .dev-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-4);
  }
  .dev-mini-card {
    padding: var(--space-4) var(--space-3);
    min-height: 100px;
  }
  .dev-mini-card svg {
    width: 28px;
    height: 28px;
  }

  /* Experiência */
  .exp-number { font-size: clamp(4rem, 15vw, 7rem); }

  /* Clientes */
  .client-grid { grid-template-columns: 1fr; gap: var(--space-3); }

  /* Formulário */
  .contact-form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: var(--space-6); }

  /* CTA */
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { width: 100%; max-width: 320px; }

  /* Footer */
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Hosting datacenter */
  .hosting-datacenters { flex-direction: column; text-align: center; }
  .hosting-dc-flags { justify-content: center; }
}

/* ════════ 480px ═════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --section-pad: var(--space-10); }

  /* Logo */
  .logo-symbol { width: 36px; height: 36px; }

  /* Hero */
  .hero-badge { font-size: 0.65rem; }

  /* Hero Tech Panel */
  .hero-tech-panel {
    padding: var(--space-4);
  }
  .tech-panel-header {
    gap: var(--space-2);
  }
  .tech-panel-title {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
  }
  .tech-status-item {
    padding: 5px 8px;
  }
  .tech-status-name {
    font-size: 0.74rem;
  }
  .tech-status-val {
    font-size: 0.68rem;
  }
  .tech-flow-wrap {
    gap: 2px;
  }
  .tech-step-icon {
    width: 26px;
    height: 26px;
  }
  .tech-step-label {
    font-size: 0.58rem;
  }
  .tech-flow-connector {
    min-width: 4px;
    margin-bottom: 14px;
  }

  /* Infra */
  .infra-grid { grid-template-columns: 1fr; }

  /* Hosting */
  .hosting-features { grid-template-columns: 1fr; }

  /* Bubble menu */
  .bubble-menu { right: var(--space-4); }
  .bubble-trigger { right: var(--space-4); bottom: var(--space-4); }

  /* Botões */
  .btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }

  /* Toast */
  .toast { left: var(--space-4); right: var(--space-4); transform: translateX(0) translateY(120%); }
  .toast.show { transform: translateX(0) translateY(0); }
}

/* ════════ Acessibilidade — alto contraste ═══════════════════════════════════ */
@media (forced-colors: active) {
  .btn-accent { forced-color-adjust: none; }
  .card::before { display: none; }
}