/* Do it! Print — responsividade global (mobile + tablet) */

/* ===== MICROINTERAÇÕES / HOVER (global) ===== */
a { transition: color .2s ease; }

/* sublinhado animado nos links do menu desktop */
.doit-desktop-nav a:not(:last-child) { position: relative; }
.doit-desktop-nav a:not(:last-child)::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 2px; background: #A8CF45;
  transform: scaleX(0); transform-origin: right;
  transition: transform .28s cubic-bezier(.16,.84,.36,1);
}
.doit-desktop-nav a:not(:last-child):hover::after { transform: scaleX(1); transform-origin: left; }

/* links do menu mobile */
.doit-mobile-panel a { transition: color .2s ease, padding-left .2s ease; }
.doit-mobile-panel a:not(:last-child):hover { color: #A8CF45; padding-left: 14px !important; }

/* rodapé + underline sutil nos links de texto */
footer a[style*="font-size: 15px"] { position: relative; }
footer a[style*="font-size: 15px"]::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .28s cubic-bezier(.16,.84,.36,1);
}
footer a[style*="font-size: 15px"]:hover::after { transform: scaleX(1); transform-origin: left; }

/* affordance de clique */
a, button, [role="button"] { cursor: pointer; }


/* ===== TABLET ===== */
@media (max-width: 1024px) {
  [data-screen-label] { min-width: 0 !important; }

  nav { padding-left: 24px !important; padding-right: 24px !important; }
  nav > div:last-child { gap: 20px !important; font-size: 14px !important; }

  header, section, footer { padding-left: 28px !important; padding-right: 28px !important; }

  h1 { font-size: 44px !important; }

  /* colapsa todos os grids */
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  .doit-desktop-nav { gap: 22px !important; font-size: 14px !important; }
}

/* ===== TABLET (menu enxuto vira hamburguer abaixo de 900px) ===== */
@media (max-width: 900px) {
  .doit-desktop-nav { display: none !important; }
  .doit-hamburger { display: flex !important; }
}

/* listas de cards em 2 colunas no tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  div[style*="repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===== MOBILE ===== */
@media (max-width: 640px) {
  nav { padding: 14px 18px !important; }
  nav img { height: 34px !important; }
  .doit-desktop-nav { display: none !important; }
  .doit-hamburger { display: flex !important; }

  header, section, footer { padding-left: 18px !important; padding-right: 18px !important; }
  header { padding-top: 60px !important; }

  h1 { font-size: 33px !important; letter-spacing: -1px !important; }
  h2 { font-size: 26px !important; letter-spacing: -0.6px !important; }

  /* CTA e blocos com padding generoso */
  section > div[style*="padding: 88px"],
  section > div[style*="padding: 72px"],
  section > div[style*="padding: 64px"] { padding: 40px 26px !important; }

  /* footer empilhado e alinhado */
  footer > div { text-align: left !important; }
  footer > div:last-child { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
}

/* ===================================================================== */
/* CORREÇÕES DE OVERFLOW / LAYOUT NO MOBILE                               */
/* ===================================================================== */

/* logos de clientes: mostrar inteiros (contain) em vez de cortados */
div[style*="height: 150px"] img {
  object-fit: contain !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  /* trava qualquer rolagem/estouro horizontal */
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  /* o container principal também contém o que vazar (círculos decorativos) */
  [data-screen-label] { overflow-x: hidden !important; }
  /* nenhuma imagem ultrapassa a largura da tela */
  img { max-width: 100% !important; }
  /* permite que itens de grid/flex encolham em vez de forçar largura */
  div[style*="grid-template-columns"] > *,
  div[style*="display: flex"] > * { min-width: 0 !important; }
  /* textos longos quebram em vez de estourar */
  h1, h2, h3, p { overflow-wrap: break-word; }
}

@media (max-width: 640px) {
  /* caixas CTA verdes (título + botão lado a lado) empilham */
  div[style*="border-radius: 28px"][style*="justify-content: space-between"],
  a[style*="border-radius: 20px"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
    text-align: left !important;
  }

  /* linha de estatísticas do hero quebra em vez de estourar */
  div[style*="gap: 48px"] { flex-wrap: wrap !important; gap: 22px 28px !important; }

  /* linha de botões do hero (Orçamento + Ver projetos) quebra */
  div[style*="align-items: center; gap: 20px"] { flex-wrap: wrap !important; }

  /* botões arredondados podem quebrar o texto se faltar espaço */
  a[style*="border-radius: 100px"] { white-space: normal; text-align: center; }

  /* imagens de destaque com largura fixa (mascote) se ajustam */
  img[style*="width: 340px"], img[style*="width: 300px"] { width: 100% !important; max-width: 340px !important; height: auto !important; }
}