/* ==========================================================================
   ORBELO — Responsividade
   Mobile não é o desktop encolhido: tipografia, ritmo e navegação próprios.
   ========================================================================== */

/* ============================ ≤ 1280px =================================== */
@media (max-width: 1280px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .about__title { max-width: 18ch; }
  .process__grid { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; }
  .process__dial { width: 128px; height: 128px; }
  .process__step { font-size: 2rem; }
}

/* ============================ ≤ 1024px =================================== */
@media (max-width: 1024px) {
  /* Navegação passa para o menu em tela cheia */
  .nav__links { display: none; }
  .burger { display: block; }
  .nav__actions .btn--sm { display: none; }

  /* Cases: carrossel nativo com snap, sem pin de scroll */
  .cases__pin { height: auto !important; }
  .cases__stage { overflow: visible; }
  .cases__track {
    transform: none !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .cases__track::-webkit-scrollbar { display: none; }
  .case { scroll-snap-align: start; width: min(78vw, 560px); }
  .case--end { width: min(70vw, 420px); }

  /* Processo: dial vira faixa horizontal no topo */
  .process__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .process__aside {
    position: static;
    grid-auto-flow: column; align-items: center; gap: 20px;
    justify-items: start; justify-content: start;
  }
  .process__dial { width: 88px; height: 88px; }
  .process__step { font-size: 1.375rem; }

  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

/* ============================= ≤ 860px =================================== */
@media (max-width: 860px) {
  .statement__body { margin-left: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .sec-head--row { align-items: flex-start; }
  .sec-head__note { max-width: none; }
}

/* ======================= 768px – 1024px (tablet) ========================= */
@media (min-width: 768px) and (max-width: 1024px) {
  :root { --fs-hero: clamp(2.75rem, min(8.2vw, 12.4vh), 5.5rem); }
}

/* ============================= ≤ 767px =================================== */
@media (max-width: 767px) {
  :root {
    --fs-hero:    clamp(2.75rem, 13.2vw, 4.5rem);
    --fs-display: clamp(2.125rem, 10.4vw, 3.5rem);
    --fs-title:   clamp(1.875rem, 8.4vw, 2.75rem);
    --section-y:  clamp(84px, 13vh, 120px);
  }

  .hero { min-height: 100svh; padding-top: calc(var(--nav-h) + 56px); }
  .hero__title { max-width: 13ch; }
  .hero__lead { font-size: 1rem; max-width: 40ch; }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero__meta { display: none; }
  .hero__orbit { width: 148vw; top: 44%; }
  .hero__grid { background-size: 48px 48px; }

  /* Serviços: linha em duas faixas, número acima do nome */
  .svc__row {
    grid-template-columns: minmax(0, 1fr) 36px;
    grid-template-areas:
      "num  icon"
      "name icon";
    gap: 8px 16px;
    padding: 22px 0;
    align-items: center;
  }
  .svc__num  { grid-area: num; }
  .svc__name { grid-area: name; }
  .svc__icon { grid-area: icon; align-self: center; width: 34px; height: 34px; }
  .svc__hint { display: none; }
  .svc__row:hover .svc__name { transform: none; }
  .svc__item.is-open .svc__name { transform: none; }
  .svc__panel-in p,
  .svc__tags { margin-left: 0; }
  .svc__panel-in p { font-size: 1rem; }

  /* Cases */
  .case { width: min(84vw, 460px); }
  .case--end { width: min(78vw, 380px); }
  .case__open { opacity: 1; transform: none; left: 14px; bottom: 14px; }

  /* Processo */
  .step { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 0; }
  .step__n { letter-spacing: .22em; }

  /* Footer */
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer__logo img { width: min(78vw, 300px); }

  .cta__title { max-width: 14ch; }
  .cta__actions .btn { width: 100%; justify-content: center; }
  .cta__actions { justify-items: stretch; width: 100%; }
  .cta__mail { justify-self: center; }
}

/* ============================= ≤ 480px =================================== */
@media (max-width: 480px) {
  :root { --gutter: 20px; }

  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .stats__v { font-size: 2.25rem; }

  .pillars li { gap: 14px; }
  .case__facts { gap: 4px 18px; }
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
  .process__aside { grid-auto-flow: row; }
}

/* ============================= ≤ 360px =================================== */
@media (max-width: 360px) {
  :root { --gutter: 16px; --fs-hero: 2.5rem; }
  .btn { --btn-pad-x: 20px; font-size: .78rem; }
  .menu__nav a { font-size: 2rem; }
}

/* =========================== Telas largas ================================ */
@media (min-width: 1800px) {
  :root { --maxw: 1720px; }
  .case { width: clamp(560px, 42vw, 880px); }
}

/* ======================= Orientação paisagem (baixa) ===================== */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 48px; }
  .hero__base { display: none; }
  .pause { min-height: auto; }
}

/* ======================= Ponteiro grosso (touch) ========================= */
@media (hover: none) {
  .svc__row::before { display: none; }
  .btn:hover::before { transform: translate3d(0, 101%, 0); }
  .btn:active::before { transform: none; }
}