/* ==========================================================================
   Portada publica de ERP-Pro.
   --------------------------------------------------------------------------
   Hoja unica y suelta: esta pagina NO carga el tema (Bootstrap + el bundle de
   Tailwind + jQuery + plugins son cerca de un megabyte para cuatro tarjetas),
   ni una tipografia de fuera, ni un solo recurso que no venga de este host.
   La tipografia es la del sistema y los iconos son SVG en linea.

   Prefijo `hp-` en todo, para que nada de aqui pueda alcanzar a ninguna otra
   pantalla si algun dia esta hoja se cargara en otro sitio.

   UNA DECISION QUE SE NOTA: el color de acento lo elige el cliente en los
   ajustes, asi que NINGUN TEXTO se apoya en el. El acento vive en la franja de
   la tarjeta, en el resplandor del fondo, en el borde al pasar y en el anillo
   de foco -sitios donde un color flojo se ve mal pero no deja nada ilegible-.
   Los textos usan la tinta, que si controlamos, y por eso el contraste AA se
   cumple con cualquier acento que se configure.

   Modo claro/oscuro: la paleta COMPLETA vive en `:root`; los bloques oscuros
   solo redefinen tokens. `data-theme` lo pone el servidor con el ajuste
   (`auto`, `light`, `dark`); en `auto` decide el sistema del visitante.
   ========================================================================== */

:root {
    --hp-accent: #2563eb;          /* lo pisa el <style> en linea de la vista */

    --hp-bg: #f5f7fa;
    --hp-surface: #ffffff;
    --hp-surface-soft: #f8fafc;
    --hp-border: #e2e7ef;
    --hp-border-strong: #c8d1de;

    --hp-ink: #101620;
    --hp-ink-soft: #3c4657;
    --hp-ink-muted: #5b6880;

    --hp-glow: .2;

    --hp-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 28px rgba(16, 24, 40, .07);
    --hp-shadow-lift: 0 2px 6px rgba(16, 24, 40, .07), 0 22px 48px rgba(16, 24, 40, .16);

    --hp-radius: 16px;
    --hp-radius-sm: 11px;

    --hp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
}

/* Oscuro por preferencia del sistema: solo cuando el ajuste esta en `auto`.
   Puesto en `light` no se aplica, que es justo el sentido de la opcion. */
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --hp-bg: #0b0e13;
        --hp-surface: #151a22;
        --hp-surface-soft: #1a212b;
        --hp-border: #262d38;
        --hp-border-strong: #3a4353;

        --hp-ink: #e9eef5;
        --hp-ink-soft: #c2cbd8;
        --hp-ink-muted: #8f9bac;

        --hp-glow: .26;

        --hp-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .45);
        --hp-shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 22px 48px rgba(0, 0, 0, .6);
    }
}

/* Oscuro elegido a mano: gana siempre, tambien en un sistema en claro. */
:root[data-theme="dark"] {
    --hp-bg: #0b0e13;
    --hp-surface: #151a22;
    --hp-surface-soft: #1a212b;
    --hp-border: #262d38;
    --hp-border-strong: #3a4353;

    --hp-ink: #e9eef5;
    --hp-ink-soft: #c2cbd8;
    --hp-ink-muted: #8f9bac;

    --hp-glow: .26;

    --hp-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .45);
    --hp-shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 22px 48px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------- cimientos */

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

html { -webkit-text-size-adjust: 100%; }

body.hp {
    margin: 0;
    min-height: 100vh;
    background: var(--hp-bg);
    color: var(--hp-ink);
    font-family: var(--hp-font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* Sin desplazamiento horizontal ni con el resplandor sobresaliendo. */
    overflow-x: hidden;
}

body.hp img { max-width: 100%; height: auto; }

/* Resplandor del fondo: dos manchas del color de acento, muy tenues. Un
   degradado radial con `opacity` en la capa evita tener que componer un rgba()
   a partir de un hexadecimal que llega de la configuracion. */
.hp-glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--hp-glow);
    background:
        radial-gradient(46rem 30rem at 15% -8%, var(--hp-accent), transparent 62%),
        radial-gradient(38rem 26rem at 92% 6%, var(--hp-accent), transparent 58%);
}

.hp-shell {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(2.25rem, 6vw, 4.75rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 5vw, 3.5rem);
    display: flex;
    flex-direction: column;
    /* Centrado vertical: en una pantalla grande la portada es un bloque
       compuesto y no un encabezado con medio metro de vacio debajo. En una
       pantalla corta el min-height deja de mandar y la pagina se desplaza. */
    justify-content: center;
    min-height: 100vh;
}

/* --------------------------------------------------------------------- hero */

