/* ============================================================
   TECNITALENTOS — camada 3D / dinâmica (site-builder · Fase 3+6)
   Aditiva: não substitui site.css. Reversível (remover o <link>).
   Lentes: assinatura-âncora = mesh-gradient vivo + parallax 3D + tilt 3D
   Mantém identidade: rosa-velho, Fraunces, easings Emil.
   ============================================================ */

/* ---- profundidade real no hero / page-header ---- */
.hero,.phead{perspective:1300px;perspective-origin:50% 38%}
.hero .hbg,.hero .inner,
.phead .pimg,.phead .wrap{will-change:transform;transform:translate3d(0,0,0)}
/* o fundo respira para trás, o texto fica à frente = camadas separadas */
.hero .inner{transform-style:preserve-3d}

/* ---- mesh-gradient ROSA VIVO (avivar o hero, tirar peso da foto escura) ---- */
.hero::before{
  content:'';position:absolute;inset:-10% -10% -10% -10%;z-index:1;pointer-events:none;
  background:
    radial-gradient(38% 50% at 18% 30%, rgba(227,188,199,.55), transparent 70%),
    radial-gradient(34% 44% at 82% 22%, rgba(184,105,127,.42), transparent 72%),
    radial-gradient(48% 52% at 68% 86%, rgba(217,140,163,.40), transparent 70%),
    radial-gradient(40% 48% at 30% 90%, rgba(141,74,96,.34), transparent 72%);
  mix-blend-mode:screen;opacity:.9;
  animation:meshBreathe 18s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes meshBreathe{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.82}
  33%{transform:translate3d(2.5%, -2%,0) scale(1.06);opacity:.95}
  66%{transform:translate3d(-2%, 1.5%,0) scale(1.04);opacity:.88}
}
/* aligeirar o overlay escuro da foto: deixa a cor viva respirar */
.hero .hbg::after{
  background:
    radial-gradient(125% 95% at 16% 30%, rgba(49,31,41,.30), rgba(49,31,41,.66) 74%),
    linear-gradient(180deg, rgba(49,31,41,.22), rgba(49,31,41,.5));
}

/* ---- TILT 3D nos cards (zig-zag + galeria bento) ---- */
.zrow,.bento{perspective:1100px}
.zmedia,.bento figure{
  transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--eo), box-shadow .5s var(--eo);
}
.zmedia[data-tilt],.bento figure[data-tilt]{transition:transform .12s linear, box-shadow .5s var(--eo)}
.zmedia[data-tilt].rest,.bento figure[data-tilt].rest{transition:transform .6s var(--eo), box-shadow .5s var(--eo)}
/* brilho que segue o cursor sobre o card */
.zmedia .sheen,.bento figure .sheen{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 45%);
  transition:opacity .4s var(--eo);mix-blend-mode:soft-light;
}
.zmedia:hover .sheen,.bento figure:hover .sheen{opacity:1}
.zmedia .num{transform:translateZ(18px)}      /* o número flutua levemente à frente */

/* ---- reveal por clip-path nas imagens (mais sofisticado que fade) ---- */
.media img,.zmedia img,.band img{clip-path:inset(0 0 0 0)}
.reveal .media img,
.reveal.zrow .zmedia img{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--edraw) .05s,transform 1.1s var(--eo)}
.reveal.in .media img,
.reveal.in.zrow .zmedia img{clip-path:inset(0 0 0 0)}

/* ---- botão: blur-content no press (Emil) + sheen ---- */
.btn-rose{position:relative;overflow:hidden}
.btn-rose::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .6s var(--eo);
}
.btn-rose:hover::after{left:130%}

/* ============================================================
   COMPOSIÇÃO / ORGANIZAÇÃO (site-builder Fase 3b)
   Quebra o ritmo uniforme e o aspeto "blocos empilhados".
   ============================================================ */

/* A) RITMO VERTICAL — deixa de ser tudo a mesma padding */
.firstview + .section{padding-top:clamp(104px,13vw,176px)}     /* respiração após o hero */
.section:has(.proj){padding-block:clamp(46px,6vw,78px)}        /* projetos mais compacta */
.section.cta{padding-block:clamp(88px,11vw,150px)}             /* CTA com presença */

