/* =========================================================================
   Personly Digital — v4 · páginas institucionais
   Projetos, Sobre e Contato. Acrescenta componentes sobre style.css e
   pages.css — não redefine nenhum token, cor ou curva de easing.
   Carregar sempre na ordem: style.css → pages.css → inst.css
   ========================================================================= */

/* =========================================================================
   1. Hero institucional — variante do .phero, em coluna única e centrado
   ========================================================================= */
.ihero{position:relative;overflow:hidden;padding-block:clamp(116px,15vh,168px) clamp(52px,7vw,84px)}
.ihero::before{                 /* brasa terracota atrás do título */
  content:"";position:absolute;left:50%;top:-14%;width:min(920px,120%);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(196,101,58,.13),transparent 62%);
}
.ihero::after{                  /* malha de engenharia, esmaecendo pra baixo */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(239,234,228,.038) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(239,234,228,.038) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:linear-gradient(180deg,#000 6%,transparent 82%);
          mask-image:linear-gradient(180deg,#000 6%,transparent 82%);
}
.ihero>.wrap{position:relative;z-index:1}
.ihero__in{max-width:60rem}
.ihero--mid .ihero__in{margin-inline:auto;text-align:center}
.ihero--mid .crumb{justify-content:center}
.ihero--mid .eyebrow{justify-content:center}
.ihero__h1{margin-top:1.1rem;max-width:19ch}
.ihero--mid .ihero__h1{margin-inline:auto}
.ihero__h1 em{color:var(--terra);font-style:normal}
.ihero__lead{margin-top:1.5rem;max-width:60ch;color:var(--bone-2)}
.ihero--mid .ihero__lead{margin-inline:auto}
.ihero__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem}
.ihero--mid .ihero__acts{justify-content:center}

/* números de abertura, régua terracota entre eles */
.tally{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);
  margin-top:clamp(3rem,5vw,4.4rem);padding-top:clamp(1.8rem,2.6vw,2.4rem);
  border-top:1px solid var(--line);
}
.tally__i{position:relative;padding-left:1.15rem}
.tally__i::before{
  content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--terra-hi),var(--terra-lo));
  transform:scaleY(.42);transform-origin:top;transition:transform .6s var(--ease);
}
.tally__i:hover::before{transform:scaleY(1)}
.tally__n{
  font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 104,'wght' 600;
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;color:var(--bone);letter-spacing:-.01em;
}
.tally__n i{font-style:normal;color:var(--terra)}
.tally__k{margin-top:.5rem;font-size:.83rem;line-height:1.5;color:var(--mute);max-width:26ch}

/* =========================================================================
   2. Filtro de portfólio
   ========================================================================= */
.filt{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  margin-bottom:clamp(1.8rem,3vw,2.6rem);
}
.filt__b{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);background:transparent;border:1px solid var(--line);
  padding:.6em 1.05em;border-radius:999px;cursor:pointer;
  transition:color .4s var(--ease),border-color .4s var(--ease),background-color .4s var(--ease);
}
.filt__b:hover{color:var(--bone);border-color:var(--line-2)}
.filt__b[aria-pressed="true"]{
  color:var(--terra-hi);border-color:rgba(232,129,75,.4);background:var(--terra-ghost);
}
.filt__c{
  margin-left:auto;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
.filt__c b{color:var(--terra);font-weight:400}
/* saída/entrada dos cards ao filtrar */
.proj.is-out{
  opacity:0;transform:scale(.965) translateY(10px);
  pointer-events:none;position:absolute;visibility:hidden;
}
.projs--all{position:relative}
.projs--all .proj{transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* =========================================================================
   3. Sobre — retratos da equipe
   ========================================================================= */
.crew{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)}
.mate{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(168deg,var(--surface-2),var(--surface) 70%);
  transition:border-color .5s var(--ease),transform .7s var(--ease),box-shadow .7s var(--ease);
}
.mate:hover{transform:translateY(-3px);border-color:rgba(232,129,75,.32);box-shadow:0 30px 66px -38px rgba(0,0,0,.92)}
.mate__ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink);isolation:isolate}
.mate__ph img{
  /* sangra 3% para fora do palco: a borda da imagem nunca chega à área
     visível, nem durante o zoom */
  position:absolute;left:-3%;top:-3%;width:106%;height:106%;
  object-fit:cover;object-position:var(--pos,50% 50%);display:block;
  filter:saturate(.5) contrast(1.06) brightness(.86) sepia(.12);
  transform:scale(1);transform-origin:center center;
  /* Só o transform é animado. Animar filter junto obrigava o navegador a
     re-rasterizar a imagem ao fim da transição, e nesse instante o recorte
     da moldura falhava por ~1px — o risco claro que piscava ao tirar o
     mouse. A variação de cor no hover passou para a camada ::before. */
  transition:transform .7s var(--ease);
  backface-visibility:hidden;
  /* A máscara apaga a própria imagem antes da borda inferior do palco.
     Durante a animação do card o recorte (overflow:hidden) erra por ~1px
     e deixava a imagem vazar ali — como a foto é clara, virava um risco
     branco piscando entre a foto e o nome. Com a máscara não há pixel
     claro naquela faixa para vazar. A imagem ocupa de -3% a 103% do
     palco, então 94% da caixa da imagem ≈ 96% do palco. */
  -webkit-mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.5) 89%,transparent 94%);
          mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.5) 89%,transparent 94%);
}
.mate:hover .mate__ph img{transform:scale(1.04)}
.mate__ph::after{               /* degradê que funde a foto ao corpo do card */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(178deg,rgba(5,5,6,.12) 26%,rgba(5,5,6,.76) 80%,var(--surface) 99%);
  /* NÃO animar a opacidade daqui: a parada em --surface 99% é o que emenda a
     foto ao card. Qualquer transparência nela deixa a imagem vazar embaixo do
     nome e produz um "tremido" na borda. O que varia no hover é só o tônus,
     na camada ::before. */
}
.mate__ph::before{              /* tônus terracota — assume a variação do hover */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:rgba(196,101,58,.3);
  transition:opacity .7s var(--ease);
}
.mate:hover .mate__ph::before{opacity:.34}
.mate__body{
  position:relative;z-index:2;
  padding:clamp(1.25rem,2vw,1.7rem);display:flex;flex-direction:column;flex:1;
}
.mate__body::before{             /* tapa a emenda foto/corpo */
  content:"";position:absolute;left:0;right:0;top:-6px;height:7px;
  background:var(--surface);pointer-events:none;
}
.mate__n{
  font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 102,'wght' 600;
  font-size:clamp(1.12rem,1.5vw,1.34rem);color:var(--bone);line-height:1.15;
}
.mate__r{
  margin-top:.5rem;font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--terra);
}
.mate__d{margin-top:.95rem;font-size:.9rem;line-height:1.62;color:var(--mute);flex:1}
.mate__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.mate__tags span{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bone-2);padding:.4em .7em;border-radius:999px;
  border:1px solid var(--line);background:rgba(239,234,228,.02);
}

