/* =========================================================
   AVANC — Criação de Sites
   ========================================================= */

/* ---------- Palco de mockups no hero ---------- */
.mock-stage{ position:relative; width:100%; max-width:600px; margin:0 auto; aspect-ratio:1/0.92; }
.mock-glow{
  position:absolute; inset:8% 6% 6%; border-radius:50%;
  background:radial-gradient(circle, rgba(123,44,191,0.55), transparent 68%); filter:blur(30px);
  animation:orbDrift 10s ease-in-out infinite alternate;
}
.mock{ position:absolute; filter:drop-shadow(0 30px 40px rgba(0,0,0,0.55)); }
.mock.main{ width:92%; left:4%; top:12%; z-index:2; animation:floaty 7s ease-in-out infinite; }
.mock.sub1{ width:46%; right:-6%; top:-4%; z-index:1; opacity:.9; }
.mock.sub2{ width:46%; left:-8%; bottom:-4%; z-index:3; opacity:.95; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@media (max-width:980px){
  .mock-stage{ max-width:520px; }
  .mock.sub1{ right:0; } .mock.sub2{ left:0; }
}

/* ---------- Comparativo ---------- */
.compare{ padding:14px 14px 10px; overflow:hidden; }
.cmp-head, .cmp-row{ display:grid; grid-template-columns:1fr 150px 150px; gap:10px; align-items:center; padding:16px 20px; }
.cmp-head{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; text-align:center; }
.cmp-head span:first-child{ text-align:left; }
.cmp-head .on{ color:var(--purple-light); }
.cmp-row{ border-top:1px solid var(--hairline); font-size:14.5px; color:var(--mist); transition:background .3s; }
.cmp-row:hover{ background:rgba(255,255,255,0.03); }
.cmp-row i{ display:flex; align-items:center; justify-content:center; font-style:normal; }
.cmp-row i svg{ width:22px; height:22px; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.cmp-row i.no svg{ stroke:rgba(229,229,229,0.4); }
.cmp-row i.yes svg{ stroke:var(--purple-light); }
.compare.in .cmp-row i svg{ stroke-dasharray:40; stroke-dashoffset:40; animation:draw .8s var(--ease) forwards; animation-delay:calc(.3s + var(--r, 0) * 90ms); }
.cmp-row:nth-child(2){ --r:1; } .cmp-row:nth-child(3){ --r:2; } .cmp-row:nth-child(4){ --r:3; } .cmp-row:nth-child(5){ --r:4; } .cmp-row:nth-child(6){ --r:5; } .cmp-row:nth-child(7){ --r:6; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (max-width:620px){
  .cmp-head, .cmp-row{ grid-template-columns:1fr 62px 62px; padding:14px 8px; font-size:13px; }
  .cmp-head{ font-size:10px; }
}

/* ---------- Portfólio ---------- */
.pf-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:22px; }
.pf-card{ grid-column:span 2; display:flex; flex-direction:column; overflow:hidden; transition:border-color .45s var(--ease), opacity .85s var(--ease), transform .85s var(--ease); }
.pf-card:nth-child(-n+2){ grid-column:span 3; }
.pf-card:hover{ border-color:rgba(162,91,219,0.5); }
.pf-media{
  display:block; padding:26px 26px 4px;
  background:radial-gradient(70% 70% at 50% 55%, rgba(123,44,191,0.34), transparent 70%), linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}
.pf-media img{ width:100%; height:auto; aspect-ratio:1300/846; object-fit:contain; filter:drop-shadow(0 22px 26px rgba(0,0,0,0.45)); }
.pf-body{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px 24px; margin-top:auto; }
.pf-tag{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--purple-light); margin-bottom:4px; }
.pf-body h3{ font-size:1.1rem; color:var(--paper); }
.pf-btn{ padding:10px 18px; font-size:13.5px; }
.pf-btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:980px){
  .pf-grid{ grid-template-columns:repeat(2, 1fr); }
  .pf-card, .pf-card:nth-child(-n+2){ grid-column:span 1; }
  .pf-card:last-child{ grid-column:1 / -1; }
}
@media (max-width:620px){
  .pf-grid{ grid-template-columns:1fr; }
  .pf-card:last-child{ grid-column:span 1; }
  .pf-body{ flex-wrap:wrap; }
}

