/* YosefLux — direção editorial: luz, contraste e espaço. */
:root {
  --ouro:#d4a017;
  --ouro-claro:#edcb83;
  --ouro-escuro:#ad7c21;
  --preto:#090b0d;
  --branco:#f8f5ef;
  --cinza-claro:#e5e5e5;
  --cinza-texto:#a8aaae;
  --borda:rgba(255,255,255,.13);
  --fonte:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --largura:1240px;
  --topo-altura:88px;
}

*,*::before,*::after {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:var(--topo-altura);
}

body {
  margin:0;
  background:var(--preto);
  color:var(--branco);
  font:400 15px/1.75 var(--fonte);
  -webkit-font-smoothing:antialiased;
}

img {
  display:block;
  max-width:100%;
}

a {
  color:inherit;
}

button,input,select,textarea {
  font:inherit;
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}

::selection {
  background:#edcb83;
  color:#090b0d;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  line-height:1.13;
}

h2 {
  font-size:clamp(30px,3.5vw,48px);
  font-weight:600;
  letter-spacing:-.055em;
}

h3 {
  font-size:20px;
  letter-spacing:-.035em;
  font-weight:600;
}

p+p {
  margin-top:20px;
}

.container {
  width:min(100% - 96px,var(--largura));
  margin-inline:auto;
}

.ouro {
  color:var(--ouro-claro);
}

.prata {
  color:var(--branco);
}

.ico {
  width:20px;
  height:20px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

:focus-visible {
  outline:2px solid var(--ouro-escuro);
  outline-offset:6px;
}

.pular {
  position:fixed;
  left:20px;
  top:-100px;
  z-index:100;
  background:var(--ouro-claro);
  color:#090b0d;
  padding:12px 20px;
}

.pular:focus {
  top:12px;
}

.selo {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ouro-claro);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:10px;
  font-weight:600;
  margin-bottom:24px;
}

.selo::before {
  content:"";
  width:25px;
  height:1px;
  background:currentColor;
}

.botao {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  padding:18px 25px;
  min-height:56px;
  background:var(--ouro-claro);
  border:1px solid var(--ouro-claro);
  border-radius:3px;
  color:#17140e;
  font-weight:600;
  font-size:12px;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s,transform .2s;
}

.botao:hover {
  background:#f8dda6;
  transform:translateY(-2px);
}

.botao--pequeno {
  min-height:44px;
  padding:11px 18px;
  font-size:11px;
}

.botao--contorno {
  background:none;
  color:var(--ouro-claro);
}

.link-discreto {
  display:inline-flex;
  gap:18px;
  align-items:center;
  font-size:11px;
  font-weight:500;
  text-decoration:none;
  padding:12px 0;
}

.link-discreto:hover {
  color:var(--ouro-claro);
}

/* Navegação */
.topo {
  position:sticky;
  top:0;
  z-index:50;
  height:var(--topo-altura);
  background:#090b0df5;
  border-bottom:1px solid var(--borda);
  backdrop-filter:blur(16px);
}