/* =========================================================================
   4. Sobre — princípios (lista numerada com régua)
   ========================================================================= */
.creed{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,34px)}
.creed__i{
  position:relative;padding:clamp(1.4rem,2.2vw,1.9rem) 0 clamp(1.4rem,2.2vw,1.9rem) clamp(3.2rem,5vw,4.4rem);
  border-top:1px solid var(--line);
}
.creed__i::before{               /* numeral fantasma */
  content:attr(data-n);position:absolute;left:0;top:clamp(1.3rem,2.1vw,1.8rem);
  font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 104,'wght' 600;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(239,234,228,.22);
  transition:-webkit-text-stroke-color .55s var(--ease),color .55s var(--ease);
}
.creed__i:hover::before{-webkit-text-stroke-color:rgba(232,129,75,.62);color:rgba(196,101,58,.1)}
.creed__i::after{                /* régua que cresce no topo */
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--terra-hi),transparent);
  transition:width .7s var(--ease);
}
.creed__i:hover::after{width:min(100%,190px)}
.creed__t{
  font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 102,'wght' 600;
  font-size:clamp(1.04rem,1.35vw,1.22rem);color:var(--bone);line-height:1.25;
}
.creed__d{margin-top:.8rem;font-size:.91rem;line-height:1.65;color:var(--mute);max-width:46ch}

/* =========================================================================
   6. Contato — canais
   ========================================================================= */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.way{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(1.5rem,2.3vw,2rem);
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(168deg,var(--surface-2),var(--surface) 70%);
  text-decoration:none;isolation:isolate;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.way::before{                    /* wash de canto */
  content:"";position:absolute;right:-30%;top:-45%;width:70%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,rgba(196,101,58,.16),transparent 66%);
  opacity:0;transition:opacity .6s var(--ease);
}
.way:hover{transform:translateY(-5px);border-color:rgba(232,129,75,.34);box-shadow:0 28px 62px -38px rgba(0,0,0,.9)}
.way:hover::before{opacity:1}
.way__ic{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  border:1px solid rgba(196,101,58,.3);background:var(--terra-ghost);color:var(--terra-hi);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease);
}
.way__ic svg{width:21px;height:21px}
.way:hover .way__ic{box-shadow:0 0 22px -4px var(--terra-glow);transform:translateY(-2px)}
.way__t{
  margin-top:1.15rem;font-family:var(--display);font-weight:600;
  font-variation-settings:'wdth' 102,'wght' 600;
  font-size:clamp(1.04rem,1.35vw,1.2rem);color:var(--bone);
}
.way__v{margin-top:.55rem;font-size:.97rem;color:var(--bone-2);word-break:break-word}
.way__d{margin-top:.7rem;font-size:.86rem;line-height:1.6;color:var(--mute);flex:1}
.way__go{
  margin-top:1.3rem;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--terra);
}
.way__go .arw{transition:transform .45s var(--ease)}
.way:hover .way__go .arw{transform:translateX(5px)}
/* canal em destaque (WhatsApp) */
.way--hot{border-color:rgba(232,129,75,.26)}
.way--hot::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--terra-hi),transparent);
  opacity:.65;
}