/* ---------- Depoimentos ---------- */
.tm-head{ margin:96px 0 28px; }
.tm-head h3{ font-size:clamp(1.5rem, 2.4vw, 2rem); color:var(--paper); }
.tm-wrap{
  position:relative; overflow:hidden; width:100%; padding:8px 0 4px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tm-track{ display:flex; width:max-content; animation:scrollX 90s linear infinite; }
.tm-wrap:hover .tm-track{ animation-play-state:paused; }
.tm-card{
  flex:none; width:390px; margin:0 20px 0 0; padding:26px 28px 24px;
  display:flex; flex-direction:column; justify-content:space-between; gap:22px;
}
.tm-card::before{ content:'\201C'; font-family:'Fraunces', serif; font-size:3.4rem; line-height:.5; height:22px; color:var(--purple-light); }
.tm-card blockquote{ margin:0; font-size:15px; line-height:1.6; color:var(--mist); }
.tm-card figcaption strong{ display:block; color:var(--paper); font-size:14.5px; }
.tm-card figcaption span{ font-size:12.5px; color:var(--ink-faint); }
@media (max-width:560px){ .tm-card{ width:306px; } }
@media (prefers-reduced-motion: reduce){
  .tm-track{ animation:none; flex-wrap:wrap; width:100%; justify-content:center; gap:20px; padding:0 20px; }
  .tm-card{ margin:0; }
  .tm-track > [aria-hidden="true"]{ display:none; }
}

/* ---------- Linha do tempo vertical ---------- */
.timeline{ padding:44px 46px; }
@media (max-width:700px){ .timeline{ padding:32px 24px; } }
.timeline-item{ display:grid; grid-template-columns:90px 20px 1fr; gap:24px; position:relative; padding-bottom:38px; }
.timeline-item::before{
  content:''; position:absolute; left:99px; top:8px; bottom:-8px; width:1px; background:var(--hairline-strong);
  transform-origin:top; transform:scaleY(0); transition:transform 1s var(--ease);
}
.timeline.in .timeline-item::before{ transform:scaleY(1); transition-delay:calc(var(--ti, 0) * .25s); }
.timeline-item:nth-child(2){ --ti:1; } .timeline-item:nth-child(3){ --ti:2; } .timeline-item:nth-child(4){ --ti:3; } .timeline-item:nth-child(5){ --ti:4; }
.timeline-item-last::before{ display:none; }
.timeline-day{ font-size:12.5px; font-weight:700; color:var(--purple-light); letter-spacing:.04em; padding-top:2px; }
.timeline-dot{ width:11px; height:11px; border-radius:50%; background:var(--panel); border:2px solid var(--purple-light); margin-top:4px; justify-self:center; }
.timeline-dot-final{ background:var(--purple-light); box-shadow:0 0 0 6px rgba(162,91,219,0.2), 0 0 18px var(--purple-light); }
.timeline-content h4{ font-size:1.05rem; color:var(--paper); margin-bottom:6px; }
.timeline-content p{ font-size:14px; color:var(--ink-soft); line-height:1.55; max-width:52ch; }
@media (max-width:560px){
  .timeline-item{ grid-template-columns:20px 1fr; gap:14px; }
  .timeline-item::before{ left:9px; }
  .timeline-day{ grid-column:1/-1; padding-top:0; margin-bottom:-4px; }
}
.timeline-note{ color:var(--ink-faint); font-size:13.5px; max-width:64ch; margin:26px 0 0; line-height:1.6; }

/* ---------- Parceiros ---------- */
.partner{ background:linear-gradient(165deg, rgba(123,44,191,0.26), rgba(123,44,191,0.04)); border-color:rgba(162,91,219,0.4); }
.partner-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; position:relative; z-index:1; }
@media (max-width:900px){ .partner-grid{ grid-template-columns:1fr; gap:36px; } }
.perks{ list-style:none; padding:0; display:flex; flex-direction:column; gap:14px; }
.perks li{ display:flex; gap:16px; align-items:flex-start; padding:16px 18px; border-radius:var(--radius-md); background:rgba(255,255,255,0.04); border:1px solid var(--hairline); }
.perks .icon-tile{ margin:0; flex:none; }
.perks h4{ font-size:1rem; color:var(--paper); margin-bottom:3px; }
.perks p{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }