/* MZ Finish Work — seções próprias da home (carregado depois de mega.css). */

/* ---------- Faixa "Who we are": foto 1064×935 quase inteira (a altura fixa antiga cortava os rostos) ---------- */
.about-band .about-photo { position: relative; overflow: hidden; border-radius: var(--radius-card); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.about-band .about-photo picture { display: block; }
.about-band .about-photo img { display: block; height: auto; aspect-ratio: 1064 / 935; max-height: 520px; object-position: 50% 20%;
  border-radius: 0; box-shadow: none; }
/* a arte do cliente clareia a foto à esquerda (rumo ao creme); sobre o espresso esse lado volta a escurecer */
.about-band .about-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(43, 31, 19, .46) 0%, rgba(43, 31, 19, 0) 28%); }
/* título em duas linhas (o limite de 12ch quebrava em três) */
.about-band-copy h2 { max-width: none; }
/* tablet (uma coluna): foto na largura toda, mais baixa, com os rostos no quadro; texto sem coluna estreita */
@media (min-width: 641px) and (max-width: 1024px) {
  .about-band .about-photo img { aspect-ratio: 16 / 10; max-height: none; object-position: 50% 12%; }
  .about-band-copy { max-width: 700px; }
  .about-band .about-band-lead { max-width: none; }
}

/* ---------- Fotos das seções divididas: 16:10 enquanto empilham, 4:3 lado a lado (961 px+) ---------- */
.mz-who-media, .mz-where-media { aspect-ratio: 16 / 10; }
.mz-who .mc-split-copy, .mz-where .mc-split-copy { min-width: 0; }
@media (min-width: 961px) {
  .mz-who-media, .mz-where-media { aspect-ratio: 4 / 3; }
}

/* ---------- Rótulos das seções novas ----------
   Em mega.css, ".mc-head p" e ".mc-split-copy p" ganham do ".mc-kicker" (17 px, cor de texto); aqui o rótulo
   volta ao padrão dos demais (14 px, cobre). Sobre o creme usa o cobre escuro: o cobre padrão não chega a
   4.5:1 em texto pequeno; sobre o espresso, dourado claro. */
.mz-who .mc-split-copy .mc-kicker, .mz-details .mc-head .mc-kicker, .mz-where .mc-split-copy .mc-kicker {
  margin: 0 0 12px; font-size: 14px; line-height: 1.3; }
.mz-details .mc-head .mc-kicker { color: var(--copper); }
.mz-who .mc-split-copy .mc-kicker { color: var(--orange-hover); }
.mz-where .mc-split-copy .mc-kicker { color: var(--gold-l); }
.mz-where .mc-kicker::before { background: var(--gold-l); }

/* ---------- Com quem trabalhamos (fundo creme) ---------- */
.mz-audience { list-style: none; margin: 6px 0 28px; padding: 0; border-top: 1px solid rgba(192, 128, 48, .38); }
.mz-audience-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid rgba(192, 128, 48, .38); }
.mz-audience-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--border); color: var(--copper); }
.mz-audience-ico .icon { width: 24px; height: 24px; }
.mz-audience-copy { min-width: 0; }
.mz-audience-copy h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.25;
  letter-spacing: 0; text-transform: none; color: var(--espresso); overflow-wrap: break-word; }
.mc-split-copy .mz-audience-copy p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }

/* ---------- Cada detalhe importa: 4 cards ----------
   Celular: card deitado (foto à esquerda, texto à direita). 561 px+: 2×2 com a foto em cima. 961 px+: 4 colunas. */
