/* ==========================================================
   EMMANUEL NOLETO — AJUSTES RESPONSIVOS (NOV/2026)
   Acrescente ao FINAL de assets/css/styles.css.
   Não substitui estilos existentes, nem mexe em cores do Decap.
   ========================================================== */

/* Elementos de grade precisam poder encolher sem ultrapassar a tela. */
.hero-grid > *,
.two-col > *,
.content-grid > *,
.cards > *,
.blog-grid > *,
.contact-grid > *,
.footer-grid > *,
.en-location-inner > * {
  min-width: 0;
}

/* Tablet: troca o menu espremido por botão de navegação. */
@media (max-width: 1024px) {
  .site-header .nav-wrap {
    position: relative;
    min-height: 70px;
    gap: 12px;
  }

  .site-header .brand {
    min-width: 0;
    flex: 0 1 auto;
  }

  .site-header .brand img,
  .site-header .brand .brand-logo {
    display: block;
    width: min(220px, calc(100vw - 105px));
    max-width: 100%;
    max-height: 64px;
    height: auto;
    object-fit: contain;
  }

  .site-header .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-width: 46px;
    min-height: 46px;
    cursor: pointer;
  }

  .site-header .nav {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 80;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--line, #DFE7E8);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(23,57,74,.15);
  }

  .site-header .nav.open { display: flex; }

  .site-header .nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 6px;
    font-size: .95rem;
    line-height: 1.35;
    border-bottom: 1px solid var(--line, #DFE7E8);
    white-space: normal;
  }

  .site-header .nav a:last-child { border-bottom: 0; }

  .site-header .nav .nav-cta {
    justify-content: center;
    margin: 10px 0 4px;
    padding: 12px 16px;
    color: #fff;
    text-align: center;
  }
}

