.seguir-web {
  align-self: flex-start;
  padding: .7rem 0;
  border-bottom: 1px solid #737371;
  font-size: .95rem;
  font-weight: 600;
}
.seguir-web span { margin-left: 1rem; }
.web {
  background: #eeede9;
  color: #151515;
  padding: clamp(3.75rem, 8vw, 8rem) var(--margem);
}
.web-inner { max-width: 100rem; margin-inline: auto; }
.web h2 { max-width: 17ch; margin-bottom: clamp(2rem, 4vw, 4.5rem); }
.web h2 span { color: #696864; }
.acoes-galeria {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid #bdbcb7;
  background: #eeede9;
  color: #555550;
  font-size: .85rem;
}
.acoes-galeria a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .55rem .95rem;
  border-radius: 2rem;
  background: #20211f;
  color: #fff;
  font-weight: 650;
}
.acoes-galeria a:focus-visible { outline-color: #20211f; }
.web :is(a, summary) { scroll-margin-top: 5.5rem; }
@media (max-height: 480px) { .acoes-galeria { position: static; } }
.vitrine {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4.5rem) clamp(1.25rem, 2.7vw, 3rem);
}
.projeto-web { display: block; }
.projeto-web.principal {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  background: #20211f;
  color: #f3f3ef;
  align-items: center;
}
.telas {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  background: var(--fundo, #cccfcb);
}
.capa-biehl { --fundo: #b5b9ad; }
.capa-emissao-zero { --fundo: #b9cad1; }
.capa-zacharias { --fundo: #c8c0b4; }
.capa-nassar { --fundo: #bcc3d3; }
.capa-valida360 { --fundo: #b9cac5; }
.telas img {
  position: absolute;
  display: block;
  height: auto;
  box-shadow: 0 .9rem 1.75rem #12182036;
  transition: transform .4s ease-out;
}
.telas .desktop {
  width: 80%;
  top: 9%;
  left: 5%;
  border-radius: 3px;
  border: 1px solid #0003;
}
.telas .mobile {
  width: 19%;
  right: 4%;
  bottom: 6%;
  border: clamp(2px, .25vw, 4px) solid #272726;
  border-radius: clamp(6px, 1vw, 16px);
  background: #272726;
}
.ficha { padding-top: 1.05rem; }
.principal .ficha { padding: clamp(1.5rem, 3vw, 3.5rem); }
.ficha p { margin: .45rem 0 0; line-height: 1.5; color: #52534e; }
.ficha .tipo {
  margin: 0 0 .35rem;
  font-size: .73rem;
  font-weight: 650;
  letter-spacing: .055em;
}
.principal .ficha p { color: #c9cdc5; }
.ficha h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4em;
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.8rem);
  font-weight: 550;
  letter-spacing: -.045em;
  line-height: 1.12;
}
.principal h3 { font-size: clamp(2rem, 4.5vw, 5rem); }
.ficha h3 span { font-size: .55em; font-weight: 450; }
.mais-projetos { margin-top: clamp(2.75rem, 5vw, 6rem); border-block: 1px solid #9f9f99; }
.mais-projetos summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 1.3rem 0;
  list-style: none;
  font-size: clamp(1.3rem, 2.2vw, 2.2rem);
  font-weight: 550;
  letter-spacing: -.035em;
}
.mais-projetos summary::-webkit-details-marker { display: none; }
.mais-projetos summary span::before { content: "+"; }
.mais-projetos[open] summary span::before { content: "−"; }
.mais-projetos ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3vw;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.mais-projetos li a {
  border-top: 1px solid #c4c4bd;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .85rem 0;
}
.mais-projetos img { width: clamp(4rem, 6vw, 7rem); display: block; height: auto; }
.mais-projetos b, .mais-projetos small { display: block; }
.mais-projetos small { margin-top: .2rem; color: #595a55; }
.mais-projetos i { margin-left: auto; font-style: normal; }
.contato {
  display: block;
  background: #eeede9;
  color: #171716;
  padding: clamp(3.5rem, 7vw, 7rem) var(--margem) 1.5rem;
}
.convite, .canais-contato { max-width: 100rem; margin-inline: auto; }
.convite h2 { font-size: clamp(2.8rem, 7vw, 7.5rem); }
.convite h2 span { color: #686863; }
.convite p { max-width: 44ch; margin: 1.2rem 0 1.5rem; line-height: 1.6; }
.contato .botao-whatsapp {
  display: inline-flex; align-items: center; gap: 1.25rem;
  min-height: 48px; padding: .8rem 1.3rem; border: 0; border-radius: 2rem;
  background: #171716; color: white; font-size: 1rem;
}
.botao-whatsapp:focus-visible { outline-color: #171716; }
.canais-contato {
  display: flex; justify-content: flex-start; flex-wrap: wrap; gap: .25rem 1.5rem;
  border-top: 1px solid #aaa9a3; margin-top: clamp(2.5rem, 5vw, 5rem); padding-top: 1rem;
}
.canais-contato a { display: inline-flex; align-items: center; min-height: 44px; border: 0; text-decoration: underline; text-underline-offset: .3em; }
.canais-contato a:first-child { margin-right: auto; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .projeto-web:is(:hover, :focus-visible) .desktop { transform: perspective(900px) rotateY(-2deg) translateY(-2%) scale(1.015); }
  .projeto-web:is(:hover, :focus-visible) .mobile { transform: translate(-2%, -5%) rotate(1deg); }
}
@media (max-width: 700px) {
  .vitrine, .projeto-web.principal, .mais-projetos ul { grid-template-columns: minmax(0, 1fr); }
  .principal .ficha { padding: 1.25rem; }
  .web h2 { font-size: clamp(2.65rem, 12vw, 4rem); }
  .ficha h3 { font-size: 1.75rem; }
  .mais-projetos li a { gap: .75rem; }
}