/* Textura e luz locais: sem camadas fixas pesadas por trás da página. */ body  {
  background-color: #f6f8f7;
  background-image: radial-gradient(circle at 12% 24%,#cce7de55,transparent 24%),radial-gradient(circle at 92% 60%,#d5e9e555,transparent 26%),radial-gradient(#95b6a83d .7px,transparent .7px);
  background-size: auto,auto,22px 22px;
}

.work  {
  background: linear-gradient(130deg,#eaf1edee,#f2f6f3ee);
}

.hero-mesh  {
  opacity: .65;
}

/* Fundos ocupam a seção inteira; apenas o conteúdo segue a largura editorial.
   Mantém os mesmos gutters de .shell sem recortar a luz junto ao texto. */
.hero.shell,.metodo.shell {
  width:100%;
  padding-inline:max(48px,calc((100% - 1320px)/2));
}

.hero > .hero-mesh {
  inset:0;
  mask-image:radial-gradient(ellipse at 65% 40%,#000 15%,transparent 75%);
}

.hero > .spark-field {
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 80%,transparent);
}

@media(max-width:1100px) {
  .hero.shell,.metodo.shell { padding-inline:32px; }
}
@media(max-width:760px) {
  .hero.shell,.metodo.shell { padding-inline:20px; }
}
@media(max-width:380px) {
  .hero.shell,.metodo.shell { padding-inline:16px; }
}

.preview-note button  {
  border: 0;
  background: transparent;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink);
  margin-left: 12px;
  padding: 7px;
}

/* O cabecalho de "Projetos" era titulo numa faixa, numero noutra, e a coluna
   estreita da grade ficava vazia: 405px ate o cartao, com 426px mortos a
   esquerda em 1440. Agora titulo e numero dividem a mesma faixa. */
.work-heading  {
  grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr);
  align-items: end;
  gap: 36px;
  margin-bottom: 30px;
}

.portfolio-proof  {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 0 0 30px;
}

.work-heading .portfolio-proof  {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
}

.portfolio-proof>strong  {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--green);
}

.portfolio-proof strong span  {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 150px;
  letter-spacing: 0;
  color: var(--ink);
}

.portfolio-proof p  {
  font-size: 13px;
}

.work-heading .portfolio-proof>strong  {
  font-size: 46px;
}

.work-heading .portfolio-proof strong span  {
  max-width: none;
}

.work-heading .portfolio-proof p  {
  margin: 0;
  max-width: 34ch;
}

@media (max-width:900px)  {
  .work-heading  {
    grid-template-columns: minmax(0,1fr);
    align-items: start;
    gap: 22px;
  }
  .work-heading .portfolio-proof>strong  {
    font-size: 40px;
  }
  /* Numa coluna so, o rotulo tem a largura toda: preso em 150px ele quebrava
     "sistemas completos em operacao" em quatro linhas ao lado do numero. */
  .work-heading .portfolio-proof strong span  {
    max-width: none;
  }
  .work-heading .portfolio-proof p  {
    max-width: none;
  }
}

.project-main  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #c2d7cd;
  border-radius: 24px;
  overflow: hidden;
  background: #fbfdfb;
}

.project-main-copy  {
  padding: 44px;
}

.project-main h3  {
  /* mesmo desenho da assinatura do portal: peso forte no nome, resto leve */
  font-size: clamp(28px,2.4vw,36px);
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 20px 0;
}

.project-main h3>b  {
  font-weight: 600;
  letter-spacing: .03em;
}

.project-main h3>span  {
  font-weight: 400;
  color: var(--muted);
}

.project-main-copy>p:not(.eyebrow)  {
  font-size: 15px;
  margin: 16px 0;
}

.project-tags  {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}

.project-tags span  {
  font-size: 11px;
  padding: 6px 10px;
  background: #eaf2ed;
  border-radius: 5px;
}

/* O painel usa as cores do Portal D+ (laranja da marca deles); o resto do
   cartao, o botao e a secao seguem no verde da Ludson Correa. */
