/* ==========================================================================
   RESPONSIVE — breakpoint overrides, loaded last so it always wins.
   Breakpoints: 1080 (tablet-landscape), 820 (tablet), 560 (phone).
   The sticky-stack degrades to normal vertical flow below 980px.
   ========================================================================== */

@media (max-width: 1180px) {
  .sobre__grid { grid-template-columns: 1fr 1fr; }
  .sobre__photo { grid-row: span 1; grid-column: 1 / -1; min-height: 260px; }
  .brands { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
  .hero__lead { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
  .hero__aside { padding-bottom: 0; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 0; }
  .spe__grid { grid-template-columns: repeat(2, 1fr); }
  .empcard { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  /* Sticky-stack -> normal stacked cards for readability on small screens */
  .stack__card {
    position: relative;
    top: auto;
    height: auto;
    padding-top: 0;
    margin-bottom: var(--space-5);
  }
  .empcard {
    grid-template-columns: 1fr;
    transform: none !important;
    box-shadow: var(--shadow-md);
  }
  .empcard__media { min-height: 300px; order: -1; }
  .empcard__media::before {
    background: linear-gradient(0deg, rgba(11,11,12,0.5), transparent 40%);
  }
  .empcard__ghost { font-size: 9rem; bottom: auto; top: -1rem; }
}

@media (max-width: 900px) {
  /* Mobile nav drawer */
  .nav__toggle { display: grid; place-items: center; }
  .nav__menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 380px);
    z-index: 5;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--gutter);
    background: var(--c-paper);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  .nav__menu.is-open { transform: translateX(0); }
  /* Keep the logo reasonable on phones (the 85px desktop size is too tall here). */
  .nav__logo { height: 52px; }
  .nav.is-scrolled .nav__logo { height: 34px; }
  .nav__menu .nav__link { color: var(--c-ink); font-size: var(--fs-h4); font-family: var(--font-display); }
  .nav.is-scrolled .nav__link { color: var(--c-ink); }
  .nav__actions .btn { display: none; }
  /* Dedicated close (×) button, top-right inside the drawer. */
  .nav__close {
    display: grid; place-items: center;
    position: absolute; top: 1.25rem; right: var(--gutter);
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--c-white); color: var(--c-ink);
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .nav__close:hover { background: var(--c-sand); transform: rotate(90deg); }

  .sobre__top { grid-template-columns: 1fr; }
  .sobre__cols { align-self: start; }
  .tese__head, .spe__head, .emp__intro, .contato__shell, .fundador__grid, .footer__inner { grid-template-columns: 1fr; }
  .tese__intro, .spe__lead { justify-self: start; }
  .pillars { grid-template-columns: 1fr; }
  .step { grid-template-columns: 60px 1fr; }
  .step__desc { grid-column: 2; }
  .footer__inner { gap: var(--space-6); }
}

@media (max-width: 620px) {
  .hero__proof { grid-template-columns: 1fr; }
  .proof { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); }
  .proof__label { margin-top: 0; }
  .sobre__grid, .spe__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  /* Contato direto ocupa a linha inteira: telefone, e-mail e redes sem quebrar. */
  .footer__contact { grid-column: 1 / -1; }
  .empcard__meta { gap: var(--space-4); }
  .step { padding-block: var(--space-6); }
}

@media (max-width: 420px) {
  .footer__inner { grid-template-columns: 1fr; }
  .btn { padding: 0.95em 1.3em; }
}

/* --- Documento legal: índice lateral vira bloco no topo em telas estreitas --- */
@media (max-width: 900px) {
  .legal__body { grid-template-columns: 1fr; gap: var(--space-6); }
  .legal__index { position: static; top: auto; margin-bottom: var(--space-4); }
  .legal__toc { grid-template-columns: repeat(2, 1fr); border-left: none; }
  .legal__toc-link { margin-left: 0; padding-left: 0; border-left: none; }
  .legal__toc-link.is-active { border-left-color: transparent; }
  .legal__content { max-width: none; }
}

@media (max-width: 560px) {
  .legal__toc { grid-template-columns: 1fr; }
}