.hp-hero {
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.hp-brand {
    margin: 0 0 1.5rem;
}

.hp-brand img {
    max-height: 72px;
    max-width: 280px;
    width: auto;
    vertical-align: middle;
}

/* Dos logotipos subidos: cada uno en su modo, conmutados por CSS. El de fondo
   oscuro esta oculto de partida porque la paleta de partida es la clara. Y el
   `:not(.hp-brand--plate)` no es adorno: en modo plaquita hay UNA sola imagen
   -la de fondo claro- y sin esa exclusion el modo oscuro la escondia y el
   logotipo desaparecia del todo. */
.hp-brand__d { display: none; }

:root[data-theme="dark"] .hp-brand:not(.hp-brand--plate) .hp-brand__l { display: none; }
:root[data-theme="dark"] .hp-brand__d { display: inline; }

/* Un solo logotipo: en oscuro se le pone plaquita clara detras. Sin ella, un
   logotipo de tinta oscura sobre transparencia -que es como llega casi
   siempre- desaparece entero y no queda ni el hueco. */
:root[data-theme="dark"] .hp-brand--plate img {
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 16px;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .hp-brand:not(.hp-brand--plate) .hp-brand__l { display: none; }
    :root[data-theme="auto"] .hp-brand__d { display: inline; }

    :root[data-theme="auto"] .hp-brand--plate img {
        background: #ffffff;
        border-radius: 12px;
        padding: 10px 16px;
    }
}

.hp-title {
    margin: 0;
    font-size: clamp(1.85rem, 5.2vw, 3rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.022em;
    color: var(--hp-ink);
}

.hp-tagline {
    margin: .85rem auto 0;
    max-width: 34em;
    font-size: clamp(1.02rem, 2.2vw, 1.2rem);
    line-height: 1.5;
    color: var(--hp-ink-soft);
}

.hp-welcome {
    margin: 1rem auto 0;
    max-width: 40em;
    font-size: .95rem;
    color: var(--hp-ink-muted);
}

/* ------------------------------------------------------------------ puertas */

.hp-main { flex: 0 0 auto; }

.hp-eyebrow {
    margin: 0 0 1.15rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hp-ink-muted);
}

.hp-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(.9rem, 2vw, 1.25rem);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.hp-cell { display: flex; }

.hp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.6rem 1.4rem 1.25rem;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* La franja identifica la tarjeta antes de leerla. Los dos colores los declara
   el catalogo, asi que una puerta que llegue con un modulo trae la suya. */
.hp-card__band {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--hp-c1), var(--hp-c2));
    /* El `overflow:hidden` de la tarjeta ya la recorta; el radio propio evita
       que en algunos navegadores asome un pixel cuadrado en las esquinas. */
    border-radius: var(--hp-radius) var(--hp-radius) 0 0;
}

.hp-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: var(--hp-radius-sm);
    background: var(--hp-surface-soft);
    border: 1px solid var(--hp-border);
    color: var(--hp-c1);
    position: relative;
    isolation: isolate;
}

/* Tiñe la placa del icono con el color de la propia tarjeta. Va con una capa
   y `opacity` y no con un rgba(): el color llega como hexadecimal desde el
   catalogo y no se puede componer un canal alfa a partir de el en CSS. */
.hp-card__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(150deg, var(--hp-c1), var(--hp-c2));
    opacity: .12;
}

:root[data-theme="dark"] .hp-card__icon { color: var(--hp-c2); }

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .hp-card__icon { color: var(--hp-c2); }
}

.hp-card__t {
    margin: 0 0 .4rem;
    font-size: 1.13rem;
    font-weight: 650;
    letter-spacing: -.011em;
    color: var(--hp-ink);
}

.hp-card__d {
    margin: 0 0 1.25rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--hp-ink-muted);
}

.hp-card__cta {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--hp-border);
    font-size: .845rem;
    font-weight: 650;
    color: var(--hp-ink);
}

.hp-card__cta-t {
    /* Un nombre largo en «Continuar como ...» no puede romper la tarjeta. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-card__arrow {
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: var(--hp-ink-muted);
    transition: transform .18s ease, color .18s ease;
}

.hp-card:hover,
.hp-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--hp-shadow-lift);
    border-color: var(--hp-border-strong);
}

.hp-card:hover .hp-card__arrow,
.hp-card:focus-visible .hp-card__arrow {
    transform: translateX(3px);
    color: var(--hp-ink);
}

/* Foco visible por teclado, con el acento: aqui es un anillo, no texto. */
.hp-card:focus-visible {
    outline: 2px solid var(--hp-accent);
    outline-offset: 3px;
}

/* -------------------------------------------------------------- sin puertas */

.hp-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--hp-border-strong);
    border-radius: var(--hp-radius);
    background: var(--hp-surface);
}

.hp-empty__t { margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--hp-ink); }
.hp-empty__d { margin: .4rem 0 1.25rem; font-size: .875rem; color: var(--hp-ink-muted); }

.hp-empty__a {
    display: inline-block;
    padding: .6rem 1.15rem;
    border: 1px solid var(--hp-border-strong);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 650;
    color: var(--hp-ink);
    text-decoration: none;
}

.hp-empty__a:hover { background: var(--hp-surface-soft); }
.hp-empty__a:focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------- pie */

.hp-foot {
    margin-top: clamp(2.25rem, 5vw, 3.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--hp-border);
    text-align: center;
    font-size: .82rem;
    color: var(--hp-ink-muted);
}