/* Celulares: hierarquia tipográfica, imagens e espaçamentos. */
@media (max-width: 760px) {
  html { scroll-padding-top: 90px; }
  body { overflow-x: clip; }

  .container {
    width: min(var(--max, 1160px), calc(100% - 32px));
  }

  .topline { font-size: .74rem; }
  .topline .container { padding-block: 6px; }

  .hero,
  .page-hero { padding-top: 30px; padding-bottom: 36px; }

  .hero-grid,
  .two-col,
  .content-grid,
  .contact-grid,
  .en-location-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px;
  }

  /* Hero da página inicial: etiqueta, título, imagem, descrição, botões. */
  .hero-grid > div:first-child { display: contents; }
  .hero-grid > div:first-child .eyebrow { order: 0; }
  .hero-grid > div:first-child h1 { order: 1; }
  .hero-grid > .hero-photo,
  .hero-grid.hero-grid-reverse > .hero-photo { order: 2 !important; }
  .hero-grid > div:first-child p.lead { order: 3; }
  .hero-grid > div:first-child .hero-actions { order: 4; }
  .hero-grid > div:first-child .pill-row { order: 5; }

  .two-col > :not(.image-panel) { order: 0 !important; }
  .two-col > .image-panel { order: 1 !important; }

  h1,
  .hero h1,
  .page-hero h1,
  .article-header h1 {
    font-size: clamp(1.85rem, 7.4vw, 2.55rem);
    line-height: 1.16;
    letter-spacing: -.03em;
    overflow-wrap: break-word;
  }

  h2,
  .section-heading h2,
  .prose h2,
  .article-body h2 {
    font-size: clamp(1.45rem, 5.4vw, 2rem);
    line-height: 1.23;
    overflow-wrap: break-word;
  }

  h3 { overflow-wrap: break-word; }
  p, li { overflow-wrap: break-word; }

  .hero p.lead,
  .page-hero p,
  .section-heading p { font-size: 1rem; line-height: 1.6; }

  .hero-grid { gap: 24px; }

  .hero-photo img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 3;
    max-height: 340px;
    object-fit: cover;
    border-radius: 20px 20px 20px 44px;
  }

  .hero-stamp {
    left: 10px;
    bottom: 10px;
    max-width: min(210px, 65%);
    padding: 10px 13px;
    border-radius: 12px;
  }
  .hero-stamp strong { font-size: .85rem; }
  .hero-stamp span { font-size: .72rem; }

  .image-panel img {
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 3;
    max-height: 380px;
    object-fit: cover;
    border-radius: 18px;
  }
  .image-panel::after {
    inset: 10px -4px -6px 8px;
    border-radius: 18px;
  }

  .section { padding-block: 44px; }
  .section-heading { margin-bottom: 24px; }

  .cards,
  .cards.cards-two,
  .cards.cards-four,
  .blog-grid,
  .steps {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 15px;
  }

  .card-image,
  .blog-card img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .card-body,
  .blog-card .body { padding: 18px; }

  .cta-band {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 24px 20px;
    border-radius: 20px;
  }
  .cta-band .btn,
  .hero-actions .btn {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    white-space: normal;
    text-align: center;
  }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn { flex: 1 1 100%; }

  .contact-card,
  .sidebar { padding: 20px; }
  .contact-item { min-width: 0; }
  .contact-item > div:last-child { min-width: 0; }
  .contact-item span { overflow-wrap: anywhere; }

  .article-body,
  .prose,
  .article-header { min-width: 0; }
  .article-cover {
    max-width: 100%;
    height: auto !important;
    border-radius: 16px;
  }

  .footer { padding: 38px 0 22px; }
  .footer .footer-grid,
  .footer.layout-two-columns .footer-grid,
  .footer.layout-one-column .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px;
  }
  .footer.layout-two-columns .footer-grid > div:last-child {
    grid-column: auto !important;
  }
  .footer .footer-logo { max-width: min(245px, 100%); }
  .legal { gap: 12px; margin-top: 26px; }

  .en-social-links { max-width: 100%; flex-wrap: wrap; }
  .en-social-links .en-social-link {
    min-height: 44px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .en-location .en-map-frame iframe {
    display: block;
    width: 100%;
    height: 260px;
    max-width: 100%;
  }

  .wa-float {
    width: 52px;
    height: 52px;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}

/* Telas bem estreitas, como 320px. */
@media (max-width: 360px) {
  .container { width: calc(100% - 28px); }
  .hero,
  .page-hero { padding-top: 24px; padding-bottom: 30px; }
  .hero-stamp { max-width: 70%; }
  .section { padding-block: 38px; }
  .tag { font-size: .67rem; }
  .card-body,
  .blog-card .body { padding: 16px; }
}

/* Respeita pessoas que preferem menos animações. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn,
  .nav-cta,
  .en-social-link { transition: none; }
}


/* ==========================================================
   SEÇÕES "SOBRE O PROFISSIONAL" — MOBILE
   Coloca a imagem entre título e texto, no início e na página Sobre.
   Demais layouts, cores e conteúdos continuam iguais.
   ========================================================== */
@media (max-width: 760px) {
  /* Os itens da coluna de texto passam a participar da grade, sem alterar o HTML. */
  .two-col > .split-copy {
    display: contents;
  }

  .two-col > .split-copy > .eyebrow { order: 0 !important; }
  .two-col > .split-copy > h2 { order: 1 !important; margin-bottom: 0; }
  .two-col > .image-panel { order: 2 !important; margin-block: 4px 8px; }
  .two-col > .split-copy > .muted { order: 3 !important; }
  .two-col > .split-copy > .check-list { order: 4 !important; }
  .two-col > .split-copy > .btn,
  .two-col > .split-copy > .text-link { order: 5 !important; justify-self: start; }
  .two-col > .split-copy > :not(.eyebrow):not(h2):not(.muted):not(.check-list):not(.btn):not(.text-link) {
    order: 6 !important;
  }

  /* Evita grandes espaços entre título, foto e parágrafo. */
  .two-col { row-gap: 14px !important; }
}