/* ==========================================================================
   ECU Soluciones — página pública
   --------------------------------------------------------------------------
   CSS a mano, sin build. Comparte paleta y tipografía con el panel para que
   ambos se lean como el mismo producto.
   ========================================================================== */

:root {
    --ink: #0b0e13;
    --panel: #12171f;
    --raised: #1a212b;
    --line: #232d3b;
    --line-soft: #1b232e;
    --text: #e4e9f0;
    --muted: #8a97a8;
    --dim: #5a6a7e;
    --signal: #f5a524;
    --signal-soft: rgba(245, 165, 36, 0.12);
    --ok: #35b37e;

    --sans:
        'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system,
        'Helvetica Neue', Arial, sans-serif;
    --mono:
        'Cascadia Code', 'Cascadia Mono', ui-monospace, 'SF Mono', 'JetBrains Mono',
        Consolas, 'Liberation Mono', monospace;

    --track: 0.14em;
    --shell: 68rem;
    --radius: 10px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

:where(a, button):focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 4px;
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* Enlace de salto: invisible hasta que se tabula, para que quien navega con
   teclado no tenga que recorrer la cabecera en cada carga. */
.skip {
    position: absolute;
    left: 0.75rem;
    top: -4rem;
    z-index: 40;
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    background: var(--signal);
    color: #22160a;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip:focus {
    top: 0.75rem;
}

/* Etiqueta en mono versalita: el tic del instrumento. Se usa para rotular
   secciones, igual que un equipo de medición rotula sus canales. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--dim);
}

.eyebrow::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    background: currentColor;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.masthead {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line-soft);
    /* Opaco de base: el desenfoque es una mejora, no la que sostiene la
       legibilidad. Sin él, el título del hero se transparentaba por debajo. */
    background: color-mix(in srgb, var(--ink) 97%, transparent);
    backdrop-filter: blur(12px);
}

.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--text);
}

.brand__mark {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
}

.brand__name {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.masthead__nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.masthead__link {
    font-size: 0.875rem;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.masthead__link:hover {
    color: var(--text);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.btn--signal {
    background: var(--signal);
    color: #22160a;
}

.btn--signal:hover {
    background: #ffb63c;
}

.btn--ghost {
    border-color: var(--line);
    color: var(--text);
}

.btn--ghost:hover {
    border-color: var(--dim);
    background: var(--panel);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    padding-block: 5.5rem 4rem;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: -20rem 0 auto;
    height: 40rem;
    background: radial-gradient(
        44rem 22rem at 50% 50%,
        rgba(245, 165, 36, 0.09),
        transparent 68%
    );
    pointer-events: none;
}

/* Dos columnas a partir de tablet: el texto sostiene la tesis y la consola la
   demuestra. Por debajo se apilan, con la consola después del texto. */
.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 60rem) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 4rem;
    }
}

.hero__copy {
    min-width: 0;
}

.hero__title {
    margin: 0 0 1.25rem;
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.hero__title em {
    font-style: normal;
    color: var(--signal);
}

.hero__lead {
    margin: 0 0 2rem;
    max-width: 38rem;
    font-size: 1.0625rem;
    color: var(--muted);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   Consola de sesión — el elemento firma
   --------------------------------------------------------------------------
   Reproduce la sesión remota tal como la ve el técnico: el enlace de los tres
   extremos, el progreso en vivo y el registro de eventos. Los mensajes son los
   que emite el servidor; no aparece nada del método de cálculo.
   -------------------------------------------------------------------------- */

.console {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    overflow: hidden;
    box-shadow:
        0 1px 0 0 rgba(228, 233, 240, 0.04) inset,
        0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

.console__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8125rem 1.125rem;
    border-bottom: 1px solid var(--line-soft);
    background: var(--ink);
}

.console__id {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--dim);
}

.console__state {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ok);
}

.console__pulse {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(53, 179, 126, 0.5);
    animation: console-pulse 2.4s ease-out infinite;
}

@keyframes console-pulse {
    0% { box-shadow: 0 0 0 0 rgba(53, 179, 126, 0.45); }
    70% { box-shadow: 0 0 0 0.5rem rgba(53, 179, 126, 0); }
    100% { box-shadow: 0 0 0 0 rgba(53, 179, 126, 0); }
}

/* Los tres extremos del enlace: técnico, servidor y vehículo. */

.console__link {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 1.375rem 1.125rem;
    border-bottom: 1px solid var(--line-soft);
}

.console__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    min-width: 0;
}

.console__node-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--dim);
    margin-bottom: 0.125rem;
}

.console__node-dot.is-ok {
    background: var(--ok);
}

.console__node-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.console__node-meta {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: var(--dim);
}

/* El cable lleva un tinte del color de estado: es lo que comunica que los tres
   extremos están enlazados de verdad. Con el gris de borde quedaba invisible y
   los nodos se leían como tres tarjetas sueltas. */
.console__wire {
    width: 100%;
    min-width: 1rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(53, 179, 126, 0.45) 25%,
        rgba(53, 179, 126, 0.45) 75%,
        transparent
    );
}

/* Progreso de la orden en curso. */

