/* rodapé: a placa escura de cantos redondos assentada no gelo, com a luz difusa no alto e o nome Azcend grande que some
   para transparente embaixo, como no azcend.com.br (a mesma máscara e a caixa de 390 px, com o pé do nome na faixa da linha legal; branco a 6 por cento para ler nítido).
   A placa fica na noite da home, para a página terminar no mesmo céu em que começou; --marca-op é o ajuste do nome */
.pe{padding:0 20px 20px;background:var(--nevoa)}
.placa{--marca-op:.06;position:relative;overflow:hidden;padding:80px max(24px,calc((100% - 1240px) / 2)) 40px;border-radius:30px;background:oklch(0.11 0.012 255);color:oklch(0.84 0.012 250)}
.luz-pe{position:absolute;left:50%;top:0;width:576px;height:239px;border-radius:1000px;transform:translate(-50%,-50%);background:oklch(0.44 0.033 268);opacity:.8;filter:blur(100px);pointer-events:none}
.agua{position:absolute;left:0;right:0;bottom:0;height:390px;pointer-events:none;-webkit-mask-image:linear-gradient(0deg,transparent 20%,#000 60%);mask-image:linear-gradient(0deg,transparent 20%,#000 60%)}
.agua img{width:100%;height:100%;object-fit:contain;opacity:var(--marca-op)}
/* o nome entra uma vez quando a placa chega: sobe 24 px e acende (fim.js liga .on) */
.anima .agua{opacity:0;transform:translateY(24px)}
.anima .pe.on .agua{opacity:1;transform:none;transition:opacity 1.2s var(--saida),transform 1.2s var(--saida)}

.pe-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr) minmax(0,1.3fr);gap:40px 48px;align-items:start}
.pe .marca{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.pe .marca img:first-child{width:30px;height:auto}
.pe .marca img + img{width:auto;height:26px}
.pe-frase{margin-top:14px;max-width:15em;font-size:15px;line-height:1.5;color:oklch(0.66 0.02 250)}
.pe-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.pe h3{margin:0 0 8px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:oklch(0.62 0.02 250)}
.pe-nav a,.pe-fale a{display:flex;align-items:center;min-height:40px;font-size:15px;color:oklch(0.86 0.012 250)}
.pe a{transition:color .25s}
@media (hover:hover) and (pointer:fine){
  .pe a:hover{color:var(--claro)}
}
.pe-fale{font-style:normal}
.pe-fale p{margin-top:10px;max-width:24em;font-size:14px;line-height:1.55;color:oklch(0.66 0.02 250)}
/* a linha legal passa por cima da parte em que o nome já sumiu */
.pe-leg{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 40px;margin-top:clamp(150px,17vw,250px);font-size:13px;line-height:1.7;color:oklch(0.62 0.02 250)}
.pe-leg p:first-child{max-width:52em}
.pe-lk{display:flex;flex-wrap:wrap;gap:0 24px}
.pe-lk a{display:inline-flex;align-items:center;min-height:44px;color:oklch(0.86 0.012 250)}

@media (max-width:1100px){
  .pe-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pe-marca,.pe-nav{grid-column:1/-1}
}
@media (max-width:859px){
  .pe-in{grid-template-columns:minmax(0,1fr);gap:36px}
  .pe-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pe-nav > div:last-child{grid-column:1/-1}
}
@media (max-width:599px){
  .pe{padding:0 10px 10px}
  .placa{padding:40px 24px}
  .agua{bottom:120px;height:200px}
  .pe-nav a,.pe-fale a{min-height:44px;font-size:16px}
  .pe-leg{flex-direction:column;align-items:flex-start;margin-top:64px}
  .pe-lk{gap:0 20px}
}