.mz-detail-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mz-detail-card { display: grid; grid-template-columns: minmax(104px, 38%) minmax(0, 1fr); overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.mz-detail-media { position: relative; min-height: 116px; background: var(--cream); }
.mz-detail-media picture { position: absolute; inset: 0; display: block; }
.mz-detail-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mz-detail-num { position: absolute; left: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--espresso); color: var(--gold-l);
  font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px #fff; }
.mz-detail-body { min-width: 0; align-self: center; padding: 14px 16px; }
.mz-detail-body h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0; text-transform: none; color: var(--espresso); overflow-wrap: break-word; }
.mz-detail-body p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.mz-detail-note { max-width: 60ch; margin: 22px auto 0; text-align: center; font-size: 14px; line-height: 1.5; font-style: italic; color: var(--muted); }
.mz-details .mc-details-cta { margin-top: 26px; }
@media (min-width: 561px) {
  .mz-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .mz-detail-card { display: flex; flex-direction: column; }
  .mz-detail-media { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
  /* o número fica entre a foto e o texto */
  .mz-detail-num { left: 20px; top: auto; bottom: -21px; width: 42px; height: 42px; font-size: 16px; box-shadow: 0 0 0 3px #fff; }
  .mz-detail-body { align-self: stretch; padding: 34px 22px 24px; }
  .mz-detail-body h3 { margin-bottom: 6px; font-size: 20px; }
  .mz-detail-body p { font-size: 15.5px; line-height: 1.55; }
}
@media (min-width: 961px) {
  .mz-detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .mz-detail-body { padding: 34px 20px 24px; }
}

/* ---------- Onde o trabalho acontece (faixa escura espresso, texto creme, acentos em dourado claro) ---------- */
.mz-where { color: var(--cream); background: var(--espresso) linear-gradient(120deg, rgba(74, 56, 38, 0) 45%, rgba(74, 56, 38, .5) 100%); }
.mz-where .mc-split-copy h2 { color: var(--cream); }
.mz-where .mc-split-copy > p:not(.mc-kicker) { color: var(--cream-d); }
.mz-where-media { box-shadow: 0 0 0 1px rgba(217, 160, 84, .4), 0 24px 60px rgba(0, 0, 0, .45); }
.mz-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 28px; padding: 0; }
.mz-chips li { max-width: 100%; padding: 7px 14px; border: 1px solid rgba(217, 160, 84, .6); border-radius: 999px;
  background: rgba(243, 234, 219, .05); color: var(--cream); font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
/* botão secundário sobre o espresso (a transição e o prefers-reduced-motion vêm de .btn) */
.mz-btn-cream { background: transparent; color: var(--cream); border-color: var(--gold-l); }
.mz-btn-cream:hover, .mz-btn-cream:focus-visible { background: var(--cream); color: var(--espresso); border-color: var(--cream); }

/* ---------- Rodapé: títulos das colunas em <h2 class="footer-col-title"> ----------
   Eram <h4> (pulava níveis de título); as regras antigas (.footer-grid h4 / .footer-col h4) miravam a tag,
   então o mesmo visual vem daqui. */
.site-footer .footer-col-title {
  display: inline-block; margin: 0 0 14px; padding: 0 0 10px; border-bottom: 2px solid var(--gold);
  color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 1.15;
  letter-spacing: .1em; text-transform: uppercase; }

/* Vídeos verticais (YouTube Shorts, Reels, celular) — video_grid_classes() em app/helpers.php.
   Só verticais: colunas estreitas em 9:16, centralizadas. Grade mista: o vertical entra no card 16:9
   inteiro (contain) com as laterais na cor da marca, sem cortar nem esticar. */
.video-grid--3.video-grid--portrait {
  grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); justify-content: center; gap: 22px; }
.video-grid--portrait .video-card--portrait .video-card-play,
.video-grid--portrait .video-card--portrait .video-card-file { aspect-ratio: 9 / 16; }
.video-card--portrait .video-card-play { background: var(--espresso, #2B1F13); }
.video-grid:not(.video-grid--portrait) .video-card--portrait .video-card-play img,
.video-grid:not(.video-grid--portrait) .video-card--portrait .video-card-file video { object-fit: contain; }
.video-grid:not(.video-grid--portrait) .video-card--portrait .video-card-play:hover img { transform: none; }
/* Um único vídeo horizontal: centralizado e maior. */
.video-grid--3.video-grid--single { grid-template-columns: minmax(0, 760px); justify-content: center; }

/* Áreas de toque no celular/tablet (varredura tools/test_responsive.py): telefone e e-mail do rodapé tinham 22 px de
   altura e o crédito da agência 17 px. O padding aumenta a área clicável para ~32 px sem mudar o desenho. */
@media (max-width: 1100px) {
  .footer-contact-list a[href^="tel:"], .footer-contact-list a[href^="mailto:"] { display: inline-block; padding-block: 5px; }
  .agency-credit a { display: inline-block; padding-block: 7px; }
}

/* ===== Celular e tablet (ajustes de 07/10/2026, pedido do cliente) ===== */
/* Logo maior no cabeçalho (era 42 px no celular e 50 px no tablet). */
@media (max-width: 1100px) { .brand-logo { height: 60px; } }
@media (max-width: 767px) { .brand-logo { height: 52px; } .header-inner { padding-block: 6px; } }
@media (max-width: 359px) { .brand-logo { height: 46px; } }

/* Barra fixa: rótulos sempre em uma linha ("FREE ESTIMATE" quebrava em duas no tablet). */
.dock-item span:not(.dock-chat-orb):not(.sr-only) { white-space: nowrap; }

/* Banner em vídeo no celular e no tablet em pé: os vídeos verticais têm parede/teto livres no alto e o profissional
   do meio para baixo. O texto fica compacto nessa faixa livre (etiqueta escondida, título menor, botões numa linha)
   e o escurecimento cobre só o alto, atrás do texto — o profissional aparece inteiro. */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .mc-hero-shade { background: linear-gradient(180deg,
    rgba(var(--shade-rgb, 43,31,19), calc(.82 * var(--shade-k, 1))) 0%,
    rgba(var(--shade-rgb, 43,31,19), calc(.58 * var(--shade-k, 1))) 26%,
    rgba(var(--shade-rgb, 43,31,19), 0) 46%,
    rgba(var(--shade-rgb, 43,31,19), 0) 74%,
    rgba(var(--shade-rgb, 43,31,19), calc(.35 * var(--shade-k, 1))) 100%); }
  .mc-hero-eyebrow { display: none; }
  .mc-hero-actions { flex-wrap: wrap; gap: 10px; }
  .mc-hero-actions .btn { flex: 0 1 auto; min-height: 44px; padding: 10px 16px; font-size: 14.5px; }
  .mc-hero-actions .btn:first-child { flex: 1 1 auto; }
}
@media (max-width: 767px) {
  .mc-hero-content { padding-top: 22px; }
  .mc-hero-title { font-size: clamp(28px, 7.8vw, 36px); margin-bottom: 10px; }
  .mc-hero-sub { font-size: 15px; line-height: 1.45; margin-bottom: 16px; }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .mc-hero-content { padding-top: 40px; }
  .mc-hero-title { font-size: clamp(40px, 6vw, 52px); margin-bottom: 12px; }
  .mc-hero-sub { margin-bottom: 18px; }
}
/* Celular grande (481–767 px) e tablet em pé: o vídeo vertical é ampliado e corta em cima e embaixo. Enquadramento
   mais alto (a cabeça do profissional desce para baixo do texto, as mãos continuam acima da barra fixa) e, no tablet,
   sem as etiquetas e com o título um pouco menor. */
@media (min-width: 481px) and (max-width: 767px) {
  .mc-hero-poster img, .mc-hero-video { object-position: 50% 40%; }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .mc-hero-poster img, .mc-hero-video { object-position: 50% 35%; }
  .mc-hero-proof { display: none; }
  .mc-hero-content { padding-top: 32px; }
  .mc-hero-title { font-size: clamp(38px, 5.6vw, 46px); }
}

/* ===== Tablet deitado com a barra de atalhos (ex.: iPad 1024×768, iPad Air 1180×820) =====
   O banner da home passava alguns pixels do fim da tela e os controles (pontos e pausa) ficavam sob a barra;
   nas páginas internas os dois botões empilhados empurravam "Our Story" para trás da barra.
   --mc-hero-top (strong.js) = barra do topo + cabeçalho; --mc-dock-h = altura real da barra de atalhos. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape),
       (min-width: 768px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .mc-hero-track { height: clamp(500px, calc(100svh - var(--mc-hero-top, 138px)), 720px); }
  .mc-hero-controls { bottom: calc(var(--mc-dock-h, 113px) + 14px); }
  .mc-hero-content { padding-bottom: calc(var(--mc-dock-h, 113px) + 62px); }
}
@media (min-width: 768px) and (max-width: 1100px) and (orientation: landscape) {
  .page-hero { padding-top: 40px; }
  .page-hero-actions { flex-direction: row; max-width: none; }
  .page-hero-actions .btn { width: auto; }
}
/* Celular: o botão de pausa do banner entrava 3 px sob a barra de atalhos */
@media (max-width: 767px) {
  .mc-hero-controls { bottom: calc(26px + env(safe-area-inset-bottom)); }
}
/* Notebook de tela baixa (ex.: 1280×720): os botões do topo das páginas internas encostavam no botão de atendimento */
@media (min-width: 1025px) and (max-height: 760px) {
  .page-hero { padding-top: 40px; }
}

/* ===== Velocidade (auditoria de desempenho, 07/10/2026) ===== */
/* Banner da home: as capas dos slides 2–4 ficavam em visibility:hidden dentro da tela e o loading="lazy" não as
   segurava — baixavam junto com a imagem principal. Até o mega.js liberar (is-warm, logo após o "load"), só a capa
   do slide ativo existe para o navegador. */
.mc-hero:not(.is-warm) .mc-hero-slide:not(.is-active) .mc-hero-poster { display: none; }
/* Topo das páginas internas no celular: versão de 1024 px da capa (a original tem 1600 px), quando existir —
   mesma camada de véu do strong.css; inner-hero.php define --page-hero-image-sm e pré-carrega a mesma imagem. */
@media (max-width: 699px) {
  .page-hero-bg {
    background-image:
      linear-gradient(105deg, rgba(30, 21, 12, .9) 0%, rgba(43, 31, 19, .84) 45%, rgba(30, 21, 12, .72) 100%),
      var(--page-hero-image-sm, var(--page-hero-image, none));
  }
}
/* Acessibilidade (PageSpeed): o botão "Get a Free Estimate" do rodapé herdava o branco 85% dos links do rodapé —
   4,2:1 sobre o cobre, abaixo dos 4,5:1 exigidos para texto de 15 px. Branco puro: 5,2:1. */
.site-footer a.footer-cta, .site-footer a.footer-cta:hover { color: #fff; }