/* ============================================================
   KYVOS — interior pages (servicios, proyectos, nosotros,
   proceso, contacto). Cleaner, calmer than home, still alive.
   ============================================================ */

/* ---------- shared chip nav (servicios category jump / proyectos filter) ---------- */
.chip-nav{ display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 40px; }
.chip-btn{
  font-family: inherit; font-size: 13.5px; color: var(--text-dim);
  background: transparent; border: 1px solid var(--line-strong);
  padding: 10px 18px; border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.chip-btn:hover{ border-color: var(--cyan); color: var(--text); transform: translateY(-2px); }
.chip-btn.is-active{ border-color: var(--cyan); color: var(--bg); background: var(--cyan); }

@keyframes pulse-hit{
  0%{ box-shadow: 0 0 0 0 rgba(69,224,214,0.5); }
  70%{ box-shadow: 0 0 0 18px rgba(69,224,214,0); }
  100%{ box-shadow: 0 0 0 0 rgba(69,224,214,0); }
}
.pulse-hit{ animation: pulse-hit 1s var(--ease); border-color: var(--cyan) !important; }

.case.is-filtered-out{
  opacity: .18; filter: blur(1px); pointer-events: none;
}

/* ---------- category clusters (servicios) ---------- */
.cluster-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow:hidden;
}
@media (max-width: 800px){ .cluster-grid{ grid-template-columns: 1fr; } }
.cluster-card{
  background: var(--bg-1); padding: 40px;
  transition: background .4s var(--ease);
}
.cluster-card:hover{ background: #101519; }
.cluster-card h3{ font-size: 20px; margin-bottom: 22px; display:flex; align-items:center; gap: 12px; }
.cluster-card h3 .dot{
  width:8px; height:8px; border-radius:50%; background: var(--grad-core); flex-shrink:0;
  box-shadow: 0 0 0 0 rgba(69,224,214,0.5);
  animation: dot-pulse 2.6s ease-in-out infinite;
}
@keyframes dot-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(69,224,214,0.45); }
  50%{ box-shadow: 0 0 0 6px rgba(69,224,214,0); }
}
.cluster-card ul{ display:flex; flex-direction:column; gap: 13px; }
.cluster-card li{
  font-size: 15px; color: var(--text-dim); padding-left: 18px; position:relative;
  opacity: 0;
  transition: color .3s var(--ease), transform .3s var(--ease), opacity .5s var(--ease);
}
.cluster-card.is-in li{ opacity: 1; }
.cluster-card.is-in li:nth-child(1){ transition-delay: .08s; }
.cluster-card.is-in li:nth-child(2){ transition-delay: .16s; }
.cluster-card.is-in li:nth-child(3){ transition-delay: .24s; }
.cluster-card.is-in li:nth-child(4){ transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){ .cluster-card li{ opacity:1; } }
.cluster-card li::before{
  content:''; position:absolute; left:0; top:8px; width:5px; height:1px; background: var(--text-faint);
  transition: width .3s var(--ease), background .3s var(--ease);
}
.cluster-card li:hover{ color: var(--text); transform: translateX(4px); }
.cluster-card li:hover::before{ width:10px; background: var(--cyan); }
@media (prefers-reduced-motion: reduce){ .cluster-card h3 .dot{ animation:none; } }

