/* ==========================================================================
   PAXION — COMPONENTS
   Botões, cards de projeto, holodex, expertise, tech marquee, contato, case.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.btn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.06em;
  padding:15px 28px; border-radius:100px; display:inline-flex; align-items:center; gap:10px;
  transition:all var(--duration-ui) var(--ease-out);
}
.btn-solid{ background:var(--accent); color:var(--bg-deep); }
.btn-solid:hover{ background:var(--text); box-shadow:var(--glow-strong); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }
.btn .arrow{ transition:transform var(--duration-ui) var(--ease-out); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ---------------------------------------------------------------------- */
/* Services / process flow (nodes + connecting line)                        */
/* ---------------------------------------------------------------------- */
.flow{ position:relative; }
.flow-row{
  display:grid; grid-template-columns:52px 1fr; gap:var(--space-5);
  padding:var(--space-5) 0; border-bottom:1px solid var(--line); position:relative;
}
.flow-row:last-child{ border-bottom:none; }
.flow-node{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; background:var(--surface);
  font-family:var(--font-mono); font-size:12px; color:var(--accent); position:relative; z-index:1;
}
.flow-row:not(:last-child) .flow-node::after{
  content:''; position:absolute; top:52px; left:50%; width:1px; height:calc(100% + 20px);
  background:var(--line); transform:translateX(-50%);
}
.flow-body h3{ font-size:21px; margin-bottom:10px; }
.flow-body p{ color:var(--text-muted); font-size:15px; max-width:560px; }
.flow-tag{
  display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.06em; color:var(--accent-soft); border:1px solid var(--line); padding:5px 12px; border-radius:100px;
}

/* ---------------------------------------------------------------------- */
/* Selected Work — editorial mixed grid                                    */
/* ---------------------------------------------------------------------- */
.work-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--space-5); }

.p-card{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(14,29,49,.7) 0%, rgba(2,5,10,.85) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 30px rgba(0,0,0,.5);
  overflow:hidden; display:block; transition:border-color var(--duration-ui) var(--ease-out), transform var(--duration-ui) var(--ease-out);
  grid-column:span 12;
}
.p-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.p-card:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

.p-card--lg{ grid-column:span 12; min-height:520px; }
.p-card--md{ grid-column:span 6; min-height:400px; }
.p-card--full{ grid-column:span 12; min-height:340px; }

.p-media{ position:absolute; inset:0; z-index:0; }
.p-media img{
  width:100%; height:100%; object-fit:cover; opacity:.55;
  filter:grayscale(.45) contrast(1.12) brightness(.7) saturate(1.05);
  transform:scale(1.01); transition:transform 1.1s var(--ease-soft), opacity var(--duration-ui) var(--ease-out);
}
.p-card:hover .p-media img{ transform:scale(1.055); opacity:.72; }
.p-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,9,15,.2) 0%, rgba(5,9,15,.92) 88%);
}

.p-body{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:var(--space-5); }
.p-meta{ display:flex; align-items:center; gap:14px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; margin-bottom:14px; }
.p-meta .accent{ color:var(--accent); }
.p-featured-tag{
  position:absolute; top:var(--space-5); right:var(--space-5); z-index:2;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--accent);
  border:1px solid var(--line-strong); padding:5px 12px; border-radius:100px; background:rgba(5,9,15,.6);
}
.p-title{ font-size:clamp(22px,2.6vw,38px); margin-bottom:12px; transition:transform var(--duration-ui) var(--ease-out); }
.p-card:hover .p-title{ transform:translateX(6px); }
.p-desc{ color:var(--text-muted); font-size:14px; max-width:480px; margin-bottom:20px; }
.p-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.p-tags span{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); border:1px solid var(--line); padding:5px 10px; border-radius:100px;
}
.p-link{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.06em; color:var(--text);
}
.p-link .arrow{ transition:transform var(--duration-ui) var(--ease-out); color:var(--accent); }
.p-card:hover .p-link .arrow{ transform:translateX(5px); }

@media (max-width:900px){
  .p-card--md{ grid-column:span 12; }
}

