/* ============================================================
   Khrono — telas do produto desenhadas em código
   painel (.dash), celular (.phone) e cartões flutuantes (.collage)
   ============================================================ */

/* ---------- peças compartilhadas ---------- */
.dt{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--mut) }
.dt i{
  width:22px; height:22px; border-radius:7px; background:var(--acc-soft); color:var(--acc);
  display:grid; place-items:center; font-style:normal; font-family:var(--mono); font-size:10px; font-weight:500;
}
.dv{ font-family:var(--display); font-size:24px; font-weight:500; letter-spacing:-.03em; line-height:1.1; margin:8px 0 6px; font-variant-numeric:tabular-nums }
.dsub{ font-size:11.5px; color:var(--dim) }
.dsub b{ display:block; color:var(--ink); font-weight:500; font-family:var(--mono); font-size:12px; margin-top:2px }
.dtag{
  display:inline-block; margin-top:12px; padding:5px 10px; border-radius:99px; border:1px solid var(--line);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut);
}
.dtag.up{ color:var(--ok); border-color:rgba(46,125,91,.35); background:rgba(46,125,91,.06) }
.spark{ width:100%; height:52px; margin:4px 0 2px; overflow:visible; color:var(--acc) }
.spark .line{ fill:none; stroke:var(--acc); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.spark .fill{ opacity:0; transition:opacity .8s var(--ease) .5s }
.spark.thin{ height:40px }
.spark.thin .line{ stroke-width:1.8 }
html.js .in .spark .fill,html.js .collage .spark .fill{ opacity:1 }

/* ---------- painel desktop ---------- */
.dash{
  margin:clamp(40px,6vw,72px) auto 0; max-width:1080px; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow); font-size:13px;
}
.dbar{ height:40px; display:flex; align-items:center; gap:7px; padding:0 16px; border-bottom:1px solid var(--line2); background:var(--bg) }
.dbar i{ width:9px; height:9px; border-radius:50%; background:var(--fossil) }
.dbar span{ margin-left:auto; margin-right:auto; font-family:var(--mono); font-size:10.5px; color:var(--dim) }
.dbody{ display:grid; grid-template-columns:200px 1fr; min-height:520px }
@media(max-width:820px){ .dbody{ grid-template-columns:1fr } .dash .dside{ display:none } }
.dside{ background:var(--acc); color:var(--acc-on); padding:18px 14px; display:flex; flex-direction:column; gap:14px }
.dlogo{ display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:600; font-size:16px }
.dlogo .mk{ width:22px; height:22px; border-radius:6px; background:var(--acc-on); position:relative }
.dlogo .mk::after{ content:''; position:absolute; left:6px; top:6px; width:10px; height:10px; border-radius:2px; background:var(--acc) }
.duser{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:rgba(255,255,255,.1) }
.duser i{ width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:600 }
.duser b{ display:block; font-size:12.5px; font-weight:500 }
.duser small{ font-size:10px; opacity:.7; text-transform:uppercase; letter-spacing:.08em }
.dnew{ background:var(--acc-on); color:var(--acc); text-align:center; padding:9px; border-radius:10px; font-weight:500; font-size:12.5px }
.dside ul{ display:flex; flex-direction:column; gap:2px; margin-top:4px }
.dside li{ padding:9px 12px; border-radius:9px; font-size:12.5px; opacity:.8; display:flex; align-items:center; gap:8px }
.dside li.on{ background:rgba(255,255,255,.16); opacity:1 }
.dside li em{ font-style:normal; font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; padding:2px 6px; border-radius:99px; background:var(--acc-on); color:var(--acc) }
.dver{ margin-top:auto; font-family:var(--mono); font-size:10px; opacity:.55 }
.dmain{ padding:20px 22px 22px; min-width:0 }
.dhead{ display:flex; align-items:center; gap:8px }
.dhead h4{ font-family:var(--display); font-weight:500; font-size:20px; letter-spacing:-.02em; margin-right:auto }
.dbtn{ padding:7px 12px; border-radius:9px; border:1px solid var(--line); font-size:12px; color:var(--mut); background:var(--bg) }
.dbtn.pri{ background:var(--acc); color:var(--acc-on); border-color:var(--acc) }
.drange{ margin:14px 0; padding:9px; border:1px solid var(--line2); border-radius:10px; text-align:center; font-family:var(--mono); font-size:11px; color:var(--mut); background:var(--bg) }
.dkpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
@media(max-width:600px){ .dkpis{ grid-template-columns:1fr } }
.dk{ border:1px solid var(--line2); border-radius:14px; padding:16px; background:var(--bg); min-width:0 }
.dgrid{ display:grid; grid-template-columns:1.5fr 1fr; gap:12px; margin-top:12px }
@media(max-width:700px){ .dgrid{ grid-template-columns:1fr } }
.dchart,.drank{ border:1px solid var(--line2); border-radius:14px; padding:16px; background:var(--bg); min-width:0 }
.dtabs{ display:flex; gap:18px; border-bottom:1px solid var(--line2); margin-bottom:14px }
.dtabs span{ padding:0 0 9px; font-size:12.5px; color:var(--mut); border-bottom:2px solid transparent }
.dtabs span.on{ color:var(--ink); border-color:var(--acc) }
.dtitle{ font-weight:500; font-size:13px; margin-bottom:12px }
.dbars{ display:grid; grid-template-columns:24px 1fr; gap:8px; height:150px }
.dbars .ax{ display:flex; flex-direction:column; justify-content:space-between; font-family:var(--mono); font-size:9px; color:var(--dim); text-align:right }
.dbars .ax i{ font-style:normal }
.bars{ display:flex; align-items:flex-end; gap:5px; border-bottom:1px solid var(--line2); border-left:1px solid var(--line2); padding:0 4px }
.bars i{ flex:1; height:var(--h); border-radius:4px 4px 1px 1px; background:var(--acc); opacity:.85; transform-origin:bottom; transition:transform 1s var(--ease); transition-delay:calc(.25s + var(--k,0) * 45ms) }
html.js [data-reveal]:not(.in) .bars i{ transform:scaleY(0) }
.daxis{ display:flex; justify-content:space-between; margin:8px 0 0 32px; font-family:var(--mono); font-size:9px; color:var(--dim) }
.rrow{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line2); font-size:12.5px; transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(.3s + var(--k,0) * 70ms) }
.rrow:last-child{ border-bottom:0 }
.rrow i{ width:22px; height:22px; border-radius:50%; background:var(--fossil); color:var(--mut); display:grid; place-items:center; font-style:normal; font-family:var(--mono); font-size:10px }
.rrow i.n1,.rrow i.n2,.rrow i.n3{ background:var(--acc); color:var(--acc-on) }
.rrow i.n2{ opacity:.85 } .rrow i.n3{ opacity:.7 }
.rrow span{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rrow b{ font-family:var(--mono); font-weight:500; font-size:12px }
html.js [data-reveal]:not(.in) .rrow{ opacity:0; transform:translateX(8px) }

/* ---------- celular ---------- */
.phone{ width:min(300px,100%); margin:0 auto; position:relative }
.pframe{
  border-radius:44px; background:#111; padding:10px; box-shadow:var(--shadow), inset 0 0 0 2px #2a2a28;
  position:relative; aspect-ratio:9/19; display:flex; flex-direction:column; overflow:hidden;
}
.pisland{ position:absolute; top:20px; left:50%; transform:translateX(-50%); width:88px; height:26px; border-radius:99px; background:#000; z-index:3 }
.pstatus{ background:var(--bg); border-radius:34px 34px 0 0; padding:18px 26px 6px; display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:var(--ink) }
.psig{ display:flex; gap:3px; align-items:flex-end }
.psig i{ width:4px; background:var(--ink); border-radius:1px }
.psig i:nth-child(1){ height:6px } .psig i:nth-child(2){ height:9px } .psig i:nth-child(3){ height:12px }
.pscreen{ background:var(--bg); flex:1; padding:6px 14px 0; overflow:hidden; font-size:12px; display:flex; flex-direction:column; gap:10px;
  -webkit-mask-image:linear-gradient(#000 84%, transparent); mask-image:linear-gradient(#000 84%, transparent) }
.pscreen h4{ font-family:var(--display); font-size:18px; font-weight:500; letter-spacing:-.02em; margin:6px 0 2px }
.prange{ padding:7px; border:1px solid var(--line2); border-radius:10px; background:var(--paper); font-family:var(--mono); font-size:9.5px; color:var(--mut); text-align:center }
.pcard{ background:var(--paper); border:1px solid var(--line2); border-radius:14px; padding:13px 14px }
.pcard .dv{ font-size:21px }
.pcard .dtag{ margin-top:10px; font-size:8.5px }
.ptabs{ background:var(--paper); border-radius:0 0 34px 34px; border-top:1px solid var(--line2); display:flex; justify-content:space-around; padding:10px 8px 16px; font-size:9px; color:var(--mut) }
.ptabs span{ display:flex; flex-direction:column; align-items:center; gap:4px }
.ptabs span::before{ content:''; width:14px; height:14px; border-radius:4px; border:1.5px solid currentColor }
.ptabs span.on{ color:var(--acc) }
.phone.float{ animation:floatY 7s ease-in-out infinite }
@keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }

/* ---------- cartões flutuantes ---------- */
.collage{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch;
  margin:clamp(40px,6vw,72px) auto 0; max-width:1080px;
}
.collage .col .cc:last-child{ flex:1 }
@media(max-width:820px){ .collage{ grid-template-columns:1fr 1fr } }
@media(max-width:560px){ .collage{ grid-template-columns:1fr } }
.collage .col{ display:flex; flex-direction:column; gap:18px; will-change:transform }
.cc{
  background:var(--paper); border:1px solid var(--line2); border-radius:18px; padding:20px; font-size:13px;
  box-shadow:0 18px 40px -30px rgba(27,26,23,.32);
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.cc:hover{ border-color:var(--line); box-shadow:0 26px 50px -30px rgba(27,26,23,.4) }
.ct{ font-weight:500; font-size:13.5px; display:flex; align-items:center; gap:8px; margin-bottom:12px }
.ct small{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--dim); font-weight:400 }
.ct .cal,.ct .ico{ width:22px; height:22px; border-radius:7px; background:var(--acc-soft); color:var(--acc); display:grid; place-items:center; font-size:11px }
.cc ul{ display:flex; flex-direction:column; gap:7px }
.cc li{ display:flex; align-items:center; gap:9px; padding:8px 11px; border:1px solid var(--line2); border-radius:99px; font-size:12px; color:var(--mut); background:var(--bg);
  transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(.2s + var(--k,0) * 80ms) }
.cc li i{ width:7px; height:7px; border-radius:50%; background:var(--acc); flex:none }
html.js [data-reveal]:not(.in) .cc li{ opacity:0; transform:translateX(-6px) }
.cs{ font-size:12.5px; color:var(--mut); margin-bottom:10px; display:flex; align-items:center; gap:8px }
.cs::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--acc) }
.cb{ font-size:12px; color:var(--mut); line-height:1.6; margin-bottom:14px }
.cbtn{ display:inline-block; padding:8px 14px; border-radius:9px; border:1px solid var(--acc-line); background:var(--acc-soft); color:var(--acc); font-size:12px; font-weight:500 }
.cv{ font-family:var(--display); font-size:24px; font-weight:500; letter-spacing:-.03em; display:flex; align-items:baseline; gap:10px; margin-bottom:6px; font-variant-numeric:tabular-nums }
.cv small{ font-family:var(--mono); font-size:11px; color:var(--ok); letter-spacing:0 }
.donut{ display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center }
@media(max-width:520px){ .donut{ grid-template-columns:100px 1fr } }
.donut svg{ width:100%; transform:rotate(-90deg) }
.donut .bg{ fill:none; stroke:var(--fossil); stroke-width:14 }
.donut .seg{ fill:none; stroke-width:14; stroke-dasharray:var(--v) 100; stroke-dashoffset:calc(-1 * var(--o,0)); transition:stroke-dasharray 1.1s var(--ease); transition-delay:.3s }
html.js [data-reveal]:not(.in) .donut .seg{ stroke-dasharray:0 100 }
.donut .s1{ stroke:var(--acc) } .donut .s2{ stroke:var(--acc); opacity:.55 } .donut .s3{ stroke:#C9B37A }
.dl div{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--mut); padding:4px 0 }
.dl i{ width:9px; height:9px; border-radius:50%; flex:none } .dl i.s1{ background:var(--acc) } .dl i.s2{ background:var(--acc); opacity:.55 } .dl i.s3{ background:#C9B37A }
.dl b{ color:var(--ink); font-weight:500; font-family:var(--mono); font-size:11.5px; margin-left:auto }
.dl small{ color:var(--dim); width:32px; text-align:right; font-family:var(--mono); font-size:10.5px }
.team{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.team div{ display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center }
.team i{ grid-row:1/3; width:38px; height:38px; border-radius:50%; background:var(--fossil); display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:500; color:var(--mut) }
.team b{ font-size:12px; font-weight:500 } .team small{ font-size:11px; color:var(--dim) }

@media (prefers-reduced-motion:reduce){
  .phone.float{ animation:none }
  html.js [data-reveal]:not(.in) .bars i,html.js [data-reveal]:not(.in) .rrow,html.js [data-reveal]:not(.in) .cc li{ opacity:1; transform:none }
  html.js [data-reveal]:not(.in) .donut .seg{ stroke-dasharray:var(--v) 100 }
  .spark .fill{ opacity:1 }
}

.phoneWrap{ display:flex; justify-content:center; padding:10px 0 }
html.js .collage .col[data-reveal]{ transition-property:opacity, box-shadow, border-color }

.dash,.phone,.collage{ text-align:left }


/* ---------- fotografia ---------- */
.photo{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line2); box-shadow:var(--shadow); aspect-ratio:4/3; background:var(--fossil) }
.photo.wide{ aspect-ratio:21/9 }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform 1.2s var(--ease) }
.photo:hover img{ transform:scale(1.05) }
.photo::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); border-radius:inherit; pointer-events:none }
.post .cov{ background-image:var(--img); background-size:cover; background-position:center; transition:transform .6s var(--ease) }
.post .cov[style]::after{ display:none }
.post:hover .cov{ transform:scale(1.01) }
.prose .cov{ background-image:var(--img); background-size:cover; background-position:center }

.cc .starRow{ display:flex; gap:3px; margin-bottom:12px }
.cc .starRow svg{ width:12px; height:12px; fill:var(--acc) }