/* ---------- tag row (desarrollo web capabilities) ---------- */
.tag-row{ display:flex; flex-wrap:wrap; gap: 12px; }
.tag-pill{
  position: relative; overflow: hidden;
  font-size: 14.5px; color: var(--text); border: 1px solid var(--line-strong);
  padding: 12px 20px; border-radius: var(--radius-pill);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tag-pill::before{
  content:''; position:absolute; inset:0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(69,224,214,0.22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s var(--ease);
}
.tag-pill:hover{ border-color: var(--cyan); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(69,224,214,0.08); }
.tag-pill:hover::before{ transform: translateX(120%); }
.tag-pill span{ position:relative; }

/* ---------- service band split ---------- */
.service-band{ padding: 100px 0; }
.service-band + .service-band{ border-top: 1px solid var(--line); }
.service-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 32px; margin-bottom: 52px; flex-wrap: wrap; }
.service-head .tag{ font-family:'Space Grotesk',sans-serif; font-size: 13px; color: var(--text-faint); border: 1px solid var(--line-strong); padding: 6px 14px; border-radius: var(--radius-pill); }
.service-head h2{ font-size: clamp(30px,4vw,48px); max-width: 640px; }

/* ---------- process steps (proceso) ---------- */
.process-list{ position: relative; display:flex; flex-direction:column; padding-left: 54px; }
.timeline-spine{
  position:absolute; left: 17px; top: 0; bottom: 0; width: 2px;
  background: var(--line);
}
.timeline-fill{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background: linear-gradient(180deg, var(--cyan), var(--indigo));
  box-shadow: 0 0 12px rgba(69,224,214,0.5);
}
.process-step{
  position: relative;
  display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:start;
  padding: 42px 36px; border-top: 1px solid var(--line);
  transition: background .4s var(--ease);
}
.process-step:last-child{ border-bottom: 1px solid var(--line); }
.process-step:hover{ background: rgba(255,255,255,0.02); }
.process-num{
  position:absolute; left: -54px; top: 42px;
  width: 36px; height: 36px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-size: 13px; color: var(--text-dim);
  background: var(--bg); border: 1px solid var(--line-strong);
  transition: border-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.process-step:hover .process-num{
  border-color: var(--cyan); color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(69,224,214,0.08);
}
.process-step h3{ font-size: 26px; }
.process-step p{ color: var(--text-dim); font-size: 15.5px; max-width: 46ch; }
@media (max-width: 760px){
  .process-step{ grid-template-columns: 1fr; gap: 12px; padding: 34px 20px; }
  .process-list{ padding-left: 44px; }
  .process-num{ left: -44px; top: 34px; width:30px; height:30px; font-size:11.5px; }
  .timeline-spine{ left: 14px; }
}

/* ---------- team (nosotros) ---------- */
.team-visual{ display:flex; justify-content:center; margin: 8px 0 56px; position:relative; height: 200px; }
.team-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.team-lines path{
  fill:none; stroke: url(#teamLineGrad); stroke-width: 1;
  stroke-dasharray: 260; stroke-dashoffset: 260; opacity: 0.7;
}
.team-lines path.is-drawn{ transition: stroke-dashoffset 1.6s var(--ease); stroke-dashoffset: 0; }
.team-orb-wrap{
  position:absolute; top: 44px; width: 96px; height: 96px;
  transform: translate(var(--push-x, 0px), var(--push-y, 0px));
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.team-orb-wrap.o1{ left: calc(50% - 104px); }
.team-orb-wrap.o2{ left: calc(50% - 48px); top: 14px; }
.team-orb-wrap.o3{ left: calc(50% + 8px); }
.team-orb{
  width: 100%; height: 100%; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 32% 28%, rgba(69,224,214,0.25), rgba(10,12,15,0.4));
  animation: orb-float 5.5s ease-in-out infinite;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.team-orb:hover{ border-color: var(--cyan); box-shadow: 0 0 30px rgba(69,224,214,0.18); }
.team-orb-wrap.o1 .team-orb{ animation-delay: 0s; }
.team-orb-wrap.o2 .team-orb{ animation-delay: .6s; background: radial-gradient(circle at 32% 28%, rgba(106,107,234,0.25), rgba(10,12,15,0.4)); }
.team-orb-wrap.o3 .team-orb{ animation-delay: 1.2s; }
@keyframes orb-float{
  0%, 100%{ translate: 0 0; }
  50%{ translate: 0 -12px; }
}
@media (prefers-reduced-motion: reduce){ .team-orb{ animation:none; } .team-orb-wrap{ transition:none; } }
.team-copy{ max-width: 720px; margin: 0 auto; text-align:center; }
.team-copy h2{ font-size: clamp(30px,4.6vw,54px); }
.team-copy p{ color: var(--text-dim); font-size: 18px; margin-top: 20px; }
.team-traits{ display:flex; flex-wrap:wrap; justify-content:center; gap: 12px; margin-top: 40px; }

/* ---------- projects (proyectos) ---------- */
.case{
  padding: 90px 0; border-top: 1px solid var(--line);
  opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(18px);
}
.case.is-in{
  opacity: 1; clip-path: inset(0 0 0% 0); transform: translateY(0);
  transition: opacity .7s var(--ease), clip-path 1s var(--ease), transform 1s var(--ease), filter .4s var(--ease);
}
@media (prefers-reduced-motion: reduce){ .case{ opacity:1 !important; clip-path:none !important; transform:none !important; } }
.case:first-of-type{ border-top: none; }
.case-top{ display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.case-top h3{ font-size: clamp(28px,4vw,44px); }
.case-accent{
  width: 64px; height: 2px; margin-bottom: 28px;
  background: var(--grad-core);
  transform-origin: left; transform: scaleX(0);
  transition: transform 1s var(--ease);
}
.case.is-in .case-accent, .case-accent.is-in{ transform: scaleX(1); }
.case-tag{
  font-size: 13px; color: var(--text-faint); border: 1px solid var(--line-strong);
  padding: 6px 14px; border-radius: var(--radius-pill); white-space:nowrap;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.case:hover .case-tag{ border-color: var(--cyan); color: var(--cyan); }
.case-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow:hidden; }
@media (max-width: 900px){ .case-grid{ grid-template-columns: 1fr 1fr; } }
.case-col{ background: var(--bg-1); padding: 28px; transition: background .4s var(--ease); }
.case-col:hover{ background: #101519; }
.case-col h5{ font-size: 11.5px; text-transform:uppercase; letter-spacing:.14em; color: var(--text-faint); margin-bottom: 12px; }
.case-col p{ font-size: 14.5px; color: var(--text-dim); }
.case-col.result p{ color: var(--cyan); font-weight: 600; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items:start; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; gap: 48px; } }
.field{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 26px; }
.field label{ font-size: 13px; color: var(--text-dim); }
.field input, .field textarea{
  background: rgba(255,255,255,0.03); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 14px 16px; color: var(--text); font-family: inherit; font-size: 15px;
  transition: border-color .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--text-faint); }
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--cyan); }
.contact-side{ border-left: 1px solid var(--line); padding-left: 48px; }
@media (max-width: 900px){ .contact-side{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top: 32px; } }
.contact-side h4{ font-size: 13px; text-transform:uppercase; letter-spacing:.14em; color: var(--text-faint); margin-bottom: 14px; }
.contact-side p{ color: var(--text-dim); font-size: 15px; margin-bottom: 34px; }
.contact-side a.mail{ font-family:'Space Grotesk',sans-serif; font-size: 22px; color: var(--text); }

/* ---------- generic cta band ---------- */
.cta-band{ padding: 130px 0; text-align:center; border-top: 1px solid var(--line); }
.cta-band h2{ font-size: clamp(32px,5vw,56px); max-width: 760px; margin: 0 auto; }
.cta-band .lede{ color: var(--text-dim); font-size: 17px; margin: 20px auto 40px; max-width: 44ch; }