/* ==========================================================
   KLYP — /plataforma
   Reutiliza styles.css (menú, footer, vidrio, panel .of-*);
   aquí solo va lo propio de esta página.
   ========================================================== */

/* Variables del panel (en la principal viven en .oficina) */
.pl-hero__stage {
  --of-bg: #121417; --of-card: #1C1F23; --of-name: #F2F0EC; --of-data: #C4C4C4; --of-min: #A8A8A8;
  --c-nuevo: #5B8DEF; --c-calificado: #E8A33D; --c-visita: #3FB68B; --c-separacion: #9B7BF7; --c-venta: #F23A3F;
}

/* ---------- Hero ---------- */
.pl-hero { position: relative; overflow: hidden; padding: 150px var(--gutter) clamp(90px, 14vh, 160px); background: var(--bg); }
.pl-hero__lines {
  position: absolute; left: 50%; top: 64%; width: min(1100px, 120vw); aspect-ratio: 1;
  translate: -50% -50%; pointer-events: none; z-index: 0;
}
.pl-hero__text { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; text-align: center; }
.pl-hero__text .eyebrow { justify-content: center; }
.pl-hero__title {
  margin: 20px 0 22px; font-weight: 500; letter-spacing: -.045em; line-height: 1;
  font-size: clamp(40px, 6.2vw, 100px);
}
.pl-hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.pl-hero__title .line > span { display: inline-block; }
.pl-hero__sub { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 20px); max-width: 640px; margin: 0 auto; }

.pl-hero__stage { position: relative; z-index: 1; max-width: 1180px; margin: clamp(56px, 9vh, 96px) auto 0; perspective: 2000px; }
.pl-hero__stage .of-app { transform: rotateX(3deg); transform-origin: 50% 0; }

@media (max-width: 767px) {
  .pl-hero { padding-top: 120px; }
  .pl-hero__title .line { display: inline; }
}

/* ---------- Lo que viene ---------- */
.soon { padding: clamp(100px, 16vh, 180px) 0; background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.soon__sub { color: var(--ink-2); font-size: clamp(16px, 1.3vw, 19px); max-width: 560px; margin-top: 18px; }
.soon__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.soon__card { padding: 24px; min-height: 210px; display: flex; flex-direction: column; }
.soon__n { color: var(--ink-2); font-size: 13px; letter-spacing: .12em; }
.soon__card h3 { font-size: 21px; font-weight: 500; letter-spacing: -.02em; margin: auto 0 8px; }
.soon__card p { color: var(--ink-glass); font-size: 15px; line-height: 1.45; }
@media (max-width: 1024px) { .soon__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .soon__grid { grid-template-columns: 1fr; }
  .soon__card { min-height: 0; }
  .soon__card h3 { margin-top: 22px; }
}
@media (max-width: 767px) { .mq + .soon { padding-top: 24px; } }