/* ═══════════ inicio.html — layout específico (consome tokens do design-system) ═══════════ */

html, body { height: 100%; }
body { overflow: hidden; opacity: 0; transition: opacity var(--d-slow) var(--ease-smooth); }
body.ready { opacity: 1; }

/* Noise overlay animado */
body::before {
  content: '';
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .025; z-index: 1; pointer-events: none;
  animation: noise 8s steps(8) infinite;
}
@keyframes noise {
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-3%,-2%)}
  30%{transform:translate(3%,-4%)} 50%{transform:translate(-2%,3%)}
  70%{transform:translate(4%,2%)} 90%{transform:translate(-4%,-3%)}
}

/* ── Cursor custom ── */
#cur {
  position: fixed; top: 0; left: 0; width: 7px; height: 7px;
  background: var(--color-brand); border-radius: 50%;
  transform: translate(-50%,-50%); z-index: 9999;
  pointer-events: none; opacity: 0; transition: opacity .3s, width .25s var(--ease-out), height .25s var(--ease-out);
  mix-blend-mode: difference;
}
#cur.vis { opacity: 1; }
#cur.big { width: 13px; height: 13px; }
#cur-ring {
  position: fixed; top: 0; left: 0; width: 38px; height: 38px;
  border: 1px solid rgba(201,168,76,.5); border-radius: 50%;
  transform: translate(-50%,-50%); z-index: 9998;
  pointer-events: none; opacity: 0; transition: opacity .35s, width .3s var(--ease-out), height .3s var(--ease-out);
}
#cur-ring.vis { opacity: 1; }
#cur-ring.big { width: 60px; height: 60px; border-color: var(--color-brand); }
@media (hover: none) { #cur, #cur-ring { display: none; } }

/* ═══════════ LAYOUT ═══════════ */
.page {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1.05fr;
  height: 100dvh; min-height: 100vh;
}

/* ── ESQUERDA · Foto ── */
.photo-col { position: relative; overflow: hidden; }
.photo-col::before {
  content: ''; position: absolute;
  width: 62%; height: 50%; left: -8%; bottom: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 58% 50%, rgba(0,200,212,.75) 0%, rgba(0,200,212,.45) 40%, transparent 70%);
  filter: blur(40px); z-index: 1; pointer-events: none;
  mix-blend-mode: screen;
  animation: cyan-flicker 6s ease-in-out infinite;
}
.photo-glow {
  position: absolute;
  width: 84%; height: 64%; left: -20%; bottom: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 60% 50%, rgba(0,200,212,.28) 0%, rgba(0,200,212,.10) 42%, transparent 70%);
  filter: blur(46px); z-index: 1; pointer-events: none;
  mix-blend-mode: screen;
  animation: cyan-flicker 6s ease-in-out infinite;
}
@keyframes cyan-flicker {
  0%{opacity:1;transform:scale(1) translate(0,0)}
  8%{opacity:.92;transform:scale(.98) translate(-2px,1px)}
  20%{opacity:.85;transform:scale(.97) translate(-1px,2px)}
  38%{opacity:1;transform:scale(1.02) translate(2px,-1px)}
  48%{opacity:.96;transform:scale(1) translate(1px,0)}
  60%{opacity:1;transform:scale(1.01) translate(0,-2px)}
  72%{opacity:.9;transform:scale(.99) translate(-2px,1px)}
  88%{opacity:.93;transform:scale(.98) translate(1px,2px)}
  100%{opacity:.97;transform:scale(1) translate(0,0)}
}
.photo-col img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: grayscale(22%) contrast(1.05);
}
.photo-col::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to right, transparent 58%, var(--color-bg-primary) 100%),
    linear-gradient(to bottom, var(--color-bg-primary) 0%, transparent 9%, transparent 88%, rgba(10,10,12,.5) 100%);
}
.photo-corner { position: absolute; width: 22px; height: 22px; border: solid var(--color-brand); opacity: .7; z-index: 3; }
.pc-tl { top: 1.5rem; left: 1.5rem; border-width: 1px 0 0 1px; }
.pc-tr { top: 1.5rem; right: 1.5rem; border-width: 1px 1px 0 0; }
.pc-bl { bottom: 1.5rem; left: 1.5rem; border-width: 0 0 1px 1px; }
.pc-br { bottom: 1.5rem; right: 1.5rem; border-width: 0 1px 1px 0; }
.photo-scan {
  position: absolute; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--color-brand), transparent);
  opacity: .35; animation: scan 5s var(--ease-smooth) infinite;
}
@keyframes scan { 0%,100%{top:8%;opacity:.1} 50%{top:92%;opacity:.45} }
.photo-label {
  position: absolute; bottom: 2rem; left: 2rem; z-index: 4;
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--color-text-hint);
  display: flex; align-items: center; gap: .55rem;
}
.photo-label::before { content: ''; width: 18px; height: 1px; background: var(--color-brand); opacity: .6; }

/* ── DIREITA · Conteúdo ── */
.content-col {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-20) clamp(1.5rem, 3vw, 3.5rem) var(--s-16) clamp(2rem, 4vw, 4rem);
}
.content-inner { position: relative; z-index: 1; max-width: 740px; width: 100%; }