/* =========================================================================
   7. Contato — formulário
   ========================================================================= */
.form{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,1.8vw,1.4rem);
  padding:clamp(1.6rem,2.8vw,2.6rem);
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(168deg,var(--surface-2),var(--surface) 74%);
}
.fld{display:flex;flex-direction:column;gap:.55rem}
.fld--full{grid-column:1/-1}
.fld label{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mute);
}
.fld label i{color:var(--terra);font-style:normal}
.fld input,.fld textarea,.fld select{
  font-family:var(--body);font-size:.95rem;color:var(--bone);
  background:rgba(239,234,228,.028);border:1px solid var(--line);border-radius:12px;
  padding:.85em 1em;width:100%;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease);
}
.fld textarea{min-height:132px;resize:vertical;line-height:1.6}
.fld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23948E86' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;background-size:12px;
  padding-right:2.6em;
}
.fld select option{background:var(--surface);color:var(--bone)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--dim)}
.fld input:hover,.fld textarea:hover,.fld select:hover{border-color:var(--line-2)}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  outline:none;border-color:rgba(232,129,75,.5);background:rgba(239,234,228,.045);
  box-shadow:0 0 0 3px rgba(196,101,58,.13);
}
.fld__err{font-size:.78rem;color:var(--terra-hi);min-height:0;display:none}
.fld.is-bad input,.fld.is-bad textarea,.fld.is-bad select{border-color:rgba(232,129,75,.55)}
.fld.is-bad .fld__err{display:block}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-top:.4rem}
.form__note{font-size:.8rem;line-height:1.55;color:var(--dim);max-width:44ch}
/* honeypot anti-spam */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* =========================================================================
   8. Contato — arte de assinatura: sinal que encontra o destino
   ========================================================================= */
.sig{position:absolute;inset:0;display:grid;place-items:center}
.sig svg{width:100%;height:100%;overflow:visible}
.sig__wire{fill:none;stroke:rgba(239,234,228,.14);stroke-width:1;stroke-dasharray:3 5}
.sig__path{
  fill:none;stroke:var(--terra);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--len,320);stroke-dashoffset:var(--len,320);
  filter:drop-shadow(0 0 6px var(--terra-glow));
}
.stage.is-live .sig__path{animation:sigDraw 2.6s var(--ease) .3s forwards}
@keyframes sigDraw{to{stroke-dashoffset:0}}
.sig__node{fill:var(--surface);stroke:rgba(239,234,228,.2);stroke-width:1;transition:none}
.sig__node--on{
  fill:var(--terra-ghost);stroke:rgba(232,129,75,.6);
  opacity:0;
}
.stage.is-live .sig__node--on{animation:sigOn .5s var(--ease) forwards}
.stage.is-live .sig__node--on.d1{animation-delay:.9s}
.stage.is-live .sig__node--on.d2{animation-delay:1.5s}
.stage.is-live .sig__node--on.d3{animation-delay:2.1s}
.stage.is-live .sig__node--on.d4{animation-delay:2.7s}
@keyframes sigOn{from{opacity:0}to{opacity:1}}
.sig__lbl{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  fill:var(--mute);opacity:0;
}
.stage.is-live .sig__lbl{animation:sigOn .5s var(--ease) forwards}
.stage.is-live .sig__lbl.d1{animation-delay:1s}
.stage.is-live .sig__lbl.d2{animation-delay:1.6s}
.stage.is-live .sig__lbl.d3{animation-delay:2.2s}
.stage.is-live .sig__lbl.d4{animation-delay:2.8s}
.sig__pulse{fill:var(--terra-hi);opacity:0;filter:drop-shadow(0 0 5px var(--terra-glow))}
.stage.is-live .sig__pulse{animation:sigPulse 2.6s var(--ease) .3s forwards}
@keyframes sigPulse{
  0%{opacity:0}8%{opacity:1}92%{opacity:1}100%{opacity:0}
}

/* =========================================================================
   9. Responsivo
   ========================================================================= */
@media (max-width:1080px){
  .crew{grid-template-columns:repeat(2,1fr);max-width:760px}
  .ways{grid-template-columns:1fr;max-width:640px}
  .tally{grid-template-columns:repeat(2,1fr);row-gap:clamp(1.4rem,3vw,2rem)}
}
@media (max-width:900px){
  .ihero{padding-block:clamp(96px,13vh,124px) clamp(44px,6vw,68px)}
  .creed{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}
@media (max-width:560px){
  .crew{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .tally{grid-template-columns:1fr}
  .ihero__acts .btn{flex:1 1 100%}
  .filt__c{margin-left:0;width:100%}
  .form__foot .btn{flex:1 1 100%}
}
@media (max-width:420px){
  .ihero__h1{font-size:clamp(1.85rem,8.6vw,2.4rem)}
}

/* =========================================================================
   10. Movimento reduzido — a arte entra no estado final, parada
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .sig__path{stroke-dashoffset:0!important;animation:none!important}
  .sig__node--on,.sig__lbl{opacity:1!important;animation:none!important}
  .sig__pulse{display:none!important}
  .proj.is-out{transition:none!important}
}