/* Página de inicio. */

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden; background: var(--ink-950); color: var(--text-on-dark);
    padding-top: calc(var(--header-h) + var(--s-7));
}
.hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(46rem 34rem at 78% 42%, rgb(31 90 150 / 0.42), transparent 70%);
}
.hero__inner { position: relative; display: grid; gap: var(--s-6); align-items: center; padding-bottom: var(--s-7); }
.hero h1 { color: #fff; max-width: 20ch; margin-bottom: var(--s-5); font-size: clamp(2.25rem, 1.3rem + 3.1vw, 3.75rem); }
.hero__lead { margin-bottom: var(--s-6); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.constellation { position: relative; margin: 0; min-height: 21rem; }
.constellation__canvas { display: block; width: 100%; height: 100%; min-height: 21rem; }
.constellation__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.constellation__list a {
    display: inline-block; padding: 0.35rem 0.8rem; font-size: var(--fs-sm); text-decoration: none; color: var(--text-on-dark);
    border: 1px solid rgb(255 255 255 / 0.22); border-radius: 8px;
}
.constellation__list a:hover { border-color: var(--accent-strong); }
/* Con JS el lienzo toma el protagonismo y la lista queda solo para teclado y lectores */
.constellation.is-canvas .constellation__list {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.constellation.is-canvas { cursor: default; }

@media (min-width: 62rem) {
    .hero__inner { grid-template-columns: 1.05fr 1fr; gap: var(--s-6); min-height: min(46rem, calc(100svh - var(--header-h) - 5rem)); padding-bottom: var(--s-8); }
    .constellation, .constellation__canvas { min-height: 32rem; }
}

/* Cifras reales */
.stats { position: relative; border-top: 1px solid rgb(255 255 255 / 0.1); background: var(--ink-900); }
.stats__list { list-style: none; display: grid; gap: 0; padding-block: var(--s-5); }
.stats__item { display: flex; align-items: baseline; gap: var(--s-3); padding-block: var(--s-3); }
.stats__item + .stats__item { border-top: 1px solid rgb(255 255 255 / 0.1); }
.stats__num { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); font-weight: 620; letter-spacing: var(--tracking-display); color: #fff; font-variant-numeric: tabular-nums; line-height: 1; min-width: 2.2ch; }
.stats__label { color: var(--text-soft-on-dark); font-size: var(--fs-sm); max-width: 16ch; line-height: 1.35; }
@media (min-width: 40rem) {
    .stats__list { grid-template-columns: repeat(3, 1fr); }
    .stats__item { padding-block: var(--s-2); padding-inline: var(--s-5); }
    .stats__item:first-child { padding-left: 0; }
    .stats__item + .stats__item { border-top: 0; border-left: 1px solid rgb(255 255 255 / 0.1); }
}

/* ---------- Problema ---------- */
.problema { display: grid; gap: var(--s-7); align-items: start; }
.symptoms { list-style: none; }
.symptoms li {
    padding-block: var(--s-4); border-bottom: 1px solid var(--line); font-size: var(--fs-h4); font-weight: 560;
    letter-spacing: var(--tracking-heading);
}
.symptoms li:first-child { border-top: 1px solid var(--line); }
@media (min-width: 62rem) { .problema { grid-template-columns: 1.15fr 1fr; gap: var(--s-9); } }

/* ---------- Bento de soluciones ---------- */
.bento--soluciones .card { min-height: 15rem; }
.bento--soluciones .card--dark { min-height: 17rem; }
@media (min-width: 40rem) { .bento--soluciones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) {
    .bento--soluciones { grid-template-columns: repeat(6, 1fr); }
    .bento--soluciones .card:nth-child(1), .bento--soluciones .card:nth-child(4) { grid-column: span 4; }
    .bento--soluciones .card:nth-child(2), .bento--soluciones .card:nth-child(3) { grid-column: span 2; }
    .bento--soluciones .card:nth-child(1) h3, .bento--soluciones .card:nth-child(4) h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); max-width: 18ch; }
}

/* ---------- Conexión de sistemas ---------- */
.conecta { display: grid; gap: var(--s-7); align-items: start; }
.conecta__list { list-style: none; display: grid; gap: 0; counter-reset: pieza; }
.conecta__list li {
    counter-increment: pieza; display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--s-3); padding-block: var(--s-5);
    border-top: 1px solid rgb(255 255 255 / 0.14); font-size: var(--fs-h4); font-weight: 520; letter-spacing: var(--tracking-heading); line-height: 1.35;
}
.conecta__list li::before { content: counter(pieza, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; color: var(--accent-strong); padding-top: 0.35rem; }
.conecta__list li:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.14); }
@media (min-width: 62rem) { .conecta { grid-template-columns: 1fr 1.1fr; gap: var(--s-9); } }

/* ---------- Por qué Fabsys ---------- */
.porque { display: grid; gap: var(--s-7); align-items: start; }
.porque__list { list-style: none; display: grid; gap: 0 var(--s-6); }
.porque__list li { display: flex; gap: var(--s-3); padding-block: var(--s-4); border-top: 1px solid var(--line); }
.porque__list .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.22rem; color: var(--ok); flex: none; }
@media (min-width: 40rem) { .porque__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .porque { grid-template-columns: 1fr 1.25fr; gap: var(--s-9); } .porque__intro { position: sticky; top: calc(var(--header-h) + var(--s-6)); } }

/* ---------- Proceso ---------- */
.proceso { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 62rem) { .proceso { grid-template-columns: 1fr 1.15fr; gap: var(--s-9); } .proceso__intro { position: sticky; top: calc(var(--header-h) + var(--s-6)); } }

/* ---------- Casos (lista editorial) ---------- */
.case-list { list-style: none; display: grid; gap: var(--s-3); }
.case-list__item {
    position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-5); align-items: center;
    padding: var(--s-5) var(--s-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.case-list__title { margin: 0; font-size: var(--fs-h3); }
.case-list__title a { color: var(--text); text-decoration: none; }
.case-list__title a::after { content: ""; position: absolute; inset: 0; }
.case-list__text { grid-column: 1; margin: 0; color: var(--text-soft); max-width: 62ch; }
.case-list__go { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.case-list__go .icon { width: 1.1rem; height: 1.1rem; }
.case-list__item:hover .case-list__go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }