/* Página Manutenção e evolução (/desenvolvimento/manutencao-e-hospedagem/). Só o que é desta página.
   A base vem do previa.css e do previa-servico.css (topo, sinais, ficha, formas de trabalhar, perguntas, para continuar). Prefixo mn-.
   Blocos novos: o miolo de "na prática" (.mn-caso, .mn-outros) e os três trabalhos de todo mês (.mn-trabalho, com a tela .mn-vin).
   Rótulos em Fira Sans. Telas ilustradas sem número, sem nome e sem prazo. */

/* ---------- 1. topo ---------- */
/* título: a quebra equilibrada da casa deixava "Manutenção" sozinha na primeira linha e separava "manutenção mensal".
   Com a quebra comum, o nome do serviço fica junto onde cabe; em tela muito estreita ele volta a quebrar, sem vazar */
.mn-topo h1{text-wrap:wrap}
/* atalhos "Nesta página" */
.mn-topo .ja-integramos .nomes a{text-decoration-thickness:1px;text-underline-offset:3px}
.mn-topo .ja-integramos .nomes a:hover{text-decoration-thickness:2px;text-decoration-color:var(--acento)}
@media (min-width:621px) and (max-width:980px){
  /* telas estreitas: quando rótulo e valor não cabem lado a lado, o valor desce para a linha de baixo (nada é cortado) */
  .mn-topo .hero-fluxo .ui .linha{flex-wrap:wrap;row-gap:1px}
  .mn-topo .hero-fluxo .ui .linha > b{text-align:left}
}
@media (min-width:621px) and (max-width:767px){
  /* nesta faixa o valor descia em duas das três telas e a do meio ficava mais baixa: nas três o valor fica embaixo do rótulo, como no celular */
  /* só a primeira linha: a segunda continua escondida abaixo de 981px */
  .mn-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;gap:4px}
}
@media (min-width:981px) and (max-width:1060px){
  /* o primeiro e o terceiro cartão saíam da moldura pontilhada */
  .mn-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .mn-topo .hero-fluxo .ui:nth-child(5){transform:translateX(8%)}
}
@media (max-width:980px){
  /* atalhos são navegação: 44px de altura para o dedo */
  .mn-topo .ja-integramos > b{margin-bottom:0}
  .mn-topo .ja-integramos .nomes a{display:inline-block;padding-block:13px}
}

/* ---------- 3. na prática (#abeeolica): o portal no ar, o depoimento, a ficha e os outros trabalhos que seguem com o time ---------- */
/* bloco de prova: o título fica em meia coluna e precisa ser menor */
.mn-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
.mn-caso{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:28px clamp(28px,4vw,56px);align-items:center;margin-top:40px}
/* a imagem do portal tem 2,5% de margem transparente de cada lado (é a sombra). A figura cresce esse tanto para a janela do navegador
   alinhar com a borda do título e da ficha, como a página do projeto faz com a mesma imagem */
.mn-tela{width:105.26%;margin-left:-2.63%}
.mn-tela picture{display:block}
.mn-tela img{width:100%;height:auto}
.mn-tela figcaption{margin-top:4px;padding-inline:2.5%;font-size:13.5px;line-height:1.45;color:var(--fg2)}
.mn-tela figcaption a{color:var(--titulo);text-decoration-thickness:1px;text-underline-offset:3px}
.mn-tela figcaption a:hover{text-decoration-thickness:2px;text-decoration-color:var(--acento)}
/* depoimento: o cartão da casa (.depo-assume, previa.css), com o texto inteiro */
.mn-caso .depo-assume{margin-top:0;padding:24px;border-radius:var(--raio)}
.mn-caso .depo-assume blockquote{font-size:16.5px;line-height:1.55}
.mn-caso .depo-assume figcaption{margin-top:12px}
/* o nome numa linha e o cargo na outra: em linha única, o nome da associação ficava sozinho na segunda linha */
.mn-caso .depo-assume figcaption b{display:block}
.mn-pratica .tg-base{margin-top:32px}
/* a quarta linha da ficha é a mais comprida: ocupa a largura toda */
.mn-pratica .tg-ficha .tg-dados > div:last-child{grid-column:1/-1}
/* a ficha sem a sobra embaixo: a lista trazia a margem padrão do navegador (14,5px), e o pé ficava com o dobro do respiro do alto.
   É o mesmo acerto da ficha de WhatsApp e atendimento (conferência da onda, 08/10/2026) */