/* B) NÚMEROS GIGANTES atrás do zig-zag — viram elemento de composição */
.zig{counter-reset:zr}
.zrow{counter-increment:zr;position:relative}
.zrow > *{position:relative;z-index:1}
.zrow::before{
  content:counter(zr,decimal-leading-zero);
  position:absolute;top:-.46em;z-index:0;pointer-events:none;
  font-family:'Fraunces',serif;font-weight:600;line-height:1;
  font-size:clamp(120px,22vw,300px);color:var(--rose-deep);opacity:.06;letter-spacing:-.04em;
}
.zrow:nth-child(odd)::before{right:2%}
.zrow:nth-child(even)::before{left:2%}

/* C) OVERLAP — o cartão de Projetos sobe e sobrepõe a banda anterior (profundidade) */
.section:has(.proj){margin-top:clamp(-30px,-3.5vw,-64px);z-index:3}

/* D) PROJETOS mais editorial — tira o aspeto "caixa branca com borda" */
.proj{background:var(--rose-tint);border:none;box-shadow:var(--shadow-sm)}
.proj .logos{border-left-color:var(--rose-soft)}
.proj .logos img{height:54px}
@media (max-width:760px){.zrow::before{font-size:clamp(90px,28vw,150px);opacity:.05}}

/* POLISH P3 — marquee passa a textura de transição, não 2.º herói */
.marq .it{font-size:18px;opacity:.66}
.marq .it::after{opacity:.7}

/* ============================================================
   AVALIAÇÕES (prova social Google) — E-E-A-T
   ============================================================ */
.reviews .shead{max-width:760px}
.grate{display:inline-flex;align-items:center;gap:12px;margin-top:22px;
  font-family:'Outfit',sans-serif;font-size:16px;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line-2);border-radius:50px;
  padding:11px 22px;transition:transform .25s var(--eo),border-color .25s var(--eo),box-shadow .25s var(--eo)}
.grate:hover{transform:translateY(-2px);border-color:var(--rose);box-shadow:var(--shadow-sm)}
.grate .stars{color:#e8a33d;letter-spacing:2px;font-size:17px}
.grate b{font-family:'Fraunces',serif;font-size:21px;color:var(--ink);font-weight:600}
.grate .rcount{color:var(--muted);font-size:14.5px}
.grate svg{width:16px;height:16px;color:var(--rose-deep);transition:transform .26s var(--eo)}
.grate:hover svg{transform:translateX(4px)}
.rev-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;margin-top:8px}
.rev{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:38px 40px;box-shadow:var(--shadow-sm);overflow:hidden}
.rev .quote{width:38px;height:38px;color:var(--rose-soft);margin-bottom:14px}
.rev blockquote{font-family:'Fraunces',serif;font-size:clamp(20px,2.3vw,27px);line-height:1.32;
  color:var(--ink);font-weight:480;letter-spacing:-.01em}
.rev figcaption{margin-top:20px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.04em;color:var(--rose-deep)}
.rev figcaption::before{content:'';display:inline-block;width:22px;height:1px;background:var(--rose);
  vertical-align:middle;margin-right:10px}
@media (max-width:760px){.rev-grid{grid-template-columns:1fr}.rev{padding:30px 28px}}

/* ============================================================
   ESTADO DE ERRO do formulário (P0 · Regra #1: lead = receita)
   ============================================================ */
.form-err{display:none;text-align:center;padding:14px 0 6px}
.form-err.show{display:block;animation:wordIn .5s var(--eo)}
.form-err .er{width:62px;height:62px;border-radius:50%;background:#fbeaea;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#b3413f}
.form-err .er svg{width:30px;height:30px}
.form-err h4{font-size:23px;margin-bottom:8px;color:var(--ink)}
.form-err p{color:var(--muted);font-size:15px}
.form-err p a{color:var(--rose-deep);font-weight:600;text-decoration:underline}

/* ---- acessibilidade: nada de movimento se o utilizador não quiser ---- */
@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none;opacity:.7}
  .hero .hbg,.hero .inner{transform:none!important}
  .zmedia,.zmedia[data-tilt]{transform:none!important}
  .reveal .media img,.reveal.zrow .zmedia img{clip-path:none!important}
}
/* tilt e parallax só em ponteiro fino (rato), nunca em touch */
@media not all and (hover:hover) and (pointer:fine){
  .hero .hbg,.hero .inner{transform:none!important}
}