.topo__linha {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.marca {
  display:flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
}

.marca__leao {
  width:39px;
  height:40px;
  object-fit:contain;
  mix-blend-mode:normal;
}

.marca__nome {
  font-weight:700;
  font-size:23px;
  letter-spacing:-.06em;
}

.menu {
  display:flex;
  align-items:center;
  gap:29px;
}

.menu a:not(.botao) {
  text-decoration:none;
  font-size:11px;
  color:#b6b7b9;
  transition:color .2s;
}

.menu a:hover,.menu a.ativo {
  color:var(--ouro-claro);
}

.menu .botao {
  background:none;
  border-color:#76603a;
  color:var(--ouro-claro);
}

.menu .botao:hover {
  background:#edcb8312;
}

.menu .ico {
  width:15px;
  height:15px;
}

.menu-botao {
  display:none;
}

/* Abertura: leão ao fundo, integrado à luz e às bordas. */
.hero {
  position:relative;
  min-height:690px;
  overflow:hidden;
  isolation:isolate;
  background:#090b0d;
}

.hero__arte {
  position:absolute;
  z-index:-3;
  inset:0 0 0 35%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero__arte img {
  width:min(850px,73vw);
  max-width:none;
  height:auto;
  mix-blend-mode:screen;
  opacity:.88;
  filter:saturate(.75);
  mask-image:radial-gradient(ellipse 66% 70% at 53% 46%,#000 40%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 66% 70% at 53% 46%,#000 40%,transparent 78%);
}

.hero__atmosfera {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,#090b0d 5%,#090b0df5 26%,#090b0d80 48%,transparent 70%),linear-gradient(0deg,#090b0d,transparent 25%),radial-gradient(ellipse at 85% 20%,#a7782820,transparent 55%);
}

.hero__conteudo {
  padding-top:90px;
  padding-bottom:72px;
}

.hero .selo::before {
  display:none;
}

.ponto-luz {
  width:5px;
  height:5px;
  background:var(--ouro-claro);
  border-radius:50%;
  box-shadow:0 0 14px #e5b453;
}

.hero h1 {
  font-size:clamp(60px,6.8vw,98px);
  font-weight:500;
  letter-spacing:-.07em;
  line-height:1.04;
  max-width:720px;
}

.hero h1 em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.065em;
  color:var(--ouro-claro);
}

.hero__sub {
  margin-top:30px;
  color:#b4b5b9;
  font-size:14px;
  line-height:1.9;
  max-width:440px;
}

.hero__acoes {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:30px;
  margin-top:32px;
}








/* Serviços claros: contraste e informação, sem caixas repetidas. */
.secao {
  padding:108px 0;
}

.secao__cabeca {
  margin-bottom:52px;
}

.secao__intro {
  font-size:13px;
  line-height:1.9;
  max-width:570px;
  margin-top:24px;
  color:var(--cinza-texto);
}

#servicos {
  background:#f1eee7;
  color:#292c30;
}

#servicos .selo {
  color:#856124;
}

#servicos .secao__intro {
  color:#66645f;
}

#servicos .secao__cabeca {
  max-width:860px;
}

.cartoes {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  counter-reset:servico;
  border-top:1px solid #ccc7bd;
}

.cartao {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:38px 30px 34px 0;
  min-height:300px;
  border-bottom:1px solid #ccc7bd;
  counter-increment:servico;
  transition:background .2s;
}

.cartao:nth-child(3n+2),.cartao:nth-child(3n+3) {
  padding-left:30px;
  border-left:1px solid #ccc7bd;
}

.cartao::before {
  content:"0" counter(servico);
  position:absolute;
  right:28px;
  top:37px;
  font:italic 22px Georgia,serif;
  color:#9f967f;
}

.cartao__icone {
  width:30px;
  height:30px;
  margin-bottom:25px;
  stroke:#9b742c;
  fill:none;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cartao h3 {
  font-size:18px;
  margin-bottom:16px;
  max-width:265px;
}

.cartao p {
  font-size:12px;
  line-height:1.9;
  color:#65635e;
  margin-bottom:22px;
  max-width:295px;
}

.cartao__link {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  font-size:11px;
  font-weight:600;
  text-decoration:none;
  color:#72521d;
}

.cartao__link .ico {
  width:17px;
}

.cartao__link:hover {
  gap:20px;
}

.cartao--chamada {
  justify-content:center;
  background:#e8e2d5;
  padding-right:28px!important;
  padding-left:30px!important;
}

.cartao--chamada::before {
  content:"↗";
  font:28px Georgia;
  color:#927030;
}

.cartao--chamada h3 {
  padding-top:18px;
}

.cartao--chamada .botao {
  align-self:flex-start;
  background:#17191c;
  color:#f2eee6;
  border-color:#17191c;
}

.cartao--chamada .botao:hover {
  background:#36312a;
}

/* Etapas */
.secao--escura {
  background:#101215;
  border-block:1px solid var(--borda);
}

#como-funciona {
  padding-bottom:90px;
}

.passos {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:34px;
}

.passo {
  padding-top:24px;
  border-top:1px solid #494133;
}

.passo__num {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:30px;
  color:var(--ouro-claro);
  display:block;
  margin-bottom:24px;
}

.passo h3 {
  font-size:15px;
  margin-bottom:13px;
}

.passo p {
  font-size:12px;
  color:var(--cinza-texto);
  line-height:1.9;
}

/* Projetos: destaque editorial e telas existentes. */
#portfolio {
  background:#090b0d;
}

.projeto {
  overflow:hidden;
  border:1px solid var(--borda);
  background:#111316;
}

.projeto--destaque {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  margin-bottom:25px;
}

.projeto__info {
  padding:32px;
  display:flex;
  flex-direction:column;
}

.projeto--destaque .projeto__info {
  padding:48px;
  justify-content:center;
}

