/* Callisto. — Home page styles */

/* ---- Hero ----
   Fixa em visual escuro mesmo com o resto do site na versão clara original
   (o alternador de tema foi escondido por enquanto — ver core.css .theme-toggle). */
.hero { position: relative; min-height: 100vh; box-sizing: border-box; padding: 190px 0 90px; overflow: hidden; display: flex; align-items: center; background: var(--ink); color: var(--text-on-ink-body); }
.hero .container { width: 100%; }
.hero .label { display: block; margin-bottom: 16px; animation: lume-rise .9s .1s var(--ease-out) both; }
.hero h1 { font-family: var(--font-display); font-weight: 750; font-size: clamp(42px, 5.2vw, 76px); line-height: .98; letter-spacing: -.03em; max-width: 20ch; color: var(--text-on-ink); }
.hero h1 .w { display: inline-block; animation: lume-rise .9s var(--ease-out) both; }
.hero h1 em { font-style: normal; position: relative; background: linear-gradient(105deg, var(--coral) 20%, var(--azure) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: var(--text-lead); line-height: 1.55; color: var(--text-on-ink-body); max-width: 46ch; margin-top: 28px; animation: lume-rise .9s .35s var(--ease-out) both; }
.hero .ctas { display: flex; gap: 16px; align-items: center; margin-top: 40px; animation: lume-rise .9s .5s var(--ease-out) both; }
.hero .proof { display: flex; align-items: center; gap: 12px; margin-top: 44px; animation: lume-rise .9s .65s var(--ease-out) both; }
.hero .proof .dots { display: flex; }
.hero .proof .dots span { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink-border); margin-left: -8px; }
.hero .proof .dots span:first-child { margin-left: 0; }
.hero .proof b { font-family: var(--font-mono); font-weight: 600; }

.hero-jup { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .95; -webkit-mask-image: radial-gradient(ellipse closest-side at 66% 42%, #000 40%, transparent 84%); mask-image: radial-gradient(ellipse closest-side at 66% 42%, #000 40%, transparent 84%); }
/* Fica invisível até o primeiro frame do three.js renderizar (classe jup-live,
   ver jupiter.js) — sem placeholder estático antes: só o 3D, com um fade-in
   simples pra não estourar na tela assim que carrega. */
.hero-jup canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.1s var(--ease-out); }
.hero-jup.jup-live canvas { opacity: 1; }
.hero .container { position: relative; z-index: 2; pointer-events: none; }
.hero .container a, .hero .container button { pointer-events: auto; }

/* ---- Portfolio ---- */
.portfolio { background: var(--cream-deep); border-top: 1.5px solid; border-image: linear-gradient(90deg, var(--coral), var(--azure), var(--border-strong)) 1; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.pf-card.rv-pop { --r: 0deg; --ty: 0px; background: var(--paper); border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-slab); padding: 12px 12px 18px; opacity: 0; transform: rotate(var(--r)) translateY(calc(var(--ty) + 22px)) scale(.94); transition: opacity var(--dur-slow) var(--ease-spring), transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-med) var(--ease-spring), border-color var(--dur-med) var(--ease-out); will-change: transform; }
.pf-card:nth-child(3n+1) { --r: -1.4deg; }
.pf-card:nth-child(3n+2) { --r: 1deg; --ty: 18px; }
.pf-card:nth-child(3n)   { --r: -.6deg; }
.pf-card.rv-pop.in { opacity: 1; transform: rotate(var(--r)) translateY(var(--ty)) scale(1); }
.pf-card.rv-pop:hover { transform: rotate(var(--r)) translate(-4px, calc(var(--ty) - 9px)) scale(1.015); box-shadow: var(--shadow-slab-hover); border-color: var(--azure-deep); }
.pf-card .img-slot { --mx: 50; --my: 50; --rx: 0; --ry: 0; --glow: 0; width: 100%; height: 210px; display: block; position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--paper-2); transform: perspective(800px) rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg)); transition: transform .5s var(--ease-out); }
.pf-card .img-slot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .5s var(--ease-out); }
.pf-card:hover .img-slot img { transform: scale(1.06); }
.pf-card .img-slot::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(280px circle at calc(var(--mx) * 1%) calc(var(--my) * 1%), rgba(255,255,255,.4), transparent 62%); opacity: var(--glow); transition: opacity .3s var(--ease-out); }
.pf-card .img-slot::after { content: '> ver site'; position: absolute; z-index: 2; right: 10px; bottom: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--text-on-ink); background: rgba(11,19,43,.82); border-radius: 999px; padding: 5px 12px; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); pointer-events: none; }
.pf-card .img-slot:hover::after { opacity: 1; transform: translateY(0); }
.pf-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 6px 0; }
.pf-meta h3 { font-family: var(--font-display); font-weight: 650; font-size: 19px; letter-spacing: -.01em; }

