/*
Theme Name: Deliverance Engenharia Diagnostica
Description: Tema proprio do site da Deliverance Engenharia Diagnostica, feito a partir do layout aprovado.
Author: Deliverance Engenharia Diagnostica
Version: 1.0
*/

/* ---- index.html ---- */

    * { box-sizing: border-box; }
    body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #2E3538; background: #ffffff; }
    a { color: inherit; text-decoration: none; }
    a:hover { opacity: 0.75; }
    .mono { font-family: 'IBM Plex Mono', monospace; }
    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    .hero-photo { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
    .logos-viewport { overflow: hidden; width: 100%; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
    .logos-track { display: flex; align-items: center; gap: 24px; width: max-content; animation: logos-scroll 28s linear infinite; }
    .logos-track:hover { animation-play-state: paused; }
    @keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .logo-card { width: 210px; height: 120px; border: 1px solid rgba(184,192,204,0.45); border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 16px; flex-shrink: 0; }
    .logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .servico-card { background: #ffffff; border-radius: 8px; overflow: hidden; display: block; box-shadow: 0 1px 2px rgba(46,53,56,0.05), 0 8px 20px rgba(46,53,56,0.07); transition: box-shadow 0.25s ease, transform 0.25s ease; }
    .servico-card:hover { box-shadow: 0 2px 4px rgba(46,53,56,0.07), 0 16px 32px rgba(46,53,56,0.12); transform: translateY(-3px); }
    .servico-card-photo { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
    .servico-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .servico-card-title { padding: 20px 22px; text-align: center; }
    .servico-card-title span { font-size: 16px; font-weight: 600; line-height: 1.4; }
  
    .voltar-topo { position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
      background:#495867; color:#ffffff; display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 14px rgba(46,53,56,0.28); opacity:0; visibility:hidden; z-index:60;
      transition:opacity 0.25s ease, visibility 0.25s ease; }
    .voltar-topo.visivel { opacity:1; visibility:visible; }
    .voltar-topo:hover { background:#2E3538; }
  
    .av-viewport { overflow:hidden; }
    .av-track { display:flex; gap:24px; }
    .av-card { flex:0 0 calc((100% - 48px) / 3); border:1px solid rgba(184,192,204,0.7); border-radius:6px;
      padding:26px 24px 22px; text-align:left; display:flex; flex-direction:column; background:#ffffff;
      box-sizing:border-box; }
    .av-texto { font-size:14.5px; line-height:1.75; color:#495867; margin:14px 0 20px; flex:1;
      display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; }
    .av-rodape { border-top:1px solid rgba(184,192,204,0.5); padding-top:14px; }
    .av-nome { font-size:14px; font-weight:600; color:#2E3538; }
    .av-quando { font-size:12px; color:#95A5A6; margin-top:2px; }
    .av-nav { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:28px; }
    .av-seta { width:38px; height:38px; border-radius:50%; border:1px solid rgba(184,192,204,0.9);
      background:#ffffff; color:#495867; display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .av-seta:hover { border-color:#495867; }
    .av-seta[disabled] { opacity:0.35; cursor:default; }
    @media (max-width: 900px) { .av-card { flex-basis:calc((100% - 24px) / 2); } }
    @media (max-width: 640px) { .av-card { flex-basis:100%; } }
  
/* ---- servicos.html ---- */

    * { box-sizing: border-box; }
    body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #2E3538; background: #ffffff; }
    a { color: inherit; text-decoration: none; }
    a:hover { opacity: 0.75; }
    .mono { font-family: 'IBM Plex Mono', monospace; }
    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    .servico-row { display:grid; grid-template-columns:300px 1fr; gap:32px; padding:36px 0; border-bottom:1px solid rgba(184,192,204,0.45); align-items:center; }
    .servico-row.rev { grid-template-columns: 1fr 300px; }
    .servico-thumb { width:300px; aspect-ratio:4/3; border-radius:4px; overflow:hidden; background:#B8C0CC; }
    .servico-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .servico-cta { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:#495867; }
  
    .voltar-topo { position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
      background:#495867; color:#ffffff; display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 14px rgba(46,53,56,0.28); opacity:0; visibility:hidden; z-index:60;
      transition:opacity 0.25s ease, visibility 0.25s ease; }
    .voltar-topo.visivel { opacity:1; visibility:visible; }
    .voltar-topo:hover { background:#2E3538; }
  
/* ---- sobre.html ---- */

    * { box-sizing: border-box; }
    body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #2E3538; background: #ffffff; }
    a { color: inherit; text-decoration: none; }
    a:hover { opacity: 0.75; }
    .mono { font-family: 'IBM Plex Mono', monospace; }
    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    .dif-card { padding:28px; border:1px solid rgba(184,192,204,0.45); border-radius:4px; }
    .dif-card h3 { font-size:17px; font-weight:700; margin:16px 0 8px; }
    .dif-card p { font-size:14.5px; line-height:1.65; color:#495867; margin:0; }
    .team-card { text-align:center; }
    .team-photo { width:100%; aspect-ratio:1; border-radius:4px; background:linear-gradient(160deg,#B8C0CC,#95A5A6); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
  
    .voltar-topo { position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
      background:#495867; color:#ffffff; display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 14px rgba(46,53,56,0.28); opacity:0; visibility:hidden; z-index:60;
      transition:opacity 0.25s ease, visibility 0.25s ease; }
    .voltar-topo.visivel { opacity:1; visibility:visible; }
    .voltar-topo:hover { background:#2E3538; }
  
    .av-viewport { overflow:hidden; }
    .av-track { display:flex; gap:24px; }
    .av-card { flex:0 0 calc((100% - 48px) / 3); border:1px solid rgba(184,192,204,0.7); border-radius:6px;
      padding:26px 24px 22px; text-align:left; display:flex; flex-direction:column; background:#ffffff;
      box-sizing:border-box; }
    .av-texto { font-size:14.5px; line-height:1.75; color:#495867; margin:14px 0 20px; flex:1;
      display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; }
    .av-rodape { border-top:1px solid rgba(184,192,204,0.5); padding-top:14px; }
    .av-nome { font-size:14px; font-weight:600; color:#2E3538; }
    .av-quando { font-size:12px; color:#95A5A6; margin-top:2px; }
    .av-nav { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:28px; }
    .av-seta { width:38px; height:38px; border-radius:50%; border:1px solid rgba(184,192,204,0.9);
      background:#ffffff; color:#495867; display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .av-seta:hover { border-color:#495867; }
    .av-seta[disabled] { opacity:0.35; cursor:default; }
    @media (max-width: 900px) { .av-card { flex-basis:calc((100% - 24px) / 2); } }
    @media (max-width: 640px) { .av-card { flex-basis:100%; } }
  
/* ---- contato.html ---- */

    * { box-sizing: border-box; }
    body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #2E3538; background: #ffffff; }
    a { color: inherit; text-decoration: none; }
    a:hover { opacity: 0.75; }
    .mono { font-family: 'IBM Plex Mono', monospace; }
    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    input, textarea { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 15px; color: #2E3538; border: 1px solid rgba(184,192,204,0.7); border-radius: 3px; padding: 13px 16px; width: 100%; background: #ffffff; }
    input::placeholder, textarea::placeholder { color: #95A5A6; }
    input:focus, textarea:focus { outline: none; border-color: #495867; }
    label { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: #495867; margin-bottom: 8px; display: block; }
  
    .voltar-topo { position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
      background:#495867; color:#ffffff; display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 14px rgba(46,53,56,0.28); opacity:0; visibility:hidden; z-index:60;
      transition:opacity 0.25s ease, visibility 0.25s ease; }
    .voltar-topo.visivel { opacity:1; visibility:visible; }
    .voltar-topo:hover { background:#2E3538; }
  
/* ---- blog.html ---- */

    * { box-sizing: border-box; }
    body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #2E3538; background: #ffffff; }
    a { color: inherit; text-decoration: none; }
    a:hover { opacity: 0.75; }
    .mono { font-family: 'IBM Plex Mono', monospace; }
    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    .blog-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:32px; }
    .blog-card { display:flex; flex-direction:column; }
    .blog-thumb { width:100%; aspect-ratio:4/3; border-radius:4px; overflow:hidden; background:#B8C0CC; margin-bottom:16px; }
    .blog-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .blog-cta { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:#495867; margin-top:auto; }
  
    .voltar-topo { position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
      background:#495867; color:#ffffff; display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 14px rgba(46,53,56,0.28); opacity:0; visibility:hidden; z-index:60;
      transition:opacity 0.25s ease, visibility 0.25s ease; }
    .voltar-topo.visivel { opacity:1; visibility:visible; }
    .voltar-topo:hover { background:#2E3538; }
  
/* ---- blog-laudo-de-vistoria-de-imovel-novo.html ---- */

    * { box-sizing: border-box; }
    body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #2E3538; background: #ffffff; }
    a { color: inherit; text-decoration: none; }
    a:hover { opacity: 0.75; }
    .mono { font-family: 'IBM Plex Mono', monospace; }
    body.single .wrap { max-width: 760px; margin: 0 auto; padding: 0 40px; }
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    .article-body h2 { font-size:24px; font-weight:700; margin:44px 0 16px; color:#2E3538; }
    .article-body p { font-size:16.5px; line-height:1.8; color:#495867; margin:0 0 20px; }
    .article-body ul, .article-body ol { margin:0 0 20px; padding-left:22px; }
    .article-body li { font-size:16.5px; line-height:1.8; color:#495867; margin-bottom:8px; }
    .article-body strong { color:#2E3538; }
    .faq-item { border-bottom:1px solid rgba(184,192,204,0.45); padding:22px 0; }
    .faq-item:last-child { border-bottom:none; }
    .faq-item h3 { font-size:17px; font-weight:700; margin:0 0 8px; color:#2E3538; }
    .faq-item p { font-size:15.5px; line-height:1.7; color:#495867; margin:0; }
  
    .voltar-topo { position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
      background:#495867; color:#ffffff; display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 14px rgba(46,53,56,0.28); opacity:0; visibility:hidden; z-index:60;
      transition:opacity 0.25s ease, visibility 0.25s ease; }
    .voltar-topo.visivel { opacity:1; visibility:visible; }
    .voltar-topo:hover { background:#2E3538; }
  
/* ---- responsivo ---- */

/* ===== Ajustes de tela pequena (o layout original e' de desktop) ===== */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
/* NAO usar overflow-x:hidden em html/body: isso quebra o position:sticky do
   cabecalho. O estouro horizontal foi resolvido na origem (grades e menu). */

@media (max-width: 1024px) {
  .wrap { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 900px) {
  /* grades de colunas viram coluna unica — inline E por classe */
  [style*="grid-template-columns"],
  .servico-row, .rev, .blog-grid { grid-template-columns: 1fr !important; }
  /* miniaturas de largura fixa acompanham a coluna */
  .servico-thumb { width: 100% !important; }
  /* a foto vem sempre antes do texto, inclusive nas linhas invertidas */
  .servico-row .servico-thumb { order: -1 !important; }
  /* cabecalho em duas linhas: logo + botao em cima, menu embaixo.
     o container interno do header e' inline em algumas paginas, por isso "header > div" */
  header > div { flex-wrap: wrap !important; height: auto !important;
                 padding-top: 14px !important; padding-bottom: 14px !important;
                 row-gap: 12px !important; }
  header nav { order: 3 !important; width: 100% !important;
               justify-content: center !important; gap: 20px !important; flex-wrap: wrap !important; }
  /* faixas panoramicas ficam mais altas no celular */
  [style*="aspect-ratio:21/7"], [style*="aspect-ratio:21/8"] { aspect-ratio: 16/9 !important; }
  /* espacamento vertical menor */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* no tablet, grades de 3 cartoes ficam em 2 colunas em vez de 1 */
@media (min-width: 640px) and (max-width: 900px) {
  .blog-grid, [style*="repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* faixas de numeros/estatisticas: 48px de padding fixo de cada lado estoura a
   tela pequena. Deixa quebrar linha e aperta o espacamento. */
@media (max-width: 700px) {
  [style*="display:flex"][style*="justify-content:center"] { flex-wrap: wrap !important; row-gap: 26px; }
  [style*="padding:0 48px"] { padding-left: 20px !important; padding-right: 20px !important; }
}

/* nome e assinatura do hero: tem width:100%, entao em tela estreita ocupavam
   quase toda a largura e ficavam enormes perto do resto do texto.
   Os dois encolhem juntos, mantendo a proporcao 380:255 do desktop. */
@media (max-width: 900px) {
  [style*="max-width:380px"] { max-width: 300px !important; }
  [style*="max-width:255px"] { max-width: 201px !important; }
}
@media (max-width: 640px) {
  [style*="max-width:380px"] { max-width: 235px !important; }
  [style*="max-width:255px"] { max-width: 158px !important; }
}

@media (max-width: 430px) {
  header nav { gap: 14px !important; }
  header nav a { font-size: 13px !important; }
}

/* itens de grade nao encolhem abaixo do proprio conteudo sem min-width:0 —
   era o que fazia o formulario de contato estourar a tela do celular */
@media (max-width: 900px) {
  [style*="grid-template-columns"] > * { min-width: 0 !important; }
}

@media (max-width: 640px) {
  /* o e-mail longo nao quebrava e empurrava a pagina de Contato */
  /* 'anywhere' (e nao 'break-word') porque so' ele reduz a largura minima
     do elemento — o link de e-mail e' item flex e nao encolhia */
  a { overflow-wrap: anywhere; }
  p, span, li { overflow-wrap: break-word; }
  form { min-width: 0 !important; padding: 26px 22px !important; }
  input, textarea, select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  h1 { font-size: 30px !important; line-height: 1.25 !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 19px !important; }
  .wrap { padding-left: 18px !important; padding-right: 18px !important; }
}