.projeto__tag {
  font-size:9px!important;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ouro-claro)!important;
  margin-bottom:20px;
}

.projeto h3 {
  font-size:28px;
  margin-bottom:20px;
}

.projeto__info>p:not(.projeto__tag) {
  font-size:12px;
  color:var(--cinza-texto);
  line-height:1.9;
  margin-bottom:24px;
}

.projeto__tela {
  padding:24px 24px 0;
  background:radial-gradient(ellipse at top,#51442c66,transparent 80%),#191b1e;
  border-bottom:1px solid var(--borda);
}

.projeto--destaque .projeto__tela {
  padding:48px 0 0 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:0;
}

.projeto__tela img {
  width:100%;
  height:auto;
}

.janela {
  display:flex;
  gap:5px;
  align-items:center;
  background:#24272d;
  padding:11px;
  border-radius:6px 6px 0 0;
}

.janela span {
  width:6px;
  height:6px;
  background:#6c6860;
  border-radius:50%;
}

.janela span:first-child {
  background:#c8a561;
}

.janela em {
  font-size:9px;
  font-style:normal;
  margin-left:12px;
  color:#b0b1b5;
}

.projetos {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:25px;
}

.tecnologias {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0 0 18px;
}

.tecnologias li {
  border:1px solid var(--borda);
  padding:4px 9px;
  font-size:9px;
  color:#c4c2bb;
}

.projeto__link {
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  font-size:12px;
  color:var(--ouro-claro);
  align-self:flex-start;
}

.projeto__link:hover {
  text-decoration:underline;
}

.mock-chamados,.mock-terminal {
  padding:20px;
  background:#101316;
  min-height:210px;
  font-size:10px;
}

.mock-abas {
  display:flex;
  gap:8px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.mock-abas b,.mock-abas i {
  font-style:normal;
  font-weight:400;
  padding:4px 7px;
  background:#22252a;
  color:#b2b2b5;
}

.mock-abas b {
  color:var(--ouro-claro);
}

.mock-linha {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 0;
  border-top:1px solid var(--borda);
  white-space:nowrap;
  overflow:hidden;
}

.mock-linha b {
  font-weight:400;
  color:#b2b2b5;
}

.mock-linha em {
  font-style:normal;
  font-size:9px;
  color:#95979b;
  margin-left:auto;
}

.mock-sla {
  width:5px;
  height:5px;
  flex:none;
  background:#777;
  border-radius:50%;
}

.mock-sla--ok {
  background:#79af96;
}

.mock-sla--alerta {
  background:var(--ouro-claro);
}

.mock-terminal {
  font-family:Consolas,monospace;
  font-size:11px;
  line-height:2;
}

.mock-terminal p+p {
  margin-top:0;
}

.mock-terminal i {
  font-style:normal;
  color:#83bca2;
  margin-right:6px;
}

.mock-terminal b {
  font-weight:400;
  color:var(--ouro-claro);
}

.mock-terminal__fim {
  color:var(--ouro-claro);
}

/* Marca e contato */
.sobre__grade {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:90px;
  align-items:center;
}

.sobre__grade h2 {
  font-size:38px;
  margin-bottom:28px;
}

.sobre__grade p:not(.selo) {
  font-size:13px;
  line-height:2;
  color:var(--cinza-texto);
}

.pilares {
  display:grid;
  grid-template-columns:1fr 1fr;
  list-style:none;
  padding:0;
  margin:0;
  gap:32px;
}

.pilares li {
  border-top:1px solid #554732;
  padding-top:22px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.pilares svg {
  height:27px;
  width:27px;
  stroke:var(--ouro-claro);
  fill:none;
  stroke-width:1.3;
  margin-bottom:18px;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.pilares strong {
  font-size:13px;
  font-weight:500;
}

.pilares span {
  font-size:10px;
  color:var(--cinza-texto);
  margin-top:5px;
}

.contato {
  background:#ece8df;
  color:#23262a;
}

.contato .selo {
  color:#856124;
}

.contato__grade {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start;
}

.contato h2 {
  font-size:clamp(32px,3.5vw,48px);
}

.contato .secao__intro {
  color:#68655f;
  margin-bottom:30px;
}

.canais {
  display:grid;
  gap:0;
}

.canal {
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  padding:20px 0;
  border-top:1px solid #ccc5b9;
}

.canal__icone {
  width:24px;
  height:24px;
  fill:none;
  stroke:#8d6928;
  stroke-width:1.5;
  flex:none;
}

.canal span {
  display:flex;
  flex-direction:column;
  font-size:13px;
  font-weight:500;
  overflow-wrap:anywhere;
}

.canal small {
  font-size:9px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#68655f;
  margin-bottom:3px;
}

.formulario {
  background:#f8f6f1;
  border:1px solid #d2cbc0;
  padding:32px;
}

.formulario h3 {
  font-size:20px;
}

.formulario__nota {
  font-size:10px;
  color:#68655f;
  margin-top:9px;
  margin-bottom:22px;
}

.formulario label {
  display:block;
  font-size:10px;
  font-weight:600;
  margin:15px 0 7px;
}

.obrigatorio {
  font-weight:400;
  font-size:9px;
  color:#68655f;
}

.formulario input,.formulario select,.formulario textarea {
  width:100%;
  min-width:0;
  padding:11px 12px;
  background:#fffefa;
  border:1px solid #a39c90;
  border-radius:2px;
  color:#23262a;
  font-size:12px;
}

.formulario textarea {
  resize:vertical;
  min-height:110px;
}

.formulario .botao {
  width:100%;
  background:#17191c;
  color:#f4ecd9;
  border-color:#17191c;
  margin-top:22px;
}

.formulario .botao:hover {
  background:#38332a;
}

.formulario__erro {
  font-size:12px;
  color:#ab2819;
  margin-top:12px;
}

.formulario[hidden],[hidden] {
  display:none!important;
}

.rodape {
  padding:55px 0 25px;
  background:#090b0d;
  color:var(--cinza-texto);
  font-size:11px;
}

.rodape__grade {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:40px;
}

.rodape__grade p {
  font-size:10px;
  margin-top:12px;
}

.rodape nav,.rodape__contato {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rodape a {
  text-decoration:none;
}

.rodape a:hover {
  color:var(--ouro-claro);
}

.rodape__base {
  border-top:1px solid var(--borda);
  margin-top:40px;
  padding-top:20px;
  font-size:9px;
}




/* Conteúdo sempre legível;
animações somente como aprimoramento. */
.js .revelar {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .65s,transform .65s;
}

.js .revelar.visivel {
  opacity:1;
  transform:none;
}

@media(min-width:1600px) {
  .hero {
    min-height:800px;
  }
  .hero__conteudo {
    padding-top:120px;
    padding-bottom:105px;
  }
  .hero__arte img {
    width:980px;
  }
}

@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px);
  }
  .menu {
    gap:20px;
  }
  .hero__arte {
    left:30%;
  }
  .hero__conteudo {
    padding-top:80px;
  }
  .sobre__grade,.contato__grade {
    gap:50px;
  }
  .projeto--destaque .projeto__info {
    padding:30px;
  }

  .cartao h3 {
    font-size:16px;
  }
}

@media(max-width:860px) {
  :root {
    --topo-altura:74px;
  }
  .container {
    width:calc(100% - 44px);
  }
  .secao {
    padding:76px 0;
  }
  .js .menu-botao {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    padding:11px;
    background:none;
    border:1px solid var(--borda);
    border-radius:2px;
  }
  .menu-botao span {
    height:1px;
    background:var(--branco);
    width:20px;
    transition:transform .2s,opacity .2s;
  }
  .menu-botao[aria-expanded="true"] span:nth-child(1) {
    transform:translateY(6px) rotate(45deg);
  }
  .menu-botao[aria-expanded="true"] span:nth-child(2) {
    opacity:0;
  }
  .menu-botao[aria-expanded="true"] span:nth-child(3) {
    transform:translateY(-6px) rotate(-45deg);
  }
  .js .menu {
    display:none;
    position:absolute;
    top:var(--topo-altura);
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px 22px 22px;
    background:#101215;
    border-bottom:1px solid var(--borda);
  }
  .js .menu.aberto {
    display:flex;
  }
  .js .menu a:not(.botao) {
    padding:17px 0;
    border-bottom:1px solid var(--borda);
  }
  .js .menu .botao {
    margin-top:17px;
  }
  html:not(.js) .topo {
    height:auto;
    position:relative;
  }
  html:not(.js) .topo__linha {
    flex-wrap:wrap;
    padding-block:15px;
  }
  html:not(.js) .menu {
    flex-wrap:wrap;
    gap:16px;
  }
  .hero {
    min-height:680px;
  }
  .hero__arte {
    inset:15px -190px 0 15%;
  }
  .hero__arte img {
    width:730px;
    opacity:.65;
  }
  .hero__atmosfera {
    background:linear-gradient(90deg,#090b0d 0%,#090b0de0 28%,#090b0d30 100%),linear-gradient(0deg,#090b0d,transparent 50%);
  }
  .hero h1 {
    font-size:77px;
  }
  .hero__conteudo {
    padding-top:85px;
  }





  .cartoes {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cartao:nth-child(n) {
    border-left:0;
    padding:30px 22px 30px 0;
  }
  .cartao:nth-child(2n) {
    border-left:1px solid #ccc7bd;
    padding-left:22px;
  }
  .cartao::before {
    right:18px;
    top:27px;
  }
  .passos {
    grid-template-columns:1fr 1fr;
    gap:30px;
  }
  .projeto--destaque {
    grid-template-columns:1fr;
  }
  .projeto--destaque .projeto__tela {
    padding:25px 25px 0;
  }
  .sobre__grade,.contato__grade {
    grid-template-columns:1fr;
    gap:45px;
  }
  .sobre__grade h2 {
    font-size:34px;
  }
  .pilares {
    max-width:600px;
  }
  .projeto__info {
    padding:25px;
  }
  .projeto h3 {
    font-size:24px;
  }
  .rodape__grade {
    grid-template-columns:1fr 1fr;
  }
  .rodape__grade>div:first-child {
    grid-column:1/-1;
  }
}

@media(max-width:540px) {
  .container {
    width:calc(100% - 40px);
  }
  .marca__nome {
    font-size:21px;
  }
  .marca__leao {
    width:33px;
    height:34px;
  }
  .hero {
    min-height:720px;
  }
  .hero__conteudo {
    padding-top:68px;
    padding-bottom:50px;
  }
  .hero .selo {
    font-size:8px;
    letter-spacing:.15em;
  }
  .hero h1 {
    font-size:clamp(49px,13.2vw,71px);
    letter-spacing:-.065em;
  }
  .hero__arte {
    inset:30px -215px 0 0;
  }
  .hero__arte img {
    width:650px;
    opacity:.52;
  }
  .hero__atmosfera {
    background:linear-gradient(90deg,#090b0df0,#090b0d80 65%,#090b0d40),linear-gradient(0deg,#090b0d 0%,transparent 70%);
  }
  .hero__sub {
    font-size:12px;
    max-width:300px;
    line-height:1.95;
    margin-top:27px;
  }
  .quebra-desktop {
    display:none;
  }
  .hero__acoes {
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    margin-top:28px;
  }
  .hero__acoes .botao {
    min-width:205px;
  }






  .secao {
    padding:65px 0;
  }
  .secao__cabeca {
    margin-bottom:32px;
  }
  h2 {
    font-size:32px;
  }
  .selo {
    font-size:9px;
    letter-spacing:.16em;
    margin-bottom:18px;
  }
  .secao__intro {
    font-size:12px;
  }
  .cartoes {
    grid-template-columns:1fr;
  }
  .cartao:nth-child(n) {
    border-left:0;
    padding:28px 0;
    min-height:245px;
  }
  .cartao::before {
    top:28px;
    right:4px;
  }
  .cartao h3 {
    font-size:19px;
    max-width:90%;
  }
  .cartao p {
    max-width:100%;
    padding-right:12px;
  }
  .cartao--chamada {
    padding:26px!important;
    min-height:230px;
  }
  .cartao--chamada::before {
    right:20px;
  }
  .cartao__icone {
    margin-bottom:19px;
  }
  .passos {
    gap:28px 22px;
  }
  .passo h3 {
    font-size:14px;
  }
  .passo p {
    font-size:11px;
  }
  .passo__num {
    margin-bottom:18px;
  }
  .projetos {
    grid-template-columns:1fr;
  }
  .projeto--destaque .projeto__info {
    padding:25px;
  }
  .projeto__tela {
    padding:16px 16px 0;
  }
  .projeto--destaque .projeto__tela {
    padding:16px 16px 0;
  }
  .mock-chamados,.mock-terminal {
    padding:13px;
    font-size:9px;
  }
  .mock-terminal {
    font-size:10px;
  }
  .mock-linha em {
    display:none;
  }
  .sobre__grade h2 {
    font-size:30px;
  }
  .pilares {
    gap:24px;
  }
  .pilares span {
    font-size:9px;
  }
  .formulario {
    padding:23px;
  }
  .canal span {
    font-size:12px;
  }
  .rodape__grade {
    gap:30px 15px;
  }
  .rodape__contato a {
    overflow-wrap:anywhere;
  }
  .rodape__base {
    padding-right:45px;
    line-height:1.9;
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
  .js .revelar {
    opacity:1;
    transform:none;
  }
}

/* Inspiração bíblica: alinhada à identidade, com citações e reflexões distintas. */
.inspiracao {
  background: #0c0e10;
  border-bottom: 1px solid var(--borda);
}
.inspiracao__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.versiculo {
  margin: 0;
  padding-top: 25px;
  border-top: 1px solid #554732;
}
.versiculo__tema {
  color: var(--ouro-claro);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.versiculo blockquote {
  margin: 24px 0 20px;
  font: italic 26px/1.5 Georgia, serif;
  color: var(--branco);
}
.versiculo figcaption a {
  display: inline-flex;
  gap: 14px;
  font-size: 11px;
  color: var(--ouro-claro);
  text-decoration: none;
}
.versiculo figcaption a:hover {
  text-decoration: underline;
}
.versiculo__aplicacao {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--cinza-texto);
}
.inspiracao__nota {
  margin-top: 40px;
  max-width: 700px;
  font-size: 10px;
  line-height: 1.8;
  color: var(--cinza-texto);
}
@media (max-width: 860px) {
  .inspiracao__grade {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .versiculo blockquote {
    font-size: 25px;
    max-width: 560px;
  }
}

/* Faixa contínua: grupos idênticos garantem a volta sem salto. */
.faixa-servicos {
  position: relative;
  overflow: hidden;
  background: #111316;
  border-block: 1px solid var(--borda);
}
.faixa-servicos__trilho {
  display: flex;
  width: max-content;
}
.js .faixa-servicos__trilho {
  animation: servicos-deslizar 34s linear infinite;
}
.faixa-servicos__grupo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-around;
  width: max(100vw, 1100px);
  min-height: 85px;
  gap: 48px;
  padding-inline: 38px;
}
.faixa-servicos__grupo span {
  color: #c1c1c0;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.faixa-servicos__grupo i {
  font-style: normal;
  color: var(--ouro-claro);
  font-size: 15px;
}

@keyframes servicos-deslizar {
  to { transform: translateX(-50%); }
}
@media (max-width: 540px) {
  .faixa-servicos__grupo { min-height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .faixa-servicos__trilho { animation: none; }
  .faixa-servicos__trilho { width: 100%; }
  .faixa-servicos__grupo { width: 100%; flex-wrap: wrap; gap: 15px 22px; padding: 22px; }
  .faixa-servicos__grupo[aria-hidden="true"] { display: none; }
  .faixa-servicos__grupo i { display: none; }
}

/* A abertura reserva espaço para a faixa já na primeira tela. */
:root { --faixa-altura: 87px; }
.hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--topo-altura) - var(--faixa-altura));
}
.hero__conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: clamp(24px, 5svh, 64px);
  padding-bottom: clamp(24px, 5svh, 64px);
}

@media (max-width: 540px) {
  :root { --faixa-altura: 74px; }
}
@media (max-height: 760px) {
  .hero h1 { font-size: clamp(46px, 10svh, 76px); }
  .hero__conteudo { padding-block: 24px; }
  .hero__sub { margin-top: 20px; }
  .hero__acoes { margin-top: 22px; }
}
@media (max-width: 540px) and (max-height: 700px) {
  .hero h1 { font-size: clamp(42px, 8svh, 52px); }
  .hero__conteudo { padding-block: 20px; }
  .hero__sub { margin-top: 18px; line-height: 1.7; }
  .hero__acoes { margin-top: 18px; gap: 6px; }
  .hero__acoes .botao { min-height: 48px; padding-block: 12px; }

}

/* Leão contido na abertura: respeita largura e altura disponíveis. */
.hero__arte {
  inset: 20px 0 20px 35%;
}
.hero__arte img {
  /* Transparência gradual nas bordas, preservando a imagem original. */
  width: min(100%, calc(100svh - var(--topo-altura) - var(--faixa-altura) - 48px));
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  mask-composite: intersect;
}
@media (max-width: 860px) {
  .hero__arte { inset: 24px 0 24px 10%; }
}
@media (max-width: 540px) {
  .hero__arte { inset: 24px 0; }
}

/* Cabeçalho amplo: marca e navegação próximas às bordas, com respiro. */
.container.topo__linha {
  width: calc(100% - clamp(40px, 5vw, 96px));
  max-width: none;
}