.mn-pratica .tg-ficha{padding-bottom:12px}
.mn-pratica .tg-ficha .tg-dados{margin-bottom:0}
.mn-pratica .tg-cab img{height:30px}
/* outros trabalhos: um cartão curto para cada um, sobre o roxo (o cartão é o .auto-lista do serviço, em colunas) */
.mn-pratica .sub-t{margin-top:44px}
.mn-outros{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.mn-outros li{display:flex;flex-direction:column}
.mn-outros h4{margin:4px 0 0;font-size:1.15rem;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--titulo)}
.mn-outros .mn-desde{margin-top:auto;padding-top:12px;font-size:13px;font-weight:600;color:var(--fg)}

/* ---------- 4. todo mês (#todo-mes): três cartões, cada um com uma tela ilustrada, o trabalho e o que ele é ---------- */
.mn-ilus{margin-top:36px;font-size:14px;color:var(--fg2)}
.mn-trabalhos{margin-top:12px}
@media (min-width:981px){.mn-trabalhos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}  /* até 620px é o carrossel da casa */
.mn-trabalho{display:grid;grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:10px;align-content:start;padding:14px 14px 24px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--branco)}
.mn-trabalho h3{padding:8px 8px 0;font-size:1.4rem;line-height:1.18;color:var(--titulo)}
.mn-trabalho p{padding-inline:8px;font-size:15.5px;line-height:1.5;color:var(--fg2)}
/* tela ilustrada: o cartão .ui da casa numa moldura de papel, na mesma altura nos três */
.mn-vin{display:grid;align-items:center;min-height:172px;padding:16px;border-radius:10px;background:var(--papel)}
.mn-vin .ui{position:relative;width:100%;max-width:none;font-size:12.5px;box-shadow:0 12px 26px -16px rgba(42,8,40,.45),0 1px 3px rgba(42,8,40,.08)}
.mn-vin .ui header small{opacity:1}
.mn-vin .ui .corpo{padding:11px 12px 13px;gap:8px}
/* linha com valor em texto e linha com pílula ficam da mesma altura: as três telas saem iguais */
.mn-vin .ui .linha{min-height:22px}
/* lista do que a manutenção de um site cobre: só entra se o Felipe responder a pergunta 7 (ver o comentário na página) */
.mn-cobre-t{margin-top:34px}
.mn-cobre{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mn-cobre li{padding:7px 14px;border:1px solid var(--linha);border-radius:999px;background:var(--chip);font-size:15px;font-weight:600;color:var(--titulo)}

/* ---------- 6. perguntas: a linha do suporte, uma vez ---------- */
.mn-suporte{margin-top:6px}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .mn-outros{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  /* uma coluna: a figura segue na largura do texto (regra de base), com a janela do navegador alinhada ao título, ao depoimento e à ficha */
  .mn-caso{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .mn-pratica .tg-ficha .tg-dados > div:last-child{grid-column:auto}
}
@media (min-width:621px) and (max-width:980px){
  /* tablet: um trabalho por linha, a tela à esquerda e o texto à direita */
  .mn-trabalhos{display:grid;gap:14px}
  .mn-trabalho{grid-row:auto;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,290px) minmax(0,1fr);column-gap:18px;padding:14px}
  .mn-trabalho .mn-vin{grid-row:1 / span 2}
  .mn-trabalho h3{align-self:end;padding:0}
  .mn-trabalho p{align-self:start;padding-inline:0}
}
@media (max-width:620px){
  .mn-ilus{margin-top:28px}
  /* os outros trabalhos viram o carrossel da casa (o .auto-lista do serviço é grade: aqui volta a ser fileira) */
  .mn-outros.carrossel{display:flex;gap:12px}
  /* depoimento: a frase ocupa a largura toda e a foto desce para o lado do nome */
  .mn-caso .depo-assume{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:12px;row-gap:14px;align-items:center;padding:20px 18px}
  .mn-caso .depo-assume > div{display:contents}
  .mn-caso .depo-assume blockquote{grid-column:1/-1;grid-row:1;font-size:16px}
  .mn-caso .depo-assume img{grid-column:1;grid-row:2;width:56px;height:56px}
  .mn-caso .depo-assume figcaption{grid-column:2;grid-row:2;margin-top:0}
  /* os três trabalhos viram o carrossel da casa. Cartão branco em fundo branco: a borda mais escura avisa que há mais cartões ao lado */
  .mn-trabalhos.carrossel > .mn-trabalho{grid-row:auto;grid-template-rows:auto auto 1fr;border-color:#CFCBBD}
  .mn-trabalhos.carrossel.js > *:not(.no-centro){opacity:.8}
  .mn-vin{min-height:164px;padding:12px}
}
@media (max-width:374px){
  /* telas muito estreitas: o rótulo comprido quebra em duas linhas em vez de empurrar a pílula para fora da tela ilustrada */
  .mn-vin .ui .linha > span:first-child{white-space:normal}
}