/* ---- Serviços ---- */
.sv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
/* .sv-card sempre recebe um fundo pastel via inline style — texto fixado em
   --ink (não segue --text-strong, que inverte no dark theme). */
.sv-card { border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); padding: 30px 28px 32px; box-shadow: var(--shadow-slab); color: var(--ink); position: relative; overflow: hidden; transition: all var(--dur-med) var(--ease-spring); cursor: default; }
.sv-card:hover { transform: translate(-3px,-3px) rotate(-.5deg); box-shadow: var(--shadow-slab-hover); }
.sv-card .sv-ico { width: 52px; height: 52px; border-radius: 16px; border: 1.5px solid var(--border-strong); background: var(--paper); color: var(--text-strong); display: flex; align-items: center; justify-content: center; transition: transform var(--dur-med) var(--ease-spring); }
.sv-card:hover .sv-ico { transform: rotate(-10deg) scale(1.12); }
.sv-card .sv-ico svg { width: 24px; height: 24px; }
.sv-card h3 { font-family: var(--font-display); font-weight: 680; font-size: 24px; letter-spacing: -.01em; margin: 18px 0 10px; }
.sv-card p { font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); }
.sv-card .sv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---- Build ao vivo ---- */
.build { background: radial-gradient(720px 420px at 88% 6%, rgba(42,111,219,.22) 0%, transparent 62%), radial-gradient(640px 420px at 4% 96%, rgba(255,92,56,.16) 0%, transparent 62%), var(--ink); color: var(--text-on-ink); border-top: 1.5px solid var(--border-strong); }
.build .label { color: var(--coral); }
.build h2 { color: var(--text-on-ink); }
.build-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: stretch; }
.build-note { font-size: 17px; line-height: 1.65; color: var(--text-on-ink-body); max-width: 62ch; margin: 32px auto 0; text-align: center; }
.build-note b { color: var(--text-on-ink); font-weight: 600; }
.term { background: #0A1020; border: 1.5px solid var(--ink-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.term-bar, .brow-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1.5px solid var(--ink-border); }
.term-bar span, .brow-bar span { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--border-strong); }
.term-bar b, .brow-bar b { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-on-ink-body); margin-left: 8px; }
.term pre { flex: 1; margin: 0; padding: 20px 22px; font-family: var(--font-mono); font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; color: var(--text-on-ink-body); min-height: 300px; }
.term .c-tag { color: #9BD4B0; } .term .c-txt { color: #F6F2EA; } .term .c-attr { color: #C9B8F0; } .term .c-cmd { color: #FFB39B; } .term .c-ok { color: #9BD4B0; font-weight: 600; }
.term .caret { display: inline-block; width: 8px; height: 17px; background: var(--coral); vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.brow { background: var(--paper); border: 1.5px solid var(--ink-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; color: var(--text-strong); }
.brow-bar { border-bottom: 1.5px solid var(--border); }
.brow-bar .url { flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); background: var(--cream); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; margin-left: 8px; }
.brow-body { flex: 1; padding: 22px; position: relative; }
.b-el { opacity: 0; transform: scale(.85); }
.b-el.on { animation: lume-pop .5s var(--ease-spring) both; }
.b-nav { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1.5px solid var(--border-strong); border-radius: 999px; }
.b-nav i { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); border: 1px solid var(--border-strong); display: inline-block; }
.b-nav em { display: inline-block; width: 42px; height: 7px; border-radius: 4px; background: var(--cream-deep); margin-left: 6px; }
.b-h1 { margin-top: 22px; } .b-h1 i { display: block; height: 16px; border-radius: 6px; background: var(--border-strong); width: 72%; } .b-h1 i + i { margin-top: 8px; width: 48%; }
.b-btn { display: inline-block; margin-top: 18px; background: var(--coral); border: 1.5px solid var(--border-strong); border-radius: 999px; box-shadow: 2px 2px 0 var(--shadow-ink); color: var(--text-on-coral); font-weight: 700; font-size: 13px; padding: 9px 18px; }
.b-imgs { display: flex; gap: 10px; margin-top: 20px; } .b-imgs i { flex: 1; height: 54px; border-radius: 10px; border: 1.5px solid var(--border-strong); }
.b-live { position: absolute; top: 14px; right: 14px; background: var(--mint); color: var(--ink); border: 1.5px solid var(--border-strong); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 5px 12px; box-shadow: 2px 2px 0 var(--shadow-ink); }
.confetti { position: absolute; width: 9px; height: 9px; border-radius: 2px; border: 1px solid var(--border-strong); animation: confetti 1s var(--ease-out) forwards; }
@keyframes confetti { from { transform: translate(0,0) rotate(0); opacity: 1; } to { transform: translate(var(--cx), var(--cy)) rotate(320deg); opacity: 0; } }

/* ---- Números + depoimentos ---- */
.metrics { background: var(--cream-deep); border-top: 1.5px solid; border-image: linear-gradient(90deg, var(--azure), var(--coral), var(--border-strong)) 1; }
.m-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.m-card { background: var(--paper); border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-slab); padding: 26px 24px; text-align: center; }
.m-card .m-val { font-family: var(--font-mono); font-weight: 600; font-size: 44px; letter-spacing: -.02em; } .m-card .m-val i { color: var(--coral-press); font-style: normal; } /* coral-press: 3:1 sobre paper (texto grande) */
.m-card .m-lbl { font-size: 16px; color: var(--text-muted); margin-top: 6px; }
.gauge { position: relative; width: 96px; height: 96px; margin: 0 auto 8px; }
.gauge svg { transform: rotate(-90deg); }
.gauge .gv { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 24px; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 64px; }
/* .q-card sempre recebe um fundo pastel via inline style — texto fixado em --ink. */
.q-card { border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-slab); padding: 28px 26px; font-size: 17.5px; line-height: 1.65; color: var(--ink); transition: all var(--dur-med) var(--ease-spring); }
.q-card:hover { transform: rotate(0) translateY(-6px) !important; box-shadow: var(--shadow-slab-hover); }
.q-card .q-who { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.q-card .q-who i { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-strong); font-style: normal; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.q-card .q-who b { display: block; font-size: 16px; } .q-card .q-who small { font-size: 14px; color: var(--ink-muted); } /* ink-muted: constante, sempre sobre pastel */

/* ---- Processo ---- */
.process { background: radial-gradient(680px 400px at 10% 0%, rgba(42,111,219,.18) 0%, transparent 60%), var(--ink); color: var(--text-on-ink); border-top: 1.5px solid var(--border-strong); }
.process .label { color: var(--coral); }
.process h2 { color: var(--text-on-ink); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { background: var(--ink-soft); border: 1.5px solid var(--ink-border); border-radius: var(--radius-lg); padding: 28px 24px 30px; transition: all var(--dur-med) var(--ease-spring); }
.step:hover { transform: translateY(-8px); border-color: var(--coral); }
.step .num { font-family: var(--font-mono); font-size: 15px; font-weight: 600; background: linear-gradient(120deg, var(--coral), var(--azure-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step h3 { font-family: var(--font-display); font-weight: 650; font-size: 22px; margin: 14px 0 10px; letter-spacing: -.01em; }
.step p { font-size: 15.5px; line-height: 1.6; color: var(--text-on-ink-body); }

/* ---- CTA final ---- */
.cta-final { background: linear-gradient(135deg, var(--peach) 0%, var(--rose) 52%, var(--lavender) 100%); border-top: 1.5px solid var(--border-strong); color: var(--ink); text-align: center; position: relative; overflow: hidden; }
.cta-final h2 { font-family: var(--font-display); font-weight: 750; font-size: 72px; line-height: 1; letter-spacing: -.03em; max-width: 16ch; margin: 18px auto 0; }
.cta-final p { font-size: var(--text-lead); color: var(--ink-muted); margin: 24px auto 0; max-width: 42ch; }
.cta-final .float-dot { position: absolute; z-index: 0; border-radius: 50%; border: 1.5px solid var(--border-strong); animation: lume-float 4s var(--ease-in-out) infinite; }
.cta-final .container { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .hero { padding: 150px 0 60px; }
  .hero .ctas { flex-wrap: wrap; }
  .pf-grid, .sv-grid, .steps, .quotes, .build-grid { grid-template-columns: 1fr; }
  .pf-card:nth-child(3n+2) { --ty: 0px; }
  .m-grid { grid-template-columns: 1fr 1fr; }
  .cta-final h2 { font-size: 44px; }
  .hero-jup { opacity: .45; -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 40%, #000 32%, transparent 74%); mask-image: radial-gradient(ellipse closest-side at 50% 40%, #000 32%, transparent 74%); }
  /* No mobile o texto ocupa quase a largura toda da seção: empurra as bolinhas
     pras bordas (fora da coluna de texto) em vez de deixá-las atrás das letras. */
  .cta-final .float-dot { opacity: .55; }
  .cta-final .float-dot.fd-1 { left: 2% !important; top: 5% !important; width: 54px !important; height: 54px !important; }
  .cta-final .float-dot.fd-2 { right: 4% !important; top: 5% !important; width: 32px !important; height: 32px !important; }
  .cta-final .float-dot.fd-3 { right: 2% !important; bottom: 5% !important; width: 42px !important; height: 42px !important; }
}