/* ---------------------------------------------------------------------- */
/* Capabilities — Holodex 3D                                                */
/* ---------------------------------------------------------------------- */
.holodex{ perspective:1400px; transform-style:preserve-3d; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-5); padding-top:var(--space-4); }
.holo-item{
  transition:transform .6s var(--ease-soft), opacity .6s var(--ease-soft), box-shadow .6s var(--ease-soft), border-color .6s var(--ease-soft);
  transform-style:preserve-3d; will-change:transform; border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(22,38,61,.7), rgba(5,9,15,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 24px rgba(0,0,0,.6);
  padding:var(--space-5); min-height:260px; display:flex; flex-direction:column; justify-content:space-between;
}
@media (min-width:768px){
  .holodex:not(:hover) .holo-item.is-side{ transform:translateZ(-60px) scale(.93); opacity:.55; }
  .holodex:not(:hover) .holo-item.is-center{ transform:translateZ(36px) scale(1.04); opacity:1; box-shadow:0 30px 60px -12px rgba(0,0,0,.7), var(--glow); z-index:5; }
  .holodex:hover .holo-item{ transform:translateZ(-30px) scale(.96); opacity:.6; }
  .holodex .holo-item:hover{ transform:translateZ(50px) scale(1.05) !important; opacity:1 !important; border-color:var(--line-strong); box-shadow:0 34px 70px -12px rgba(0,0,0,.8), var(--glow-strong); z-index:10; }
}
.holo-num{ font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.1em; }
.holo-item h3{ font-size:22px; margin-top:16px; }
.holo-item p{ color:var(--text-muted); font-size:14px; margin-top:12px; }

@media (max-width:900px){
  .holodex{ grid-template-columns:1fr; perspective:none; }
  .holo-item{ transform:none !important; opacity:1 !important; box-shadow:none !important; }
}

/* ---------------------------------------------------------------------- */
/* Expertise list                                                          */
/* ---------------------------------------------------------------------- */
.expertise-list{ border-top:1px solid var(--line); }
.expertise-row{
  display:grid; grid-template-columns:60px 1fr 30px; align-items:center; gap:var(--space-5);
  padding:var(--space-5) 0; border-bottom:1px solid var(--line); cursor:pointer;
  transition:padding-left var(--duration-ui) var(--ease-out);
}
.expertise-row:hover{ padding-left:12px; }
.expertise-num{ font-family:var(--font-mono); font-size:13px; color:var(--accent); }
.expertise-name{ font-size:clamp(20px,2.6vw,30px); transition:color var(--duration-ui) var(--ease-out); }
.expertise-row:hover .expertise-name{ color:var(--accent); }
.expertise-plus{ font-family:var(--font-mono); font-size:18px; color:var(--text-faint); transition:transform var(--duration-ui) var(--ease-out); }
.expertise-row.is-open .expertise-plus{ transform:rotate(45deg); color:var(--accent); }
.expertise-detail{
  grid-column:1/-1; overflow:hidden; max-height:0; transition:max-height var(--duration-ui) var(--ease-out);
  color:var(--text-muted); font-size:14px; max-width:640px;
}
.expertise-row.is-open .expertise-detail{ max-height:120px; padding-top:10px; }

/* ---------------------------------------------------------------------- */
/* Tech / stack marquee                                                     */
/* ---------------------------------------------------------------------- */
.tech-marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--space-5) 0; }
.tech-track{ display:flex; gap:56px; width:max-content; animation:marquee 44s linear infinite; }
.tech-track span{ font-family:var(--font-mono); font-size:15px; letter-spacing:.04em; color:var(--text-muted); white-space:nowrap; }
.tech-track span .dot{ color:var(--accent); margin-left:56px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------------- */
/* Experimental section                                                    */
/* ---------------------------------------------------------------------- */
.experiment{ position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.experiment-canvas-wrap{ position:absolute; inset:0; z-index:0; }
.experiment-canvas-wrap img{
  width:100%; height:100%; object-fit:cover; opacity:.4;
  filter:grayscale(.3) hue-rotate(60deg) saturate(1.4) contrast(1.1) brightness(.65);
}
.experiment-canvas-wrap::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,9,15,.5), rgba(5,9,15,.94)); }
.experiment-inner{ position:relative; z-index:1; max-width:640px; }
.experiment-inner h2{ font-size:clamp(28px,4vw,44px); margin-bottom:22px; }
.experiment-inner p{ color:var(--text-muted); font-size:16px; margin-bottom:14px; }
.experiment-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.experiment-tags span{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line-strong); color:var(--accent); padding:6px 12px; border-radius:100px;
}