.hp-foot p { margin: 0 0 .35rem; }
.hp-foot__sep { padding: 0 .5rem; }

.hp-foot a {
    color: var(--hp-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--hp-border-strong);
}

.hp-foot a:hover { color: var(--hp-ink); }
.hp-foot a:focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 2px; }

/* ------------------------------------------------------------- movimiento */

/* La entrada es un detalle, no informacion: quien pide menos movimiento ve la
   pagina quieta y completa, no una version degradada. */
@media (prefers-reduced-motion: no-preference) {
    .hp-hero,
    .hp-cell,
    .hp-foot {
        animation: hp-in .5s cubic-bezier(.22, .8, .3, 1) both;
    }

    .hp-cell { animation-delay: calc(80ms + var(--hp-i, 0) * 60ms); }
    .hp-foot { animation-delay: 360ms; }

    @keyframes hp-in {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-card { transition: none; }
    .hp-card:hover, .hp-card:focus-visible { transform: none; }
    .hp-card__arrow { transition: none; }
}

/* ------------------------------------------------------------------- movil */

@media (max-width: 30rem) {
    .hp-shell { min-height: auto; }
    .hp-card { padding: 1.35rem 1.15rem 1.1rem; }
}

/* --------------------------------------------------- enlaces destacados (1.78) */

/* «Conoce la plataforma»: enlaces a presentaciones o páginas de producto,
   encima de los accesos. Mismos tokens que las tarjetas, así que siguen el
   modo claro/oscuro sin reglas propias; el acento sólo va en el borde y en el
   icono, nunca en el texto (ver el ajuste del color de acento). */
.hp-links {
    margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}

.hp-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.hp-link {
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 100%;
    padding: .95rem 1.1rem;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-left: 4px solid var(--hp-accent);
    border-radius: var(--hp-radius-sm);
    box-shadow: var(--hp-shadow);
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hp-link:hover,
.hp-link:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--hp-shadow-lift);
    border-color: var(--hp-border-strong);
    border-left-color: var(--hp-accent);
}

.hp-link:focus-visible {
    outline: 3px solid var(--hp-accent);
    outline-offset: 3px;
}

.hp-link__body { flex: 1; min-width: 0; }

.hp-link__t {
    display: block;
    font-weight: 650;
    font-size: .98rem;
    color: var(--hp-ink);
}

.hp-link__d {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--hp-ink-muted);
}

.hp-link__icon {
    flex: 0 0 auto;
    color: var(--hp-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .hp-links { animation: hp-in .5s cubic-bezier(.22, .8, .3, 1) both; animation-delay: 60ms; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-link { transition: none; }
    .hp-link:hover, .hp-link:focus-visible { transform: none; }
}

/* Banner destacado: el primer enlace, a lo ancho. El acento sólo tiñe el fondo
   (mezclado con la superficie, así vale en claro y en oscuro), el borde y el
   botón; el texto va siempre en la tinta del tema. Sin color-mix() el banner
   queda con la superficie normal, que también se lee. */
.hp-feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0 0 .9rem;
    padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 3vw, 2.1rem);
    background: var(--hp-surface);
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--hp-accent) 14%, var(--hp-surface)) 0%,
        var(--hp-surface) 70%);
    border: 1px solid color-mix(in srgb, var(--hp-accent) 35%, var(--hp-border));
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.hp-feature:hover,
.hp-feature:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--hp-shadow-lift);
}

.hp-feature:focus-visible {
    outline: 3px solid var(--hp-accent);
    outline-offset: 3px;
}

.hp-feature__body { flex: 1; min-width: 0; }

.hp-feature__t {
    display: block;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
    color: var(--hp-ink);
}

.hp-feature__d {
    display: block;
    margin-top: .45rem;
    max-width: 38em;
    font-size: .98rem;
    line-height: 1.5;
    color: var(--hp-ink-soft);
}

.hp-feature__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.1rem;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    background: var(--hp-ink);
    color: var(--hp-bg);
    font-size: .92rem;
    font-weight: 650;
}

.hp-feature:hover .hp-feature__cta svg { transform: translateX(3px); }
.hp-feature__cta svg { transition: transform .18s ease; }

.hp-feature__art { flex: 0 0 auto; max-width: 34%; height: auto; }
.hp-art__screen { fill: var(--hp-surface); stroke: var(--hp-border-strong); stroke-width: 1.5; }
.hp-art__bar { fill: var(--hp-surface-soft); }
.hp-art__dot { fill: var(--hp-border-strong); }
.hp-art__line { fill: var(--hp-ink-muted); opacity: .55; }
.hp-art__line--soft { opacity: .3; }
.hp-art__col { fill: var(--hp-accent); opacity: .35; }
.hp-art__col--hi { opacity: .9; }

@media (max-width: 40rem) {
    .hp-feature__art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-feature, .hp-feature__cta svg { transition: none; }
    .hp-feature:hover, .hp-feature:focus-visible { transform: none; }
}