.project-system  {
  /* Tokens do tema escuro "Grafite Quente" do Portal D+, copiados do :root de
     dmais_portal/static/css/theme.css, que o design system deles declara como
     fonte unica. Valem so dentro do painel: e a tela real do produto deles. */
  --pt-bg-0: #211f20;
  --pt-bg-1: #282526;
  --pt-bg-2: #2e2b2c;
  --pt-border: rgba(255,255,255,.08);
  --pt-border-forte: rgba(255,255,255,.17);
  --pt-text-0: #ffffff;
  --pt-text-2: rgba(255,255,255,.78);
  --pt-text-3: rgba(255,255,255,.58);
  --pt-text-4: rgba(255,255,255,.40);
  --pt-orange: #f97316;
  --pt-orange-2: #fb923c;
  --pt-chip-bg: rgba(255,255,255,.05);
  --pt-chip-border: rgba(255,255,255,.09);
  --pt-selecao-bg: rgba(249,115,22,.16);
  --pt-selecao-borda: rgba(249,115,22,.55);
  --pt-elev-1: 0 8px 28px rgba(0,0,0,.24);
  --pt-mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --pt-r-sm: 8px;
  --pt-r-md: 12px;
  --pt-ease: cubic-bezier(.2,.8,.2,1);
  --pt-dur: 180ms;
  padding: 38px;
  background: var(--pt-bg-0);
  color: var(--pt-text-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* anel de foco do design system deles */
.project-system :focus-visible {
  outline: 2px solid var(--pt-orange);
  outline-offset: 2px;
}

.system-title  {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  min-width: 0;
  margin-bottom: 30px;
}

.system-logo  {
  flex: none;
  width: 72px;
  height: auto;
}

.system-title>span  {
  font-size: 11px;
  letter-spacing: .15em;
  white-space: nowrap;
  color: var(--pt-text-3);
}

.system-modules  {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 12px;
}

.system-modules>span  {
  display: block;
  padding: 22px 17px;
  background: #ffffffae;
  border: 1px solid #c5dacf;
  border-radius: 10px;
  color: var(--muted);
  font-size: 11px;
}

.system-modules strong  {
  display: block;
  color: var(--ink);
  font-size: 15px;
  margin: 12px 0 5px;
}

.system-output  {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  margin-top: 28px;
  padding-top: 20px;
  color: var(--pt-text-2);
  border-top: 1px solid var(--pt-border);
}

.project-system small  {
  font-size: 11px;
  color: var(--pt-text-3);
  margin-top: 16px;
}

.portfolio-heading  {
  margin: 55px 0 25px;
}

.portfolio-heading h3  {
  font-size: 27px;
}

.portfolio-heading p  {
  font-size: 13px;
  margin-top: 10px;
}

.portfolio-grid  {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

.portfolio-card  {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffefc;
  transition: transform .3s,box-shadow .3s;
}

.portfolio-card:hover  {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px -28px #124d3f77;
}

/* Placa de 126px de altura fixa com rotulo de 30px, herdada de um componente
   que exibia um numero grande com unidade em <span>. Aqui ela carrega so o
   nome do sistema: eram 126 de 334px de cartao, 38% de moldura para cinco
   palavras. Vira sobrelinha de verdade. */
.portfolio-mark {
  display:block;
  margin:0 0 16px;
  padding:0 0 0 34px;
  position:relative;
  font-size:11px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#3f6f60;
}

.portfolio-mark::before {
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:22px;
  height:2px;
  background:var(--green);
}

.portfolio-mark>span {
  font-size:inherit;
}

.mark-lar  {
  background: #e3eaf7;
  color: #34466a;
}

.mark-mv  {
  background: #ebe8df;
  color: #665842;
}

.mark-oikonos  {
  background: #f4e6db;
  color: #8a4c32;
}

.portfolio-card h3  {
  font-size: 25px;
  margin: 12px 0 16px;
}

.portfolio-card>p:not(.eyebrow)  {
  font-size: 14px;
  margin-bottom: 20px;
}

.portfolio-card>a  {
  margin-top: auto;
  padding: 15px 0 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
}

.portfolio-card details  {
  font-size: 11px;
  margin-top: 12px;
}

.portfolio-card summary  {
  cursor: pointer;
  padding: 10px 0;
}

.portfolio-card details p  {
  font-size: 11px;
}

.capability-row  {
  margin: 32px 0 42px;
  padding: 26px 0;
  border-block: 1px solid var(--line);
}

.capability-row>div  {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 14px;
}

.capability-row span  {
  font-size: 12px;
}

.testimonials[hidden]  {
  display: none;
}

.testimonial-grid  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}


.testimonial-card  {
  display: flex;
  flex-direction: column;
  padding: 42px 44px 38px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  /* sombra tingida de verde, nao preta: cai no fundo claro sem sujar */
  box-shadow: 0 1px 2px rgba(21,61,51,.04), 0 22px 44px -30px rgba(21,61,51,.30);
}

.testimonial-nota  {
  display: block;
  margin-bottom: 24px;
}

.estrelas  {
  display: block;
  fill: var(--green);
}

.testimonial-text  {
  flex: 1;
  margin: 0;
  font-size: 19px;
  line-height: 1.62;
  letter-spacing: -.005em;
  text-wrap: pretty;
}

.testimonial-person  {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.testimonial-avatar  {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #e6eee8;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--green);
  /* mesma moldura para foto e iniciais, para os dois cartoes combinarem */
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line);
}

.testimonial-avatar img  {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-person strong,.testimonial-person span  {
  display: block;
  font-size: 14px;
}

.testimonial-person span  {
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
}

html  {
  scroll-padding-top: var(--anchor-offset,112px);
}

@media(max-width:1000px)  {
  .header nav  {
    gap: 15px;
  }
  .project-main-copy  {
    padding: 30px;
  }
  .project-system  {
    padding: 25px;
  }
  .portfolio-grid  {
    gap: 12px;
  }
  .portfolio-card  {
    padding: 14px;
  }
}

@media(max-width:760px)  {
  .project-main,.portfolio-grid,.testimonial-grid  {
    grid-template-columns: 1fr;
  }
  .project-main-copy  {
    padding: 28px;
  }
  .portfolio-proof  {
    align-items: flex-start;
    gap: 18px;
    flex-direction: column;
  }
  .project-main h3  {
    font-size: 30px;
  }
  .portfolio-card  {
    padding: 20px;
  }
  .system-modules>span  {
    padding: 17px 13px;
  }
  .system-output  {
    font-size: 11px;
  }
  .project-main-copy>p:not(.eyebrow),.portfolio-card>p:not(.eyebrow)  {
    font-size: 16px;
  }
  .testimonial-card  {
    padding: 30px 26px 26px;
  }
  .testimonial-text  {
    font-size: 17px;
  }
}

@media(prefers-reduced-motion:reduce)  {
  .portfolio-card  {
    transition: none;
  }
  .portfolio-card:hover  {
    transform: none;
  }
}

/* Dobras com identidade própria, mantendo a paleta clara. */ .solutions.shell,.process.shell  {
  width: 100%;
  padding-inline: max(48px,calc((100% - 1320px)/2));
  position: relative;
  isolation: isolate;
}

.solutions  {
  background: linear-gradient(125deg,#dfece4 0%,#e9f1df 58%,#d8e9e3 100%);
  border-block: 1px solid #c5d9ca;
}

.solutions .service-sites  {
  background: #fbfcf4e8;
  border-color: #b7cdae;
}

.solutions .service-automation  {
  background: #f3faf8eb;
  border-color: #b3cec3;
}

.solutions .service-top  {
  border-bottom: 1px solid #c7d9c8;
  padding-bottom: 20px;
  margin-bottom: 26px;
}

.solutions .service-number  {
  font-size: 28px;
  letter-spacing: -.06em;
  color: #6e947e;
}

.process  {
  background: linear-gradient(150deg,#f0f3f8,#e9f0f3 65%,#e2eceb);
  border-block: 1px solid #cedbe0;
}

.process .section-heading  {
  margin-bottom: 34px;
}

/* ==========================================================================
   05 PASSOS — A ESCADA

   Eram tres cartoes iguais lado a lado: fundo, borda, raio de 15 e, dentro,
   mais uma caixa com fundo proprio para a entrega. Cartao dentro de cartao,
   369px de altura para 212 de texto, e a terceira grade de cartoes da mesma
   pagina depois de 01 e 04.

   Aqui a moldura sai inteira. Sobram tres colunas separadas por fio, cada uma
   comecando um degrau abaixo da anterior: a forma diz que uma etapa leva a
   outra, coisa que tres caixas alinhadas nao dizem, e nao repete o trilho de
   06, que e um fio horizontal com nos.
   ========================================================================== */
.process .steps {
  gap:0;
  align-items:start;
}

.process .steps li {
  display:flex;
  flex-direction:column;
  background:none;
  border:0;
  border-top:1px solid #b9ccd3;
  border-radius:0;
  padding:22px 30px 0 0;
  overflow:visible;
  position:relative;
}

.process .steps li+li {
  border-left:1px solid #cedbe0;
  padding-left:30px;
}

/* o degrau */
.process .steps li:nth-child(2) { margin-top:38px; }
.process .steps li:nth-child(3) { margin-top:76px; }

/* o fio de cima acende no hover, da esquerda para a direita */
.process .steps li::after {
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:1px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.process .steps li:hover::after,
.process .steps li:focus-within::after { transform:scaleX(1); }

.step-top {
  display:flex;
  align-items:baseline;
  gap:11px;
  margin-bottom:18px;
}

.process .step-number {
  margin:0;
  font-size:40px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;
  color:#688680; /* 3,28:1 no canto mais escuro do degrade; #9db6b0 dava 1,79:1 */
  transition:color .4s ease;
}

.process .steps li:hover .step-number,
.process .steps li:focus-within .step-number { color:var(--green); }

/* o simbolo perdeu o circulo de 39px: virou glifo ao lado do numero */
.step-symbol {
  display:inline-block;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  color:var(--green);
  font-size:15px;
  opacity:.65;
}

.process .steps .step-label {
  font-size:11px;
  color:#496761;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:10px;
}

.process .steps h3 {
  font-size:23px;
  margin-bottom:12px;
}

.process .steps li>p:not(.step-label) {
  font-size:14px;
  margin-bottom:20px;
}

/* era caixa com fundo dentro do cartao; agora e so um recuo com fio */
.step-delivery {
  margin-top:0;
  background:none;
  border-left:2px solid var(--green);
  padding:2px 0 2px 13px;
}

.step-delivery span  {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.step-delivery strong  {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
}

.process-close  {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 24px 28px;
  border: 1px solid #c9d9dc;
  border-radius: 12px;
  background: #f9fcfbbd;
}

.process-close>div  {
  display: flex;
  align-items: center;
  gap: 15px;
}

.process-close p  {
  font-size: 12px;
}

.process-close strong  {
  display: block;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 3px;
}

.spark-field  {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.hero  {
  isolation: isolate;
}

.hero > .spark-field  {
  z-index: 0;
}

/* O mesh é decoração de fundo; não pode ocupar uma célula da grade. */ .hero > .hero-mesh  {
  position: absolute;
  z-index: 0;
}

.hero>*:not(.spark-field):not(.hero-mesh),.solutions>*:not(.spark-field),.process>*:not(.spark-field)  {
  position: relative;
  z-index: 1;
}

@media (min-width: 761px)  {
  .hero  {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
  }
  .hero-copy  {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .hero-visual.solution-scene  {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    min-height: 0;
    padding-top: 18px;
  }
  .hero-ticker  {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Campo de luz ambiente: pontos e halos respiram em trajetórias orgânicas,
   como poeira de dados em suspensão. O brilho é percebido, não distrai. */ .spark-field:before,.spark-field:after  {
  content: '';
  position: absolute;
  inset: -30%;
  pointer-events: none;
}

.spark-field:before  {
  background: radial-gradient(ellipse at 18% 38%,#9cd4b72d 0,transparent 34%),radial-gradient(ellipse at 79% 65%,#8bbce322 0,transparent 31%);
  filter: blur(22px);
  animation: aurora-breathe 17s ease-in-out infinite alternate;
}

.spark-field:after  {
  opacity: .13;
  background-image: radial-gradient(#317961 0.65px,transparent 0.8px);
  background-size: 17px 17px;
  mask-image: radial-gradient(ellipse at center,#000,transparent 68%);
  animation: grain-shift 11s steps(2,end) infinite;
}

.spark-field span  {
  position: absolute;
  top: 22%;
  left: var(--spark-left);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ecfff3;
  border: 1px solid #58a986;
  box-shadow: 0 0 0 2px #71c49b18,0 0 13px #63b391b8;
  opacity: 0;
  animation: data-drift var(--spark-time) cubic-bezier(.33,0,.64,1) var(--spark-delay) infinite;
}

.spark-field span:after  {
  content: '';
  position: absolute;
  width: 1px;
  height: 26px;
  left: 1px;
  top: 4px;
  border-radius: 50%;
  background: linear-gradient(#6fbe9a70,transparent);
  transform: rotate(-18deg);
  transform-origin: top;
}

.spark-field span:nth-child(even)  {
  width: 3px;
  height: 3px;
  box-shadow: 0 0 0 2px #71c49b14,0 0 9px #63b3918c;
}

.spark-offscreen span  {
  animation-play-state: paused;
}

@keyframes data-drift  {
  0%,100%  {
    opacity: 0;
    transform: translate3d(-14px,-20px,0) scale(.65);
  }
  17%  {
    opacity: .75;
  }
  52%  {
    opacity: .27;
    transform: translate3d(8px,24vh,0) scale(1);
  }
  78%  {
    opacity: .6;
  }
  100%  {
    transform: translate3d(33px,68vh,0) scale(.5);
  }
}

@keyframes aurora-breathe  {
  0%  {
    transform: translate3%,-2% scale(.95) rotate(-2deg);
    opacity: .5;
  }
  100%  {
    transform: translate(-4%,4%) scale(1.1) rotate(3deg);
    opacity: .9;
  }
}

@keyframes grain-shift  {
  0%  {
    transform: translate(0,0);
  }
  25%  {
    transform: translate(5px,-4px);
  }
  50%  {
    transform: translate(-4px,3px);
  }
  75%  {
    transform: translate(3px,5px);
  }
  100%  {
    transform: translate(0,0);
  }
}

@media(max-width:1100px)  {
  .solutions.shell,.process.shell  {
    padding-inline: 32px;
  }
  .process .steps li {
    padding-right:22px;
  }
  .process .steps li+li {
    padding-left:22px;
  }
  .process .steps li:nth-child(2) { margin-top:26px; }
  .process .steps li:nth-child(3) { margin-top:52px; }
  .process .steps h3 {
    font-size:20px;
  }
}

@media(max-width:760px)  {
  .solutions.shell,.process.shell  {
    padding-inline: 20px;
  }
  .process-close  {
    align-items: stretch;
    flex-direction: column;
    padding: 23px;
  }
  .process .steps li>p:not(.step-label)  {
    font-size: 16px;
  }
  .process .steps {
    gap:0;
  }
  .process .steps li {
    padding:20px 0 0;
  }
  .process .steps li+li {
    border-left:0;
    padding-left:0;
    margin-top:22px;
  }
  .process .steps li:nth-child(2),
  .process .steps li:nth-child(3) { margin-top:22px; }
  .process .steps h3 {
    font-size:23px;
  }
  .step-top  {
    margin-bottom: 20px;
  }
  .spark-field span:nth-child(even)  {
    display: none;
  }
  .spark-field:before  {
    filter: blur(18px);
  }
}

@media(prefers-reduced-motion:reduce)  {
  .spark-field  {
    display: none;
  }
}

/* ==========================================================================
   CENA DO HERÓI DA /SITES

   A home usa .hero-art, que e um container de arte de fundo: absoluto, 155%
   de largura e deslocado para a esquerda. Reaproveitar aquilo aqui jogava o
   conteudo 127px para fora da tela e criava rolagem horizontal.

   Esta cena e um bloco normal, contido na coluna, e diz a mesma coisa da
   copy: site, Google e WhatsApp sao tres pontas de uma base so. Sem imitar
   interface, que seria inventar um produto que nao existe.
   ========================================================================== */
.sites-scene {
  display:flex;
  align-items:center;
  min-width:0;
}

/* .scene-label e absoluta no heroi da home. Aqui ela e o titulo do cartao. */
.sites-base .scene-label {
  position:static;
  margin:0;
}

.sites-base {
  width:100%;
  padding:clamp(22px,2.4vw,32px);
  background:#fffefaf2;
  border:1px solid #d4ddcc;
  border-radius:20px;
  box-shadow:0 24px 52px -38px rgba(21,61,51,.45);
}

.sites-tripe {
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}

.sites-tripe li {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  gap:4px 14px;
  padding:14px 16px;
  background:#f4f7ef;
  border:1px solid #e0e7d8;
  border-radius:12px;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease;
}

.sites-scene:hover .sites-tripe li,
.sites-base.em-cena .sites-tripe li {
  border-color:#bcd0b6;
}

.sites-tripe li:nth-child(2) { transform:translateX(14px); }
.sites-tripe li:nth-child(3) { transform:translateX(28px); }

.sites-tripe__n {
  grid-row:span 2;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--green);
}

.sites-tripe strong { font-size:17px; }

.sites-tripe small {
  grid-column:2;
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted);
}

.sites-base__pe {
  margin:18px 0 0;
  font-size:11.5px;
  line-height:1.6;
  color:var(--muted);
}

@media (max-width:960px) {
  .sites-tripe li:nth-child(2),
  .sites-tripe li:nth-child(3) { transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  .sites-tripe li { transition:none; }
}

/* ==========================================================================
   VARIANTES DE GRADE DA /SITES
   A home tem duas ofertas lado a lado. Aqui sao seis itens curtos e cinco
   numeros, entao a grade muda de proporcao em vez de repetir a da home.
   ========================================================================== */
.service-grid--tres {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.service-grid--tres .service {
  padding:30px 28px 30px;
}

.service-grid--tres .service h3 {
  font-size:clamp(20px,1.7vw,24px);
}

.portfolio-grid--numeros {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
}

@media (max-width:1000px) {
  .service-grid--tres { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .service-grid--tres { grid-template-columns:minmax(0,1fr); }
}

/* ==========================================================================
   CREDENCIAIS EM LISTA

   .about-facts e feito para dois fatos curtos lado a lado (display:flex com
   gap de 50px). Com cinco linhas longas dentro, o min-content da flex passa
   de 460px e empurra a coluna inteira para fora da tela. Credencial e lista
   vertical, nao par de fatos.
   ========================================================================== */
.about-list {
  list-style:none;
  margin:26px 0 22px;
  padding:0;
  display:grid;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:22px;
}

.about-list li {
  position:relative;
  padding-left:20px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.about-list li::before {
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  opacity:.6;
}

/* A dobra "quem faz" nunca colapsava: .about e duas colunas em qualquer
   largura, e os itens de grade nascem com min-width:auto, entao recusam
   encolher abaixo do proprio conteudo. A home escapava por ter texto curto.
   Vale para as tres paginas. */
.about > * { min-width:0; }

@media (max-width:860px) {
  .about { grid-template-columns:minmax(0,1fr); }
}

/* ==========================================================================
   RODAPÉ

   Era uma grade de tres colunas coladas na base, com os links sem estado e o
   fecho na mesma respiracao do conteudo. Agora tem duas faixas: a de cima
   fecha a conversa, com a marca, o lema e a chamada; a de baixo e a linha
   legal, separada por fio. Os links ganham alvo e reacao.
   ========================================================================== */
.footer {
  display:block;
  /* zera o que a regra antiga de .footer no base.css ainda aplicava: ela era
     uma grade com padding proprio, e o padding sobrevivia a troca do display */
  padding:0;
  gap:0;
  margin-top:clamp(44px,5vw,68px);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,#eef2e7 92%);
}

.footer-top {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  /* 587px de rodape era mais de meia tela para o fecho. Cortado pela metade:
     a conversa acaba na dobra de contato, aqui e so o endereco. */
  padding-top:clamp(30px,3.2vw,42px);
  padding-bottom:clamp(22px,2.4vw,30px);
  align-items:start;
}

.footer-lema {
  margin:14px 0 18px;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  max-width:32ch;
}

.footer-cta {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 19px;
  border-radius:var(--pill,9999px);
  background:var(--green);
  color:#fffefa;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}

.footer-cta span { transition:transform .4s cubic-bezier(.2,.7,.2,1); }

.footer-cta:hover,
.footer-cta:focus-visible {
  transform:translateY(-2px);
  box-shadow:0 16px 30px -18px rgba(21,61,51,.6);
}

.footer-cta:hover span { transform:translate(3px,-3px); }

.footer-nav { display:grid; gap:2px; }

.footer-nav h2 {
  margin:0 0 8px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
}

.footer-nav a {
  display:inline-flex;
  align-items:center;
  gap:7px;
  /* alvo de toque confortavel: antes eram links de 17px empilhados */
  padding:6px 0;
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
  width:fit-content;
  transition:color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color:var(--green);
  transform:translateX(3px);
}

.footer-onde {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:14px 0 0;
  font-size:11.5px;
  line-height:1.55;
  color:var(--muted);
}

.footer-onde .status-dot { margin-top:.45em; flex:0 0 auto; }

.footer-bottom {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px 26px;
  padding-top:14px;
  padding-bottom:18px;
  border-top:1px solid var(--line);
  font-size:11.5px;
  color:var(--muted);
}

.footer-legais { display:flex; flex-wrap:wrap; gap:20px; }

.footer-bottom a {
  color:var(--muted);
  text-decoration:none;
  transition:color .3s ease;
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible { color:var(--green); }

@media (max-width:860px) {
  .footer-top { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .footer-intro { grid-column:1/-1; }
}

/* As duas colunas de links sao curtas: empilhar as tres no celular levava o
   rodape a 800px, mais de meia tela so de endereco. Elas ficam lado a lado
   ate 380px, onde o texto comeca de fato a apertar. */
@media (max-width:380px) {
  .footer-top { grid-template-columns:minmax(0,1fr); }
}

@media (max-width:560px) {
  .footer-bottom { justify-content:flex-start; }
}

@media (prefers-reduced-motion:reduce) {
  .footer-cta, .footer-cta span, .footer-nav a { transition:none; }
  .footer-cta:hover, .footer-nav a:hover { transform:none; }
}

/* ==========================================================================
   MANIFESTO — O QUE ESTÁ INCLUSO

   Era um bento com o primeiro cartao ocupando duas colunas e duas linhas:
   692px de caixa para 261px de conteudo, 62% de vazio. E cada cartao tinha
   outro cartao dentro, para a linha de entrega.

   As seis entregas nao formam hierarquia, formam um inventario: e o que vem
   na caixa. Inventario se le em linha, com o nome de um lado e o que ele
   produz do outro. Sem moldura, sem caixa dentro de caixa.
   ========================================================================== */
.manif {
  list-style:none;
  margin:44px 0 0;
  padding:0;
  border-top:1px solid var(--line);
}

.manif li {
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1.6fr) minmax(0,1fr);
  align-items:baseline;
  gap:10px 26px;
  padding:22px 20px 22px 16px;
  border-bottom:1px solid var(--line);
  transition:background .4s ease, padding-left .4s cubic-bezier(.2,.7,.2,1);
}

.manif li::before {
  content:"";
  position:absolute;
  left:0; top:-1px; bottom:-1px;
  width:2px;
  background:var(--green);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}

.manif li:hover,
.manif li:focus-within { background:#f1f5eb; padding-left:24px; }

.manif li:hover::before,
.manif li:focus-within::before { transform:scaleY(1); }

.manif__n {
  font-size:11px;
  letter-spacing:.14em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}

.manif__txt h3 {
  margin:0 0 6px;
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.3;
}

.manif__txt p {
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  max-width:56ch;
}

/* a saida de cada entrega alinha numa coluna so: da para ler a coluna
   inteira de cima a baixo e saber o que a base entrega */
.manif__saida {
  justify-self:start;
  font-size:12px;
  line-height:1.5;
  color:var(--ink);
  padding-left:18px;
  border-left:1px solid var(--line);
}

@media (max-width:860px) {
  .manif li { grid-template-columns:auto minmax(0,1fr); }
  .manif__saida { grid-column:2; padding-left:0; border-left:0; color:var(--green); }
}

/* ==========================================================================
   FIGURAS — OS NÚMEROS

   Cinco colunas iguais davam a todos os numeros o mesmo peso, e o resultado
   era uma regua sem acento. O prazo e o numero que decide a compra; os
   outros quatro respondem "e depois?". Um conduz, quatro sustentam.
   ========================================================================== */
.figs {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
  margin-top:44px;
  padding:clamp(28px,3.4vw,46px);
  border-radius:22px;
  background:linear-gradient(135deg,#e6eedd 0%,#eff3e8 55%,#e2ece4 100%);
  border:1px solid #cfdcc6;
}

.figs__hero { display:grid; gap:6px; }

.figs__num {
  font-size:clamp(88px,11vw,168px);
  line-height:.82;
  font-weight:700;
  letter-spacing:-.05em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}

.figs__lado strong {
  display:block;
  font-size:clamp(19px,1.7vw,24px);
  letter-spacing:-.02em;
}

.figs__lado p {
  margin:10px 0 0;
  font-size:13.5px;
  line-height:1.65;
  color:var(--muted);
  max-width:40ch;
}

.figs__apoio {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px;
  background:#cfdcc6;
  border-radius:14px;
  overflow:hidden;
}

.figs__apoio > div {
  background:#fbfcf7;
  padding:22px 20px;
  transition:background .4s ease;
}

.figs__apoio > div:hover { background:#fff; }

.figs__n2 {
  display:block;
  font-size:clamp(26px,2.4vw,34px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}

.figs__apoio strong {
  display:block;
  margin-top:8px;
  font-size:12.5px;
  letter-spacing:-.01em;
}

.figs__apoio p {
  margin:6px 0 0;
  font-size:11.5px;
  line-height:1.55;
  color:var(--muted);
}

@media (max-width:900px) {
  .figs { grid-template-columns:minmax(0,1fr); }
}

@media (max-width:520px) {
  .figs__apoio { grid-template-columns:minmax(0,1fr); }
}

/* A ressalva pertence ao bloco de numeros: e a letra miuda do que esta acima,
   nao outro cartao. Sem moldura, alinhada a direita do bloco e com medida de
   leitura propria. Antes usava .process-close, que e um flex de outra dobra. */
.figs__ressalva {
  margin:18px 0 0;
  padding-left:18px;
  border-left:2px solid var(--green);
  font-size:12.5px;
  line-height:1.65;
  color:var(--muted);
  max-width:78ch;
}

/* ==========================================================================
   DIAGNÓSTICO — O PROBLEMA

   A ideia estava certa e a execucao nao: a linha tinha 1320px e usava 480,
   com titulo de 23px perdido na esquerda. Agora sintoma e consequencia
   dividem a largura, o sintoma fica grande e o trilho acende no item.
   ========================================================================== */
.diag {
  list-style:none;
  margin:44px 0 0;
  padding:0;
  border-top:1px solid var(--line);
}

.diag li {
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1.05fr) minmax(0,1fr);
  align-items:baseline;
  gap:10px 34px;
  padding:26px 20px 26px 16px;
  border-bottom:1px solid var(--line);
  transition:background .4s ease, padding-left .4s cubic-bezier(.2,.7,.2,1);
}

.diag li::before {
  content:"";
  position:absolute;
  left:0; top:-1px; bottom:-1px;
  width:2px;
  background:var(--green);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}

.diag li:hover,
.diag li:focus-within { background:#f1f5eb; padding-left:24px; }

.diag li:hover::before,
.diag li:focus-within::before { transform:scaleY(1); }

.diag__n {
  font-size:11px;
  letter-spacing:.14em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}

.diag li h3 {
  margin:0;
  font-size:clamp(20px,2vw,28px);
  line-height:1.2;
  letter-spacing:-.025em;
}

.diag li p {
  margin:0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--muted);
  max-width:52ch;
}

@media (max-width:860px) {
  .diag li { grid-template-columns:auto minmax(0,1fr); gap:8px 20px; }
  .diag li p { grid-column:2; }
}

@media (prefers-reduced-motion:reduce) {
  .manif li, .manif li::before,
  .diag li, .diag li::before,
  .figs__apoio > div { transition:none; }
  .manif li:hover, .diag li:hover { padding-left:16px; }
}

/* ==========================================================================
   TRILHO — MÉTODO PALMBOOK

   Seis etapas nao sao seis cartoes: sao uma sequencia. O trilho horizontal
   mostra que uma leva a outra, coisa que uma grade nao diz. O fio liga os
   nos e para no ultimo, porque o metodo termina em medir.
   ========================================================================== */
.trilho {
  list-style:none;
  margin:44px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
}

.trilho li {
  position:relative;
  padding:34px 18px 0 0;
}

/* o fio da sequencia, cortado no ultimo no */
.trilho li::before {
  content:"";
  position:absolute;
  top:9px;
  left:0;
  right:0;
  height:1px;
  background:var(--line);
}

.trilho li:last-child::before { right:calc(100% - 18px); }

/* o no */
.trilho li::after {
  content:"";
  position:absolute;
  top:5px;
  left:0;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--paper);
  box-shadow:0 0 0 2px var(--green);
  transition:background .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}

.trilho li:hover::after,
.trilho li:focus-within::after {
  background:var(--green);
  transform:scale(1.25);
}

.trilho__n {
  display:block;
  margin-bottom:10px;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}

.trilho li h3 {
  margin:0 0 8px;
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.25;
}

.trilho li p {
  margin:0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
}

@media (max-width:1000px) {
  .trilho { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:34px; }
  .trilho li:nth-child(3)::before { right:calc(100% - 18px); }
}

@media (max-width:620px) {
  .trilho { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trilho li:nth-child(3)::before { right:0; }
  .trilho li:nth-child(2n)::before { right:calc(100% - 18px); }
}

/* ==========================================================================
   A OFERTA

   A unica dobra da /automacao que pede moldura: aqui a pessoa decide gastar
   R$ 1.200. Preco, o que entra, o que nao entra e a garantia precisam ser
   lidos juntos, sem rolagem entre eles.
   ========================================================================== */
.oferta {
  margin-top:44px;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,3.4vw,52px);
  padding:clamp(28px,3.4vw,46px);
  border-radius:22px;
  border:1px solid #cfdcc6;
  background:linear-gradient(135deg,#e6eedd 0%,#eff3e8 55%,#e2ece4 100%);
}

.oferta__preco { align-self:start; }

.oferta__valor {
  display:block;
  font-size:clamp(46px,5.4vw,74px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}

.oferta__nota {
  display:block;
  margin:10px 0 22px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.oferta__listas {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.oferta__lista ul {
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:9px;
}

.oferta__lista li {
  position:relative;
  padding-left:19px;
  font-size:13px;
  line-height:1.55;
  color:var(--ink);
}

.oferta__lista li::before {
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  width:8px;
  height:2px;
  background:var(--green);
}

/* o que nao entra fica em cinza e com o traco apagado: a diferenca precisa
   ser visivel antes de a pessoa ler a palavra "nao" */
.oferta__lista--fora li { color:var(--muted); }
.oferta__lista--fora li::before { background:#a9b6a6; }

.oferta__garantia {
  grid-column:1/-1;
  padding:18px 20px;
  border-radius:12px;
  background:#fbfcf7;
  border:1px solid #d8e2ce;
}

.oferta__garantia b {
  display:block;
  font-size:14.5px;
  line-height:1.5;
}

.oferta__garantia span {
  display:block;
  margin-top:7px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
}

.oferta__agenda {
  grid-column:1/-1;
  margin:0;
  padding-left:18px;
  border-left:2px solid var(--green);
  font-size:12.5px;
  line-height:1.65;
  color:var(--muted);
}

.oferta__agenda b { color:var(--ink); }

@media (max-width:900px) {
  .oferta { grid-template-columns:minmax(0,1fr); }
}

@media (max-width:560px) {
  .oferta__listas { grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce) {
  .trilho li::after { transition:none; }
  .trilho li:hover::after { transform:none; }
}

/* ==========================================================================
   O PROBLEMA — A DOBRA ESCURA

   A pagina tinha dez dobras em fundos quase iguais, e duas delas usavam o
   mesmo componente de lista numerada. Nenhuma ancora de contraste em dez
   rolagens faz tudo parecer a mesma coisa.

   O CLAUDE.md autoriza uma dobra escura por pagina, e o lugar dela aqui e o
   problema: e o ponto baixo da narrativa, antes dos cases levantarem de
   volta. Alem do fundo, muda a familia de layout: mural de afirmacoes curtas,
   sem numero e sem linha, em vez de mais uma lista.
   ========================================================================== */
.sintomas-escura {
  /* tokens locais, nao a classe .escura do sistema antigo, que e de secao e
     traz padding e emendas proprias */
  --tinta:#eef4f0;
  --tinta-2:#9db3aa;
  --fio:rgba(238,244,240,.14);
  background:#101b18;
  color:var(--tinta);
  position:relative;
  isolation:isolate;
}

.sintomas-titulo {
  margin:0;
  max-width:18ch;
  font-size:clamp(30px,4vw,54px);
  line-height:1.08;
  letter-spacing:-.035em;
  color:var(--tinta);
  text-wrap:balance;
}

.sintomas-titulo em {
  font-style:normal;
  color:#5fd2ae;
}

.sintomas-lead {
  margin:18px 0 0;
  max-width:56ch;
  font-size:14.5px;
  line-height:1.7;
  color:var(--tinta-2);
}

.sintomas-mural {
  margin-top:clamp(38px,4.4vw,60px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--fio);
  border-block:1px solid var(--fio);
}

.sintomas-mural > div {
  background:#101b18;
  padding:clamp(22px,2.2vw,30px) clamp(20px,2vw,28px);
  transition:background .45s ease;
}

.sintomas-mural > div:hover,
.sintomas-mural > div:focus-within { background:#16241f; }

.sintomas-mural h3 {
  margin:0 0 10px;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--tinta);
}

.sintomas-mural p {
  margin:0;
  font-size:13px;
  line-height:1.65;
  color:var(--tinta-2);
}

@media (max-width:900px) {
  .sintomas-mural { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:560px) {
  .sintomas-mural { grid-template-columns:minmax(0,1fr); }
}

/* ==========================================================================
   O MÉTODO — FUNDO PRÓPRIO
   Era a terceira secao seguida com o fundo de .solutions. Ganha o seu.
   ========================================================================== */
.metodo {
  background:linear-gradient(170deg,#f2f4ec 0%,#eef3ee 60%,#e9f0ea 100%);
  border-block:1px solid #dde5d8;
}

@media (prefers-reduced-motion:reduce) {
  .sintomas-mural > div { transition:none; }
}

/* Cabecalho de secao sem rotulo: o bloco de texto mantem a coluna de sempre,
   em vez de escorregar para a coluna estreita onde ficava o rotulo. */
.section-heading > div:only-child {
  grid-column:2;
}

@media (max-width:860px) {
  .section-heading > div:only-child { grid-column:auto; }
}

/* ==========================================================================
   CARTOES QUE PARAM DE ESTICAR

   Linha de grade estica todos os filhos ate a altura do mais alto. O cartao
   da Lar Telecom carrega o bloco da demo e puxava os vizinhos para 483px com
   44% de vazio dentro. align-items:start faz cada um ter a altura do proprio
   conteudo.
   ========================================================================== */
.portfolio-grid {
  align-items:start;
}

/* Quatro cases numa grade de tres colunas deixavam um orfao sozinho na segunda
   linha. Com quatro itens a grade e de dois. */
.portfolio-grid--quatro {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* O case em destaque encostava na grade abaixo: a folga de layout entre os dois
   era ZERO, e a animacao de entrada ainda desloca o cartao 24px para baixo, o
   que vira sobreposicao enquanto ele revela. Na home isso nao aparece porque la
   existe um titulo entre o destaque e a grade; aqui a grade vem direto.
   A troca de nivel — do case principal para os secundarios — pede mais que a
   folga interna da grade, que e de 20px. */
.automation-page .featured-work {
  margin-bottom:36px;
}

.automation-page .portfolio-grid--quatro {
  align-items:stretch;
  grid-auto-rows:1fr;
}

.automation-page .portfolio-card .demo-access {
  margin-top:auto;
}

@media(max-width:900px) {
  .automation-page .portfolio-grid--quatro { grid-auto-rows:auto; }
}

/* ===========================================================================
   HOME INTERATIVA — sinais claros de ação, sem dependências externas
   ========================================================================== */
.home-page .service {
  position:relative;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),
             box-shadow .35s ease,
             border-color .35s ease;
}

.home-page .service:hover,
.home-page .service:focus-within {
  transform:translateY(-6px);
  border-color:#9db7a4;
  box-shadow:0 22px 48px rgba(25,53,39,.12);
}

/* A âncora move o foco para o título para orientar leitores de tela. O foco
   programático não precisa desenhar uma caixa ao redor de toda a manchete. */
.home-page section h1[tabindex="-1"]:focus,
.home-page section h2[tabindex="-1"]:focus {
  outline:none;
}

.home-page .service-link::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
}

.home-page .service-link:focus-visible {
  outline:0;
}

.home-page .service:focus-within {
  outline:3px solid color-mix(in srgb,var(--green) 42%,transparent);
  outline-offset:4px;
}

.home-page .service-link span,
.home-page .portfolio-card > a {
  transition:transform .3s ease,color .3s ease;
}

.home-page .service:hover .service-link span {
  transform:translate(3px,-3px);
}

.result-cta,
.panel-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--green);
  font-size:11px;
  font-weight:700;
  text-decoration:none;
  text-underline-offset:4px;
}

.result-cta:hover,
.result-cta:focus-visible,
.panel-link:hover,
.panel-link:focus-visible {
  text-decoration:underline;
}

.panel-link {
  margin-top:16px;
}

.module-button {
  appearance:none;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:14px;
  border:1px solid var(--pt-border);
  border-radius:var(--pt-r-md);
  background:var(--pt-bg-1);
  color:var(--pt-text-3);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color var(--pt-dur) var(--pt-ease),box-shadow var(--pt-dur) var(--pt-ease);
}

.module-texto {
  display:block;
  min-width:0;
}

.module-icone {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--pt-chip-border);
  border-radius:var(--pt-r-sm);
  background:var(--pt-chip-bg);
  color:var(--pt-text-2);
  transition:background-color var(--pt-dur) var(--pt-ease),border-color var(--pt-dur) var(--pt-ease),color var(--pt-dur) var(--pt-ease);
}

.module-button[aria-pressed="true"] .module-icone {
  border-color:var(--pt-selecao-borda);
  background:var(--pt-selecao-bg);
  color:var(--pt-orange);
}

.module-chevron {
  display:grid;
  place-items:center;
  color:var(--pt-text-4);
  transition:transform var(--pt-dur) var(--pt-ease),color var(--pt-dur) var(--pt-ease);
}

.module-button[aria-pressed="true"] .module-chevron {
  color:var(--pt-orange);
  transform:translateX(2px);
}

.module-button strong {
  display:block;
  margin:0 0 2px;
  color:var(--pt-text-0);
  font-size:14px;
  font-weight:600;
}

.module-button small {
  display:block;
  margin:0;
  color:var(--pt-text-3);
  font-size:11px;
  line-height:1.45;
}

.module-button:hover {
  border-color:var(--pt-border-forte);
  box-shadow:var(--pt-elev-1);
}

.module-button[aria-pressed="true"] {
  background:var(--pt-bg-2);
  border-color:var(--pt-selecao-borda);
  box-shadow:var(--pt-elev-1);
}

.module-detail {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:3px 16px;
  margin-top:14px;
  padding:14px 16px;
  border:1px solid var(--pt-border);
  border-left:3px solid var(--pt-orange);
  border-radius:var(--pt-r-md);
  background:var(--pt-bg-2);
}

.module-detail > span:first-child {
  grid-column:2;
  color:var(--pt-orange-2);
  font-family:var(--pt-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
}

.module-detail strong {
  grid-column:2;
  color:var(--pt-text-0);
  font-size:15px;
  font-weight:600;
}

.module-detail p {
  grid-column:2;
  margin:2px 0 0;
  color:var(--pt-text-2);
  font-size:12px;
  line-height:1.5;
}

.footer-legais button {
  appearance:none;
  padding:0;
  border:0;
  background:none;
  color:var(--muted);
  font:inherit;
  cursor:pointer;
  transition:color .3s ease;
}

.footer-legais button:hover,
.footer-legais button:focus-visible {
  color:var(--green);
}

/* Formas de fundo fixas criam profundidade sem disputar atenção com o texto. */
.home-page .solutions::after,
.home-page .process::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:240px;
  aspect-ratio:1;
  border:1px solid rgba(45,104,71,.16);
  border-radius:50%;
  pointer-events:none;
}

.home-page .solutions::after {
  right:4vw;
  top:11%;
  box-shadow:0 0 0 38px rgba(45,104,71,.035),0 0 0 76px rgba(45,104,71,.025);
}

.home-page .process::after {
  left:-80px;
  bottom:8%;
  box-shadow:0 0 0 46px rgba(45,104,71,.03);
}

@media (max-width:900px) {
  .home-page .section-heading {
    grid-template-columns:minmax(0,1fr);
  }

  .home-page .section-heading > div:only-child {
    grid-column:auto;
  }
}

/* O WhatsApp flutuante ocupa o canto inferior direito. O controle da esteira
   reserva esse espaço para que os dois alvos nunca disputem o mesmo clique. */
@media (min-width:761px) {
  .home-page .hero-ticker .esteira__btn {
    margin-right:184px;
  }
}

@media (max-width:560px) {
  .module-button {
    padding:15px 12px;
  }

}

@media (prefers-reduced-motion:reduce) {
  .home-page .service,
  .home-page .service-link span,
  .module-button {
    transition:none;
  }

  .home-page .service:hover,
  .module-button:hover {
    transform:none;
  }
}

@media (max-width:900px) {
  .portfolio-grid--quatro { grid-template-columns:minmax(0,1fr); }
  .automation-page .featured-work { margin-bottom:28px; }
}

/* Página Sites: a demonstração é uma interface real, não uma imagem de
   portfólio. O visitante pode conferir a mudança de proporção com mouse ou teclado. */
.sites-page .sites-scene {
  align-self:center;
  width:100%;
}

.site-preview {
  width:100%;
  overflow:hidden;
  border:1px solid rgba(29,54,41,.18);
  border-radius:18px;
  background:#fdfdf9;
  box-shadow:0 28px 70px rgba(27,61,43,.14),0 4px 12px rgba(27,61,43,.08);
}

.site-preview__toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:58px;
  padding:8px 10px 8px 18px;
  border-bottom:1px solid rgba(29,54,41,.12);
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.site-preview__views {
  display:flex;
  gap:4px;
  padding:3px;
  border:1px solid rgba(29,54,41,.12);
  border-radius:10px;
  background:#eef2ec;
}

.site-preview__views button {
  min-height:44px;
  padding:0 12px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  letter-spacing:.04em;
  cursor:pointer;
}

.site-preview__views button[aria-pressed="true"] {
  background:#fff;
  color:var(--ink);
  box-shadow:0 2px 8px rgba(29,54,41,.1);
}

.site-preview__views button:focus-visible {
  outline:3px solid rgba(45,104,71,.28);
  outline-offset:2px;
}

.site-preview__stage {
  display:grid;
  place-items:center;
  min-height:414px;
  padding:32px;
  background:#dfe9e3;
}

.site-preview__frame {
  width:100%;
  overflow:hidden;
  border:1px solid rgba(21,43,31,.16);
  border-radius:10px;
  background:#fff;
  box-shadow:0 14px 35px rgba(23,52,37,.16);
  animation:site-frame-in .35s ease both;
}

.site-preview__frame[data-view="mobile"] {
  width:250px;
  border-radius:18px;
  box-shadow:0 18px 42px rgba(23,52,37,.22);
}

@keyframes site-frame-in {
  from { opacity:.55; transform:translateY(5px) scale(.985); }
  to { opacity:1; transform:none; }
}

.site-preview__nav {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:46px;
  padding:0 18px;
  border-bottom:1px solid #e8ece8;
  color:#617168;
  font-size:8px;
  text-transform:uppercase;
}

.site-preview__nav strong {
  margin-right:auto;
  color:#193f2b;
  font-size:9px;
  letter-spacing:.08em;
}

.site-preview__hero {
  min-height:248px;
  padding:34px 28px 26px;
  background:#f7f4e9;
}

.site-preview__hero small {
  display:block;
  margin-bottom:14px;
  color:var(--green);
  font-size:8px;
  font-weight:700;
  letter-spacing:.13em;
}

.site-preview__hero strong {
  display:block;
  max-width:390px;
  color:#173827;
  font-family:var(--serif);
  font-size:clamp(27px,3vw,39px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.04em;
}

.site-preview__hero p {
  max-width:300px;
  margin:15px 0 17px;
  color:#5d6961;
  font-size:10px;
  line-height:1.5;
}

.site-preview__cue {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  border-bottom:1px solid currentColor;
  color:var(--green);
  font-size:8px;
  font-weight:700;
  text-transform:uppercase;
}

.site-preview__proof {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid #e8ece8;
  color:#657169;
  font-size:8px;
}

.site-preview__proof span {
  padding:14px 10px;
  text-align:center;
}

.site-preview__proof span + span {
  border-left:1px solid #e8ece8;
}

.site-preview__frame[data-view="mobile"] .site-preview__nav span {
  display:none;
}

.site-preview__frame[data-view="mobile"] .site-preview__hero {
  min-height:270px;
  padding:30px 20px 22px;
}

.site-preview__frame[data-view="mobile"] .site-preview__hero strong {
  font-size:28px;
}

.site-preview__frame[data-view="mobile"] .site-preview__proof {
  grid-template-columns:1fr;
}

.site-preview__frame[data-view="mobile"] .site-preview__proof span {
  padding:8px;
}

.site-preview__frame[data-view="mobile"] .site-preview__proof span + span {
  border-top:1px solid #e8ece8;
  border-left:0;
}

.site-preview__note {
  margin:0;
  padding:11px 18px 13px;
  border-top:1px solid rgba(29,54,41,.1);
  color:var(--muted);
  font-size:11px;
}

.sites-deadline {
  max-width:760px;
  margin:0 0 28px auto;
  padding:15px 18px;
  border-left:3px solid var(--green);
  background:rgba(45,104,71,.06);
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.site-inclusions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.site-inclusion {
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.56);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}

.site-inclusion:hover {
  transform:translateY(-2px);
  border-color:rgba(45,104,71,.34);
  box-shadow:0 12px 30px rgba(26,59,40,.08);
}

.site-inclusion[open] {
  border-color:rgba(45,104,71,.4);
  background:#fff;
  box-shadow:0 14px 34px rgba(26,59,40,.09);
}

.site-inclusion summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  min-height:88px;
  padding:18px 20px;
  list-style:none;
  cursor:pointer;
}

.site-inclusion summary::-webkit-details-marker { display:none; }

.site-inclusion summary span {
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  align-items:center;
  gap:9px;
}

.site-inclusion summary small {
  color:var(--green);
  font-size:11px;
  font-weight:700;
}

.site-inclusion summary strong {
  color:var(--ink);
  font-size:15px;
}

.site-inclusion summary em {
  color:var(--muted);
  font-size:11px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.04em;
  text-align:right;
  text-transform:uppercase;
}

.site-inclusion summary::after {
  content:"+";
  grid-column:2;
  grid-row:1;
  margin-left:8px;
  color:var(--green);
  font-size:20px;
}

.site-inclusion[open] summary::after { content:"−"; }

.site-inclusion summary em { margin-right:30px; }

.site-inclusion > p {
  max-width:620px;
  margin:0;
  padding:0 20px 20px 55px;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

.sites-page .figs__n2 {
  font-size:clamp(22px,3vw,42px);
}

@media (max-width:900px) {
  .sites-page .hero {
    grid-template-columns:minmax(0,1fr);
  }

  .sites-page .hero-visual.sites-scene {
    align-items:stretch;
    height:auto;
    margin:24px 0 0;
  }

  .site-preview__stage { min-height:390px; }
  .site-inclusions { grid-template-columns:minmax(0,1fr); }
  .sites-deadline { margin-left:0; }
}

@media (min-width:761px) and (max-width:900px) {
  .sites-page .hero {
    grid-template-rows:auto auto auto;
  }

  .sites-page .hero-copy {
    grid-column:1;
    grid-row:1;
  }

  .sites-page .hero-visual.sites-scene {
    grid-column:1;
    grid-row:2;
    width:100%;
  }

  .sites-page .hero-ticker {
    grid-column:1;
    grid-row:3;
  }
}

@media (min-width:561px) {
  .sites-page .hero-ticker .esteira__btn {
    margin-right:184px;
  }
}

@media (max-width:560px) {
  .sites-page .hero-ticker .esteira__btn {
    margin-right:62px;
  }

  .site-preview__toolbar {
    align-items:flex-start;
    flex-direction:column;
    padding:14px;
  }

  .site-preview__views { width:100%; }
  .site-preview__views button { flex:1; }
  .site-preview__stage { min-height:365px; padding:18px 12px; }
  .site-preview__frame[data-view="mobile"] { width:min(250px,100%); }
  .site-preview__hero { padding:28px 20px 22px; }
  .site-preview__hero strong { font-size:29px; }
  .site-inclusion summary { grid-template-columns:minmax(0,1fr); gap:8px; }
  .site-inclusion summary em { margin:0 28px 0 35px; text-align:left; }
  .site-inclusion summary::after { grid-column:1; justify-self:end; }
  .site-inclusion > p { padding-left:55px; }
}

@media (prefers-reduced-motion:reduce) {
  .site-preview__frame { animation:none; }
  .site-inclusion { transition:none; }
  .site-inclusion:hover { transform:none; }
}

/* ==========================================================================
   CALCULADORA DE HORAS — AUTOMACAO

   Fica antes do cartao de preco: a pessoa ve quanto o processo come hoje e,
   logo abaixo, quanto custa descobrir onde esta esse tempo. O resultado usa
   o mesmo verde grande do preco, para as duas contas conversarem.
   ========================================================================== */
.calc {
  margin-top:44px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,3vw,44px);
  padding:clamp(22px,3vw,40px);
  border:1px solid var(--line);
  border-radius:22px;
  background:#fbfcf8;
}

.calc__texto h3 {
  margin:0 0 10px;
  font-size:clamp(22px,2.3vw,30px);
  line-height:1.15;
  text-wrap:balance;
}

.calc__texto > p {
  margin:0 0 24px;
  max-width:46ch;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

.calc__campos {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.calc__campos .field {
  margin:0;
}

.calc__campos label {
  display:block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
}

.calc__campos input {
  font-size:18px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.calc__resultado {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:clamp(20px,2.4vw,30px);
  border-radius:16px;
  background:var(--mint);
}

.calc__horas {
  display:block;
  font-size:clamp(46px,5vw,68px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}

.calc__equivale {
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
}

.calc__cta {
  align-self:flex-start;
  gap:14px;
  margin-top:6px;
}

.calc__nota {
  margin:0;
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
}

@media (max-width:860px) {
  .calc {
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:420px) {
  .calc__campos {
    gap:10px;
  }
  .calc__cta {
    align-self:stretch;
    padding-inline:18px;
  }
}

/* ==========================================================================
   SITES: ESTE SITE COMO PROVA E O PEDIDO DE ORCAMENTO

   A pagina vendia site sem mostrar site nenhum. O unico site real que da
   para abrir e este, entao ele vira a prova, com numeros medidos e um link
   para a pessoa conferir no PageSpeed. Os numeros sao de setembro de 2026:
   se a pagina engordar, meca de novo antes de manter.
   ========================================================================== */
.prova-site {
  padding-block:clamp(34px,5vw,60px);
  border-block:1px solid var(--line);
  background:var(--white);
}

.prova-site__faixa {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"texto numeros teste" "nota nota nota";
  gap:20px clamp(24px,3.4vw,56px);
  align-items:center;
}

.prova-site__texto { grid-area:texto; }

.prova-site__texto h2 {
  margin:0 0 8px;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.1;
  text-wrap:balance;
}

.prova-site__texto p {
  margin:0;
  max-width:52ch;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

.prova-site__numeros {
  grid-area:numeros;
  display:grid;
  grid-template-columns:repeat(2,auto);
  margin:0;
}

.prova-site__numeros > div {
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-end;
  gap:6px;
  padding:0 clamp(16px,2vw,28px);
  border-left:1px solid var(--line);
}

.prova-site__numeros > div:first-child {
  padding-left:0;
  border-left:0;
}

.prova-site__numeros dd {
  margin:0;
  font-size:clamp(30px,3.2vw,42px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.prova-site__numeros dt {
  max-width:15ch;
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
}

.prova-site__teste { grid-area:teste; }

.prova-site__nota {
  grid-area:nota;
  margin:0;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}

@media (max-width:1000px) {
  .prova-site__faixa {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"texto texto" "numeros teste" "nota nota";
  }
}

@media (max-width:640px) {
  .prova-site__faixa {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"texto" "numeros" "teste" "nota";
  }
  .prova-site__numeros { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .prova-site__teste { justify-self:stretch; }
}

/* o reset do site tira cor e sublinhado dos links; na nota do hero o link
   para o formulario ficava igual ao texto em volta */
.hero-footnote a {
  color:var(--green);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

.pedido {
  margin-top:36px;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(22px,3vw,44px);
  align-items:end;
  padding:clamp(22px,3vw,36px);
  border:1px solid var(--line);
  border-radius:22px;
  background:#fbfcf8;
}

.pedido__pergunta {
  margin:0 0 12px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}

.pedido__opcoes {
  display:inline-grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  padding:4px;
  border-radius:12px;
  background:#e9f1eb;
}

.pedido__opcoes button {
  min-height:44px;
  padding:0 18px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}

.pedido__opcoes button[aria-pressed="true"] {
  background:#fff;
  color:var(--green);
  box-shadow:0 3px 10px #194f3914;
}

.pedido__opcoes button:focus-visible {
  outline:2px solid var(--green);
  outline-offset:2px;
}

.pedido__rotulo {
  margin:22px 0 0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.pedido__lista {
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:9px;
}

/* sem regra global para [hidden]: display:grid acima venceria o atributo */
.pedido__lista[hidden] { display:none; }

.pedido__lista li {
  position:relative;
  padding-left:19px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink);
}

.pedido__lista li::before {
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:8px;
  height:2px;
  background:var(--green);
}

.pedido__acoes {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}

@media (max-width:860px) {
  .pedido {
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }
}

@media (max-width:420px) {
  .pedido__opcoes {
    display:grid;
    width:100%;
  }
  .pedido__acoes .button { align-self:stretch; }
}

/* ==========================================================================
   HOME: CARTOES COM A COR DE CADA MARCA

   Os projetos sao cartoes com a identidade de cada marca na capa. Cores e
   logotipos vem dos repositorios: Lar Telecom, logo-lar.png do
   lar-telecom-portal (gradiente azul para verde); Oikonos, theme.ts e
   oikonos-symbol.svg do saas_igreja (terracota, ambar e areia). A MV nao tem
   material no computador nem no GitHub e fica neutra ate chegar o logotipo.
   Classes proprias (.marca-card): a .portfolio-mark era compartilhada com
   /automacao e quebrou as placas daqui quando mudou la.
   ========================================================================== */
.home-page .marcas {
  align-items:stretch;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (min-width:1280px) {
  .home-page .marcas {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (max-width:760px) {
  .home-page .marcas {
    grid-template-columns:minmax(0,1fr);
  }
}

.home-page .marca-card {
  --marca-1:#447fb1;
  --marca-2:#a6c25b;
  --marca-fundo:#eef4f7;
  --marca-tinta:#2f5f86;
  padding:0 0 22px;
  overflow:hidden;
}

.home-page .marca-card--lar {
  --marca-fundo:linear-gradient(120deg,#edf3f9,#f2f7e8);
}

.home-page .marca-card--oikonos {
  --marca-1:#c75a3b;
  --marca-2:#e09a2d;
  --marca-fundo:#f8f1e8;
  --marca-tinta:#864507;
}

/* MV Assessoria Fiscal e Contabil: dourado sobre preto, como o material que
   o cliente mandou. O logotipo em arquivo ainda nao chegou; a capa monta a
   marca com tipografia nas cores dela. */
.home-page .marca-card--mv {
  --marca-1:#b8811f;
  --marca-2:#f0d58a;
  --marca-fundo:#0f0e0d;
  --marca-tinta:#e7c36b;
  --marca-assinatura:#cbbb96;
}

.home-page .marca-card--mv .marca-card__capa {
  box-shadow:inset 2px 0 0 var(--marca-1);
}

.home-page .marca-card--mv .marca-card__setor {
  background:#ffffff14;
  border:1px solid #d9a44166;
}

/* Lar Finance (repositorio finanpy): verde mineral e champanhe do design do
   proprio app. */
.home-page .marca-card--finance {
  --marca-1:#2f756a;
  --marca-2:#c7a35a;
  --marca-fundo:#f3efe6;
  --marca-tinta:#1f5b52;
  --marca-assinatura:#6b716c;
}

.home-page .marca-card > :not(.marca-card__capa) {
  margin-inline:22px;
}

.home-page .marca-card__capa {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:112px;
  margin-bottom:20px;
  padding:18px 22px;
  background:var(--marca-fundo);
}

/* a faixa de cima carrega o gradiente da marca */
.home-page .marca-card__capa::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,var(--marca-1),var(--marca-2));
}

.home-page .marca-card__capa img {
  display:block;
  width:auto;
  height:48px;
}

.home-page .marca-card--oikonos .marca-card__marca i {
  color:var(--marca-tinta);
}

.home-page .marca-card--oikonos .marca-card__capa img,
.home-page .marca-card--finance .marca-card__capa img {
  height:44px;
}

.home-page .marca-card--finance .marca-card__marca i {
  color:var(--marca-tinta);
}

.home-page .marca-card__marca {
  display:grid;
  gap:6px;
  min-width:0;
}

.home-page .marca-card__marca b {
  font-size:30px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--marca-tinta);
}

.home-page .marca-card__marca i {
  font-size:11px;
  font-style:normal;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.06em;
  color:var(--marca-assinatura,var(--marca-tinta));
}

.home-page .marca-card__setor {
  padding:5px 10px;
  border-radius:999px;
  background:#ffffffc7;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--marca-tinta);
}

.home-page .marca-card__acao {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
}

.home-page .marca-card__seta {
  flex:none;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:15px;
  transition:transform .25s ease,background-color .25s ease,border-color .25s ease,color .25s ease;
}

.home-page .marca-card:hover .marca-card__seta,
.home-page .marca-card__acao:focus-visible .marca-card__seta {
  border-color:var(--marca-1);
  background:var(--marca-1);
  color:#fff;
  transform:translateX(2px);
}

/* o acesso a demo fica acima da acao: a linha da acao cai no mesmo lugar nos
   tres cartoes, em vez de subir so no da Lar Telecom */
.home-page .marca-card details {
  margin-top:0;
  margin-bottom:18px;
}

@media (prefers-reduced-motion:reduce) {
  .home-page .marca-card__seta {
    transition:none;
  }
}

/* ==========================================================================
   PORTAL D+ — O CARTAO PRINCIPAL DA DOBRA

   Os modulos eram quatro caixas de texto com um glifo solto. Agora cada um tem
   icone proprio, resumo e seta, o painel diz quantos modulos existem e a
   coluna de texto carrega o resultado medido do case, que ate aqui so
   aparecia em /automacao.
   ========================================================================== */
.system-topo {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 16px;
  margin-bottom:22px;
}

.system-topo .system-title {
  margin-bottom:0;
}

.system-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border:1px solid var(--pt-chip-border);
  border-radius:999px;
  background:var(--pt-chip-bg);
  font-family:var(--pt-mono);
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  white-space:nowrap;
  color:var(--pt-text-2);
}

.system-pill::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--pt-orange);
}

.module-detail__icone {
  grid-column:1;
  grid-row:1/4;
  align-self:start;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--pt-chip-border);
  border-radius:var(--pt-r-sm);
  background:var(--pt-chip-bg);
  color:var(--pt-orange);
}

.project-resultado strong {
  color:var(--green);
  font-weight:650;
}

.project-tags span {
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.project-tags svg {
  flex:none;
  color:var(--green);
}

@media (max-width:520px) {
  .module-button {
    grid-template-columns:auto minmax(0,1fr);
  }
  .module-chevron {
    display:none;
  }
  .system-logo {
    width:64px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .module-icone,
  .module-chevron {
    transition:none;
  }
}