/* ---------------------------------------------------------------------- */
/* About                                                                    */
/* ---------------------------------------------------------------------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
.about-text p{ color:var(--text-muted); font-size:16px; margin-bottom:18px; max-width:480px; }
.about-text strong{ color:var(--text); font-weight:500; }
.about-current{ margin-top:var(--space-5); }
.about-current .label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:14px; }
.about-tags{ display:flex; gap:10px; flex-wrap:wrap; }
.about-tags span{ font-family:var(--font-mono); font-size:12px; color:var(--text-muted); border:1px solid var(--line); padding:6px 14px; border-radius:100px; }
.about-visual{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); aspect-ratio:1; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.about-convergence{ width:100%; color:var(--accent); background:radial-gradient(circle at 50% 50%, rgba(76,224,179,.05), transparent 58%); }
.about-convergence canvas{ position:absolute; z-index:1; inset:0; width:100%; height:100%; filter:drop-shadow(0 0 22px rgba(76,224,179,.14)); }
.convergence-center{ position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); width:138px; height:138px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(76,224,179,.62); border-radius:50%; background:rgba(5,9,15,.8); box-shadow:0 0 34px rgba(76,224,179,.08), inset 0 0 24px rgba(76,224,179,.04); text-align:center; }
.paxion-core-logo{ color:var(--text); font-family:var(--font-mono); font-size:30px; font-weight:700; letter-spacing:-.08em; line-height:1; }
.paxion-core-logo b{ color:var(--accent); font-weight:700; }
.convergence-label{ position:absolute; z-index:3; padding:7px 11px; border:1px solid rgba(76,224,179,.22); border-radius:100px; color:var(--text-muted); background:rgba(5,9,15,.72); font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.72; transform:translate(-50%,-50%); white-space:nowrap; transition:opacity .5s ease, border-color .5s ease, color .5s ease; }
.convergence-label.is-linked{ color:var(--text); border-color:rgba(76,224,179,.48); opacity:1; }
.label-1{ top:10%; left:50%; }.label-2{ top:28%; left:86%; }.label-3{ top:72%; left:86%; }.label-4{ top:90%; left:50%; }.label-5{ top:72%; left:14%; }.label-6{ top:28%; left:14%; }

/* ---------------------------------------------------------------------- */
/* Contact                                                                  */
/* ---------------------------------------------------------------------- */
.contact-section{ text-align:left; }
.contact-headline{ font-size:clamp(38px,7vw,88px); max-width:820px; margin-bottom:var(--space-5); }
.contact-links{ display:flex; flex-direction:column; margin-top:var(--space-6); }
.contact-link{
  display:flex; justify-content:space-between; align-items:center; padding:24px 0; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:16px; transition:padding-left var(--duration-ui) var(--ease-out), color var(--duration-ui) var(--ease-out);
}
.contact-link:hover{ padding-left:14px; color:var(--accent); }
.contact-link:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }
.contact-link span:last-child{ color:var(--text-faint); font-size:13px; }
.contact-link:hover span:last-child{ color:var(--accent); }

/* ---------------------------------------------------------------------- */
/* Case page                                                                */
/* ---------------------------------------------------------------------- */
.case-hero{ padding:calc(var(--nav-h) + var(--space-6)) 0 var(--space-6); border-bottom:1px solid var(--line); }
.case-meta-row{ display:flex; gap:var(--space-6); flex-wrap:wrap; margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--line); }
.case-meta-item .label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px; }
.case-meta-item .val{ font-size:15px; }
.case-hero h1{ font-size:clamp(38px,7vw,86px); max-width:900px; }
.case-media{ margin-top:var(--space-6); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9; position:relative; }
.case-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.1) brightness(.75); }
.case-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(5,9,15,.7)); }

.case-block{ display:grid; grid-template-columns:280px 1fr; gap:var(--space-6); padding:var(--space-6) 0; border-bottom:1px solid var(--line); }
.case-block .label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.case-block h3{ font-size:clamp(22px,3vw,32px); margin-bottom:16px; }
.case-block p{ color:var(--text-muted); font-size:15px; max-width:640px; }
.case-tech{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.case-tech span{ font-family:var(--font-mono); font-size:12px; color:var(--text-muted); border:1px solid var(--line); padding:6px 14px; border-radius:100px; }

.case-next{ padding:var(--space-7) 0; text-align:center; }
.case-next .label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:18px; }
.case-next h2{ font-size:clamp(30px,5vw,58px); }

@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
  .case-block{ grid-template-columns:1fr; }
  .holodex{ padding-top:0; }
}