.console__progress {
    padding: 1.125rem;
    border-bottom: 1px solid var(--line-soft);
}

.console__progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.625rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.console__pct {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--signal);
}

.console__track {
    height: 0.375rem;
    border-radius: 999px;
    background: var(--raised);
    overflow: hidden;
}

/* Estado en reposo = estado final. La animación solo existe si el JS llega a
   armarla (.is-armed), así que un fallo de script deja la consola completa en
   vez de una caja vacía sobre el pliegue. */
.console__fill {
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d4860d, var(--signal));
    transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.console.is-armed .console__fill {
    width: 0;
}

.console.is-armed.is-playing .console__fill {
    width: 68%;
}

/* Registro de eventos. */

.console__log {
    margin: 0;
    padding: 0.625rem 0;
    list-style: none;
}

.console__line {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 0.625rem;
    padding: 0.4375rem 1.125rem;
    font-size: 0.8125rem;
    color: var(--muted);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.console.is-armed .console__line {
    opacity: 0;
    transform: translateY(0.375rem);
}

.console.is-armed .console__line.is-in {
    opacity: 1;
    transform: none;
}

.console__line time {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--dim);
}

.console__actor {
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dim);
    min-width: 3.75rem;
}

.console__actor.is-host {
    color: var(--signal);
}

.console__actor.is-guest {
    color: #7aa2c8;
}

.console__actor.is-ok {
    color: var(--ok);
}

/* --------------------------------------------------------------------------
   Garantías: tres afirmaciones que el backend cumple siempre.
   -------------------------------------------------------------------------- */

.promises {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--line-soft);
    border-block: 1px solid var(--line-soft);
}

@media (min-width: 52rem) {
    .promises {
        grid-template-columns: repeat(3, 1fr);
    }
}

.promise {
    padding: 1.75rem 1.5rem;
    background: var(--ink);
}

.promise__title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--text);
}

.promise__desc {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */

.section {
    padding-block: 4.5rem;
    border-top: 1px solid var(--line-soft);
}

/* La franja de garantías trae sus propios bordes: no necesita ni el borde
   superior de sección ni el mismo aire vertical. */
.section--tight {
    padding-block: 0;
    border-top: 0;
}

.section--tight .shell {
    padding-inline: 0;
}

.section--tight .promise {
    padding-inline: 1.5rem;
}

.section__head {
    max-width: 40rem;
    margin-bottom: 2.5rem;
}

.section__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.section__lead {
    margin: 0;
    color: var(--muted);
}

/* Productos */

.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 46rem) {
    .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

.product {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
}

.product__slug {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--dim);
}

.product__name {
    margin: 0.5rem 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.product__desc {
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 0.9375rem;
}

.product__list {
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.product__list li {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
}

.product__list li::before {
    content: '';
    margin-top: 0.5rem;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 1px;
    background: var(--signal);
    flex: none;
}

/* Capacidades */

/* Columnas explícitas, no auto-fit: son seis tarjetas y la rejilla debe
   dividirlas en filas completas (1, 2 o 3 por fila). Con auto-fit salían cuatro
   columnas y la última fila dejaba dos huecos abiertos al fondo del contenedor. */
.caps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    overflow: hidden;
}

@media (min-width: 40rem) {
    .caps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .caps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cap {
    padding: 1.5rem;
    background: var(--ink);
}

.cap__code {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--signal);
    letter-spacing: 0.02em;
}

.cap__name {
    margin: 0.625rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.cap__desc {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted);
}

/* Sesión remota: aquí la numeración sí codifica algo real, es una secuencia
   que ocurre en ese orden y el técnico la sigue paso a paso. */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.5rem;
    counter-reset: step;
}

.step {
    position: relative;
    padding-top: 2.75rem;
    border-top: 1px solid var(--line);
}

.step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: 1rem;
    left: 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--signal);
    letter-spacing: 0.06em;
}

.step__name {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.step__desc {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

/* Acceso */

.access {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background:
        radial-gradient(32rem 16rem at 12% 0%, rgba(245, 165, 36, 0.08), transparent 70%),
        var(--panel);
}

.access__title {
    margin: 0 0 0.375rem;
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.access__desc {
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.foot {
    padding-block: 2rem 3rem;
    border-top: 1px solid var(--line-soft);
    color: var(--dim);
    font-size: 0.8125rem;
}

.foot__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.foot__note {
    margin: 0;
    max-width: 42rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 46rem) {
    .masthead__nav {
        gap: 1rem;
    }

    .masthead__link {
        display: none;
    }

    .hero {
        padding-block: 3.5rem 3rem;
    }

    /* El enlace de tres extremos no cabe en una fila estrecha: se apila y los
       cables pasan a ser separadores horizontales. */
    .console__link {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .console__wire {
        justify-self: center;
        width: 3rem;
    }

    .console__line {
        grid-template-columns: auto 1fr;
        row-gap: 0.125rem;
    }

    .console__line span:last-child {
        grid-column: 1 / -1;
    }

    .section {
        padding-block: 3.5rem;
    }
}

/* --------------------------------------------------------------------------
   Movimiento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}