/* Movimento explica a jornada: busca, apresentação e contato. */
.sites-page .site-preview {
  transform: perspective(1100px) rotateX(var(--scene-y,0deg)) rotateY(var(--scene-x,0deg));
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.sites-page .site-preview__stage {
  position:relative;
  gap:18px;
  padding-top:22px;
  background:radial-gradient(ellipse at 85% 15%,#f8fff7,transparent 65%),#dcece4;
}
.journey-signal {
  display:flex;
  align-items:center;
  justify-self:start;
  gap:12px;
  min-height:26px;
  color:var(--green);
  font-size:11px;
  font-weight:600;
}
.site-journey {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:12px;
  gap:6px;
  border-top:1px solid var(--line);
}
.site-journey button {
  position:relative;
  overflow:hidden;
  display:grid;
  gap:4px;
  padding:15px 10px;
  min-width:0;
  min-height:86px;
  text-align:left;
  color:var(--muted);
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  cursor:pointer;
  font:inherit;
  transition:background .25s,border-color .25s,transform .25s;
}
.site-journey button > span { font-size:11px; letter-spacing:.12em; }
.site-journey button strong { font-size:12px; }
.site-journey button small { font-size:11px; }
.site-journey button[aria-pressed="true"] { background:#edf5ed; border-color:#b9d3c4; color:var(--green); }
.site-journey button:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.site-journey button:hover { transform:translateY(-2px); }
.site-journey button::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--green); transform:scaleX(0); transform-origin:left; }
.site-preview[data-journey="0"] .site-preview__nav,
.site-preview[data-journey="1"] .site-preview__hero,
.site-preview[data-journey="2"] .site-preview__cue { outline:2px solid #79b799; outline-offset:-2px; }
.site-preview__nav,.site-preview__hero,.site-preview__cue { transition:background-color .4s,outline-color .4s; }
.site-preview[data-journey="2"] .site-preview__cue { background:#e0f0df; padding-inline:8px; }
.sites-page .site-preview__stage { min-height:490px; }
.sites-page .site-preview__frame { animation:none; }
.sites-page .hero-copy { padding-bottom:24px; }
.sites-page .diag li { transition:background .3s,transform .3s; }
.sites-page .diag li:hover { background:#ffffff70; transform:translateX(5px); }
.sites-page .site-inclusion summary:focus-visible { outline:2px solid var(--green); outline-offset:4px; border-radius:12px; }
@media (prefers-reduced-motion:no-preference) {
  .sites-page .hero-copy > * { animation:sites-arrive .85s cubic-bezier(.16,1,.3,1) both; }
  .sites-page .hero-copy h1 { animation-delay:.08s; }
  .sites-page .hero-description { animation-delay:.16s; }
  .sites-page .hero-actions { animation-delay:.24s; }
  .sites-page .site-preview__frame { animation:sites-breathe 8s ease-in-out infinite; }
  .journey-running .site-journey button[aria-pressed="true"]::after { animation:journey-time 4.2s linear both; }
  .journey-offscreen .site-preview__frame { animation-play-state:paused; }
  @supports (animation-timeline:view()) {
    .sites-page .portrait img {
      animation:sites-photo linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    .sites-page .figs__hero {
      animation:sites-arrive linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 85%;
    }
  }
}
@keyframes sites-arrive { from { opacity:.45; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes sites-breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes journey-time { to { transform:scaleX(1); } }
@keyframes sites-photo { from { transform:scale(1.08) translateY(1%); } to { transform:scale(1.02) translateY(-1%); } }
.motion-paused .sites-page .site-preview,
.motion-paused .sites-page .site-preview__frame { transform:none; }
.motion-paused .sites-page .hero-copy > *,
.motion-paused .sites-page .figs__hero,
.motion-paused .sites-page .portrait img { animation:none; opacity:1; transform:none; }
@media(max-width:560px) {
  .sites-page .site-preview__stage { min-height:445px; }
  .journey-signal { font-size:11px; gap:8px; }
  .site-journey { padding:8px; gap:3px; }
  .site-journey button { padding:12px 7px; }
  .site-journey button strong { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .sites-page .site-preview { transform:none; transition:none; }
  .sites-page .diag li,.site-journey button { transition:none; }
  .sites-page .diag li:hover,.site-journey button:hover { transform:none; }
}