.kicker {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--color-text-hint);
  display: flex; align-items: center; gap: .6rem; margin-bottom: var(--s-6);
}
.kicker::before { content: ''; width: 20px; height: 1px; background: var(--color-brand); }

.headline {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-headline); line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading); color: var(--color-text-primary);
  margin-bottom: var(--s-4);
}
.headline em { font-style: normal; color: var(--color-brand); }

.subtext {
  font-size: var(--text-body); color: var(--color-text-secondary);
  line-height: var(--lh-body); margin-bottom: var(--s-12); max-width: 540px;
}

.rule { width: 100%; max-width: 640px; height: 1px; background: var(--color-border); margin-bottom: var(--s-8); }

/* ── Cards de caminho ── */
.paths { display: flex; flex-direction: column; gap: var(--s-3); max-width: 680px; }

.path {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-6) var(--s-6);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xs);
  transition: border-color var(--d-mid) var(--ease-smooth),
              transform var(--d-mid) var(--ease-smooth);
}
.path::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, var(--color-brand-pale) 0%, transparent 65%);
  opacity: 0; transition: opacity var(--d-mid) var(--ease-smooth);
}
.path:hover { border-color: var(--color-border-strong); transform: translateX(5px); }
.path:hover::before { opacity: 1; }
.path > * { position: relative; z-index: 1; }

.path-n {
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--w-regular);
  color: var(--color-text-hint); letter-spacing: var(--ls-mono);
  align-self: flex-start; padding-top: 4px; min-width: 22px;
}

.path-mark {
  position: relative;
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs);
}
.path-mark.ia {
  background: var(--color-brand-pale);
  border: 1px solid rgba(201,168,76,.25);
  color: var(--color-brand);
}
.path-mark.ia svg { width: 24px; height: 24px; }
.ia-dot {
  position: absolute; top: -3px; right: -3px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--color-tech);
  box-shadow: 0 0 8px var(--color-tech);
  animation: pulse-tech 2.2s var(--ease-smooth) infinite;
}
@keyframes pulse-tech { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.path-mark.particular {
  background: var(--color-brand-pale);
  border: 1px solid rgba(201,168,76,.25);
  color: var(--color-brand);
}
.path-mark.particular svg { width: 24px; height: 24px; }

.path-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.path-tag {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--color-brand); margin-bottom: 5px;
}
.path-title {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: var(--w-semi);
  color: var(--color-text-primary); letter-spacing: -.01em; margin-bottom: 3px;
}
.path-desc { font-size: .8rem; line-height: 1.5; color: var(--color-text-hint); }

.path-arr {
  flex-shrink: 0; color: var(--color-text-hint);
  transition: transform var(--d-mid) var(--ease-out), color var(--d-mid);
}
.path-arr svg { width: 20px; height: 20px; display: block; }
.path:hover .path-arr { transform: translateX(4px); color: var(--color-brand); }

/* ── Contato direto ── */
.direct { margin-top: var(--s-8); max-width: 680px; }
.direct-label {
  display: block; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--color-text-faint); margin-bottom: var(--s-3);
}
.direct-btns { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.direct-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.05rem; border: 1px solid var(--color-border);
  border-radius: var(--r-xs); font-size: .82rem; color: var(--color-text-secondary);
  transition: border-color var(--d-mid) var(--ease-smooth), color var(--d-mid) var(--ease-smooth), background var(--d-mid) var(--ease-smooth);
}
.direct-btn svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-brand); transition: color var(--d-mid); }
.direct-btn:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); background: var(--color-bg-elevated); }
.direct-btn.wpp:hover svg { color: #25D366; }

/* status inferior */
.status {
  position: absolute; bottom: var(--s-8); left: clamp(2rem, 4vw, 4rem); z-index: 1;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--color-text-faint);
  display: flex; align-items: center; gap: .5rem;
}
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 6px var(--color-success); }

.branding {
  position: absolute; bottom: var(--s-8); right: clamp(2rem, 5vw, 5rem); z-index: 1;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: var(--w-bold);
  letter-spacing: -.01em; color: var(--color-text-faint);
}
.branding sup { font-size: .55em; }

/* ═══════════ Reveal stagger ═══════════ */
[data-reveal] { transition-delay: var(--rd, 0ms); }

/* ═══════════ RESPONSIVO ═══════════ */
@media (max-width: 880px) {
  body { overflow: auto; }
  .page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100svh; }
  .photo-col { height: 56vw; max-height: 340px; }
  .photo-col::after {
    background: linear-gradient(to bottom, rgba(10,10,12,.2) 0%, transparent 18%, transparent 72%, var(--color-bg-primary) 100%);
  }
  .pc-bl, .pc-br { display: none; }
  .photo-scan { display: none; }
  .content-col { padding: var(--s-12) clamp(1.25rem,5vw,2rem) calc(var(--s-20) + var(--s-8)); justify-content: flex-start; }
  .status { left: clamp(1.25rem,5vw,2rem); }
  .branding { right: clamp(1.25rem,5vw,2rem); }
}
@media (max-width: 420px) {
  .path { padding: var(--s-4); gap: var(--s-4); }
  .path-n { display: none; }
}