/* ============================================================
   ELYONAI — Sections, components, reveals, directions
   ============================================================ */

/* ---------- reveal on scroll ----------
   Opacity is toggled WITHOUT a transition so visibility never depends on a
   running animation frame (offscreen/throttled contexts freeze transitions).
   Only the transform slide is transitioned — purely additive motion. */
.reveal{ opacity:0; transform:translateY(22px); transition:transform .7s cubic-bezier(.2,.7,.3,1); will-change:transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.06s; } .reveal.d2{ transition-delay:.12s; } .reveal.d3{ transition-delay:.18s; }
.reveal.d4{ transition-delay:.24s; } .reveal.d5{ transition-delay:.30s; } .reveal.d6{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- generic card ---------- */
.card{
  position:relative; border-radius:var(--radius); padding:26px;
  background:var(--surface-light); border:1px solid var(--line-light);
  box-shadow:var(--shadow-card); transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.sec-dark .card, .sec-dark-2 .card{ background:var(--surface-dark); border-color:var(--line-dark); box-shadow:none; }
.card:hover{ transform:translateY(-4px); box-shadow:0 1px 2px rgba(17,21,27,.05), 0 24px 50px -22px rgba(17,21,27,.22); border-color:color-mix(in oklab, var(--cyan) 35%, var(--line-light)); }
.sec-dark .card:hover, .sec-dark-2 .card:hover{ border-color:color-mix(in oklab, var(--cyan) 40%, transparent); box-shadow:0 calc(30px*var(--glow)) calc(70px*var(--glow)) -34px color-mix(in oklab,var(--cyan) 60%, transparent); background:var(--surface-dark-2); }

.ic-tile{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:color-mix(in oklab, var(--cyan) 10%, transparent); border:1px solid color-mix(in oklab, var(--cyan) 22%, var(--line-light)); color:var(--cyan-deep); }
.sec-dark .ic-tile, .sec-dark-2 .ic-tile{ color:var(--cyan); border-color:color-mix(in oklab, var(--cyan) 30%, transparent); background:color-mix(in oklab, var(--cyan) 14%, transparent); }
.ic-tile svg{ width:23px; height:23px; }

/* ---------- problema grid ---------- */
.pain-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pain{ display:flex; flex-direction:column; gap:16px; padding:24px; }
.pain .ic-tile{ background:color-mix(in oklab, #ff6b6b 9%, transparent); border-color:color-mix(in oklab,#ff6b6b 20%, var(--line-light)); color:#d94a4a; width:42px; height:42px; }
.pain h3{ font-size:18px; letter-spacing:-.01em; }
.pain p{ font-size:14.5px; line-height:1.55; color:var(--txt-l-mut); }
.pain .tag{ margin-top:auto; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-300); }

/* ---------- soluciones / servicios ---------- */
.serv-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.serv{ grid-column:span 2; padding:28px; display:flex; flex-direction:column; gap:18px; min-height:248px; }
.serv:nth-child(1){ grid-column:1 / span 3; } /* first row: 2 wide cards */
.serv:nth-child(2){ grid-column:4 / span 3; }
.serv h3{ font-size:21px; }
.serv p{ font-size:14.5px; line-height:1.6; color:var(--txt-d-mut); }
.serv .serv-foot{ margin-top:auto; display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; color:var(--cyan); letter-spacing:.02em; flex-wrap:wrap; }
.serv .mini{ padding:5px 9px; border-radius:7px; border:1px solid var(--line-dark); color:var(--txt-d-mut); background:rgba(255,255,255,.02); }

/* ---------- casos de uso (workflows) ---------- */
.cases{ margin-top:56px; display:flex; flex-direction:column; gap:16px; }
.case{ padding:24px 26px; display:grid; grid-template-columns:248px 1fr; gap:30px; align-items:center; }
.case .case-meta .num{ font-family:var(--font-mono); font-size:12px; color:var(--cyan-deep); letter-spacing:.1em; }
.sec-dark .case .case-meta .num{ color:var(--cyan); }
.case .case-meta h3{ font-size:20px; margin-top:10px; letter-spacing:-.01em; }
.case .case-meta p{ margin-top:9px; font-size:13.5px; line-height:1.5; color:var(--txt-l-mut); }
.sec-dark .case .case-meta p{ color:var(--txt-d-mut); }

.pipe{ display:flex; align-items:stretch; gap:0; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; scrollbar-width:none; -ms-overflow-style:none; }
.pipe::-webkit-scrollbar{ display:none; width:0; height:0; }
.pnode{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; flex:none;
  min-width:104px; padding:14px 12px; border-radius:13px; text-align:center;
  background:var(--bg-light-2); border:1px solid var(--line-light); }
.sec-dark .pnode{ background:rgba(255,255,255,.03); border-color:var(--line-dark); }
.pnode .pic{ width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:#fff; border:1px solid var(--line-light); color:var(--ink-700); }
.sec-dark .pnode .pic{ background:rgba(255,255,255,.05); border-color:var(--line-dark); color:var(--txt-d); }
.pnode.accent .pic{ background:color-mix(in oklab,var(--cyan) 18%, transparent); border-color:color-mix(in oklab,var(--cyan) 48%, transparent); color:var(--cyan-ink); }
.sec-dark .pnode.accent .pic{ color:var(--cyan); }
.pnode .pic svg{ width:20px; height:20px; }
.pnode .pl{ font-size:11.5px; font-weight:600; line-height:1.25; color:var(--txt-l); }
.sec-dark .pnode .pl{ color:var(--txt-d); }
.pnode .ps{ font-family:var(--font-mono); font-size:9.5px; color:var(--txt-l-mut); letter-spacing:.02em; }
.sec-dark .pnode .ps{ color:var(--txt-d-mut); }
.pconn{ flex:none; align-self:center; width:42px; height:22px; position:relative; }
.pconn svg{ width:100%; height:100%; overflow:visible; }
.pconn path{ fill:none; stroke:color-mix(in oklab,var(--cyan) 55%, var(--line-light)); stroke-width:1.6; stroke-dasharray:5 6; }
.case.in .pconn path{ animation:dashflow 1s linear infinite; }
.pconn .tip{ fill:var(--cyan-deep); }
.sec-dark .pconn .tip{ fill:var(--cyan); }
@media (prefers-reduced-motion: reduce){ .case.in .pconn path{ animation:none; } }

/* ---------- proceso ---------- */
.steps{ margin-top:56px; display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.step{ position:relative; padding:0 22px; }
.step:not(:last-child)::after{ content:""; position:absolute; top:26px; right:0; width:100%; height:1px; background:linear-gradient(90deg, color-mix(in oklab,var(--cyan) 50%, transparent), transparent); transform:translateX(50%); }
.step .sn{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:21px; position:relative; z-index:1;
  background:linear-gradient(180deg, var(--surface-dark), var(--surface-dark-2)); border:1px solid color-mix(in oklab,var(--cyan) 30%, var(--line-dark)); color:var(--cyan);
  box-shadow:0 calc(16px*var(--glow)) calc(40px*var(--glow)) -20px color-mix(in oklab,var(--cyan) 70%, transparent); }
.step h3{ margin-top:22px; font-size:18px; }
.step p{ margin-top:10px; font-size:14px; line-height:1.55; color:var(--txt-d-mut); }
.step .skp{ margin-top:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--cyan); opacity:.8; }

/* ---------- diferenciador ---------- */
.diff-wrap{ margin-top:54px; display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:start; }
.diff-lead{ font-family:var(--font-display); font-weight:500; font-size:clamp(20px,2vw,25px); line-height:1.4; letter-spacing:-.01em; }
.diff-lead .accent{ color:var(--cyan-deep); }
.diff-list{ display:flex; flex-direction:column; gap:2px; }
.diff-item{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-light); }
.diff-item:last-child{ border-bottom:0; }
.diff-item .dk{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:linear-gradient(180deg, var(--cyan), var(--cyan-deep)); color:#06222F; border:none; box-shadow:0 6px 16px -8px color-mix(in oklab,var(--cyan) 80%, transparent); }
.diff-item .dk svg{ width:18px; height:18px; }
.diff-item h4{ font-family:var(--font-display); font-weight:600; font-size:16.5px; }
.diff-item p{ margin-top:5px; font-size:14px; line-height:1.5; color:var(--txt-l-mut); }

/* ---------- tecnologías ---------- */
.tech-grid{ margin-top:54px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tcat{ padding:24px; }
.tcat .tlabel{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
.tcat ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.tcat li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--txt-d); }
.tcat li .tg{ width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.04); border:1px solid var(--line-dark); color:var(--cyan); }
.tcat li .tg svg{ width:16px; height:16px; }
.tech-note{ margin-top:30px; text-align:center; font-size:14.5px; color:var(--txt-d-mut); font-family:var(--font-mono); letter-spacing:.01em; }
.tech-note b{ color:var(--cyan); font-weight:500; }

/* ---------- CTA final ---------- */
.cta-final{ position:relative; overflow:hidden;
  background:
   radial-gradient(80% 130% at 50% 120%, color-mix(in oklab,var(--cyan) calc(26%*var(--glow)), transparent), transparent 60%),
   linear-gradient(180deg, var(--bg-dark-2), var(--bg-dark)); }
.cta-final .container{ position:relative; z-index:2; text-align:center; max-width:840px; }
.cta-final h2{ font-size:clamp(32px,4.6vw,56px); line-height:1.04; }
.cta-final h2 .accent{ color:var(--cyan); }
.cta-final p{ margin:22px auto 0; font-size:clamp(16px,1.6vw,19px); line-height:1.6; color:var(--txt-d-mut); max-width:58ch; }
.cta-final .hero-cta{ justify-content:center; margin-top:36px; }
.cta-glowline{ position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:.6; }
.cta-orbit{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:calc(.5*var(--glow)); }

/* ---------- footer ---------- */
.footer{ background:#070A0E; border-top:1px solid var(--line-dark); padding-block:64px 36px; color:var(--txt-d); }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer .f-brand img{ height:34px; margin-bottom:18px; }
.footer .f-brand p{ font-size:14px; line-height:1.6; color:var(--txt-d-mut); max-width:34ch; }
.footer .f-brand .f-mail{ margin-top:18px; display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:13px; color:var(--cyan); }
.footer h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-300); margin:0 0 16px; font-weight:500; }
.footer .fcol a{ display:block; font-size:14px; color:var(--txt-d-mut); padding:6px 0; transition:color .2s; }
.footer .fcol a:hover{ color:var(--cyan); }
.footer-bot{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line-dark); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-bot p{ font-size:13px; color:var(--ink-300); }
.footer-bot .by{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--txt-d-mut); }
.footer-bot .by img{ height:22px; opacity:.9; }

/* ============================================================
   DIRECTIONS (tweakable visual systems)
   ============================================================ */
/* STUDIO — lighter, editorial, hairline, low glow */
[data-direction="studio"]{ --glow:.35; --radius:14px; --radius-lg:18px; }
[data-direction="studio"] .sec-dark{ background:#0E141B; }
[data-direction="studio"] .card{ box-shadow:none; border-color:var(--line-light); }
[data-direction="studio"] .sec-dark .card, [data-direction="studio"] .sec-dark-2 .card{ background:transparent; }
[data-direction="studio"] .hero-grid{ opacity:.28; }
[data-direction="studio"] .strip{ background:#fff; }
[data-direction="studio"] .sec-light-2{ background:#FAFBFC; }

/* BLUEPRINT — technical, grid lines everywhere, mono-forward, cyan wireframe */
[data-direction="blueprint"]{ --radius:8px; --radius-lg:10px; --radius-sm:6px; }
[data-direction="blueprint"] .section::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--line-dark-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark-2) 1px,transparent 1px);
  background-size:40px 40px;
}
[data-direction="blueprint"] .sec-light .section::before,
[data-direction="blueprint"] .section.sec-light::before,
[data-direction="blueprint"] .section.sec-light-2::before{ opacity:.6; background-image:linear-gradient(var(--line-light-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-light-2) 1px,transparent 1px); }
[data-direction="blueprint"] .container{ position:relative; z-index:2; }
[data-direction="blueprint"] .card{ border-radius:8px; }
[data-direction="blueprint"] .h-kicker .eyebrow{ font-weight:500; }
[data-direction="blueprint"] .sec-title{ letter-spacing:-.03em; }
[data-direction="blueprint"] .card::after{ content:""; position:absolute; top:-1px; left:-1px; width:9px; height:9px; border-top:1.5px solid color-mix(in oklab,var(--cyan) 55%, transparent); border-left:1.5px solid color-mix(in oklab,var(--cyan) 55%, transparent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .hero .container{ grid-template-columns:1fr; gap:36px; }
  .hero-visual{ height:440px; max-width:560px; margin-inline:auto; width:100%; }
  .diff-wrap{ grid-template-columns:1fr; gap:30px; }
  .tech-grid{ grid-template-columns:repeat(2,1fr); }
  .serv-grid{ grid-template-columns:repeat(2,1fr); }
  .serv, .serv:nth-child(1), .serv:nth-child(2){ grid-column:auto; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:32px 20px; }
  .step:not(:last-child)::after{ display:none; }
  .case{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width: 760px){
  :root{ --section-y:calc(84px * var(--density)); }
  .pain-grid{ grid-template-columns:1fr; }
  .serv-grid{ grid-template-columns:1fr; }
  .tech-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .case{ grid-template-columns:1fr; gap:20px; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:30px; }
  .footer .f-brand{ grid-column:1 / -1; }
  .hero-visual{ height:400px; }
}
@media (max-width: 460px){
  .footer-top{ grid-template-columns:1fr; }
  .hero-cta .btn{ flex:1; }
}