/* =========================================================
   RATIO — mobile.css
   Todos os overrides responsivos do sistema.
   Breakpoints:
     tablet  : max-width 1024px
     phablet : max-width 768px
     mobile  : max-width 480px
   Depende de: base.css, layout.css, components.css
   ========================================================= */

/* ---------------------------------------------------------
   Tablet (≤ 1024px)
   --------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Layout */
  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* Hero */
  .hero-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .hero__title {
    font-size: var(--text-4xl);
  }

  /* Produto */
  .product-feature {
    grid-template-columns: 1fr;
  }

  .product-feature__visual {
    min-height: 280px;
  }

  .product-visual-title {
    font-size: 5rem;
  }

  /* Diferenciais */
  .diferenciais-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Footer */
  .footer__main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  /* Sobre */
  .about__content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Fundamentos */
  .fundamentos__grid {
    gap: var(--space-4);
  }

  /* Linha Institucional */
  .guias-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   Phablet (≤ 768px)
   --------------------------------------------------------- */
@media (max-width: 768px) {

  /* Tokens de seção */
  :root {
    --section-padding-y: 4rem;
  }

  /* Container */
  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* Header: esconde nav e exibe hamburger */
  .main-nav {
    display: none;
  }

  .header__cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Reduz utils de acessibilidade no header */
  .header__utils {
    gap: var(--space-2);
  }

  /* Hero */
  .hero-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
    min-height: unset;
  }

  .hero-layout__visual {
    order: -1;
    max-width: 340px;
    width: 100%;
    margin: 0 auto;
  }

  .hero__visual-container {
    max-width: 300px;
    margin: 0 auto;
  }

  .hero__title {
    font-size: var(--text-3xl);
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  /* Grid 2 → 1 coluna */
  .grid-2,
  .grid-2--wide,
  .grid-2--narrow {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Grid 3 → 1 coluna */
  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* Grid 4 → 2 colunas */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Sobre */
  .about__content {
    grid-template-columns: 1fr;
  }

  /* Fundamentos */
  .fundamentos__grid {
    grid-template-columns: 1fr;
  }

  /* Produto */
  .product-feature__content {
    padding: var(--space-8) var(--space-6);
  }

  .product-feature__name {
    font-size: var(--text-3xl);
  }

  /* Diferenciais */
  .diferenciais-grid {
    grid-template-columns: 1fr;
  }

  /* Layout aside */
  .layout-with-aside {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Seção header */
  .section__header {
    margin-bottom: var(--space-8);
  }

  h2 {
    font-size: var(--text-2xl);
  }

  h3 {
    font-size: var(--text-xl);
  }

  /* Footer */
  .footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .footer__brand {
    grid-column: auto;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* Página editorial */
  .page-editorial {
    padding-top: calc(var(--header-height) + var(--space-8));
  }

  .page-editorial__title {
    font-size: var(--text-2xl);
  }

  /* Pullquote */
  .pullquote {
    font-size: var(--text-xl);
    padding-left: var(--space-4);
  }
}

/* ---------------------------------------------------------
   Mobile (≤ 480px)
   --------------------------------------------------------- */
@media (max-width: 480px) {

  :root {
    --section-padding-y: 3rem;
  }

  /* Container com margens menores */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Hero mais compacto */
  .hero {
    padding-top: calc(var(--header-height) + var(--space-8));
    padding-bottom: var(--space-9);
  }

  .hero__title {
    font-size: var(--text-2xl);
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Grid 4 → 1 coluna */
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Fundamento numbers menores */
  .fundamento-item__number {
    font-size: var(--text-3xl);
  }

  /* Product visual menor */
  .product-feature__visual {
    min-height: 220px;
    padding: var(--space-6);
  }

  .product-visual-mark__name {
    font-size: var(--text-2xl);
  }

  /* Contato info */
  .contact-info {
    padding: var(--space-6);
  }

  /* Footer mais compacto */
  .footer__legal-links {
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Botão full width no produto */
  .product-feature__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-feature__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------
   Print
   --------------------------------------------------------- */
@media print {
  .site-header,
  .hamburger,
  .mobile-nav,
  .hero__actions,
  .contact-form {
    display: none !important;
  }

  body {
    background: #FFFFFF;
    color: #000000;
    font-size: 12pt;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }
}