/* ============ GearSoftware-UI v2 (ERP-ready) ============ */
/* Filosofía:
   - Tokens (variables) para colores, tipografía, radii y sombras.
   - Tres capas: base, componentes y utilidades.
   - Modo claro/oscuro con [data-theme] + fallback a prefers-color-scheme.
   - Accesibilidad: contrastes AA, focus visible, motion-safe.
   - ERP: tablas compactas, inputs limpios, cards y barras listas para WebForms. */

/* ---------- 1) TOKENS ---------- */
:root {
    /* Color palette (Light) */
    --gs-bg: #f7f8fa;
    --gs-surface: rgb(255 255 255 / 0.75);
    --gs-surface-2: #f1f3f6;
    --gs-surface-3: #3b3e43;
    --gs-text: #111827; /* gray-900 */
    --gs-text-2: #f1f3f6; /* white-200 */
    --gs-text-muted: #6b7280; /* gray-500 */

    --gs-primary: #60a5fa; /* blue-600 */
    --gs-primary-600: #1d4ed8;
    --gs-primary-700: #1e40af;
    --gs-success: #16a34a; /* green-600 */
    --gs-warning: #ca8a04; /* yellow-600 */
    --gs-danger: #dc2626; /* red-600 */
    --gs-info: #0891b2; /* cyan-700 */

    --gs-border: #e5e7eb; /* gray-200 */
    --gs-border-strong: #cbd5e1; /* gray-300 */
    /* Effects */
    --gs-radius-xs: .25rem;
    --gs-radius: .5rem;
    --gs-radius-lg: .75rem;
    --gs-radius-xl: 1rem;
    --gs-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --gs-shadow: 0 2px 8px rgba(0,0,0,.08);
    --gs-shadow-lg: 0 8px 24px rgba(0,0,0,.12);
    /* Typography & spacing */
    --gs-font-sans: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", system-ui, sans-serif;
    --gs-font-alt: "Raleway", "Advent Pro", var(--gs-font-sans);
    --gs-font-size: 15px;
    --gs-leading: 1.6;
    --gs-space-1: .25rem;
    --gs-space-2: .5rem;
    --gs-space-3: .75rem;
    --gs-space-4: 1rem;
    --gs-space-6: 1.5rem;
    --gs-space-8: 2rem;
    /* helpers */
    scroll-behavior: smooth;
}

    /* Dark theme overrides */
    :root[data-theme="dark"] {
        --gs-bg: #0b1017; /* near slate-950 */
        --gs-surface: rgb(15 23 42 / 0.75); /* slate-900 */
        --gs-surface-2: #111827; /* gray-900 */
        --gs-surface-3: #111827;
        --gs-text: #e5e7eb; /* gray-200 */
        --gs-text-2: #e5e7eb; /* white-200 */
        --gs-text-muted: #9ca3af; /* gray-400 */

        --gs-primary: #60a5fa; /* blue-400 for better contrast on dark */
        --gs-primary-600: #3b82f6;
        --gs-primary-700: #2563eb;
        --gs-success: #22c55e;
        --gs-warning: #eab308;
        --gs-danger: #f87171;
        --gs-info: #22d3ee;
        --gs-border: #1f2937; /* gray-800 */
        --gs-border-strong: #374151; /* gray-700 */

        --gs-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
        --gs-shadow: 0 6px 16px rgba(0,0,0,.45);
        --gs-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
    }

/* Auto-respect system preference if no data-theme set */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
    }
}

/* ---------- 2) BASE ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--gs-font-size);
    background: var(--gs-bg);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100dvh;
    color: var(--gs-text);
    font: 400 1rem/var(--gs-leading) var(--gs-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--gs-primary);
    outline-offset: 2px;
    border-radius: var(--gs-radius-xs);
}

/* Motion safe */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--gs-space-3);
    font-family: var(--gs-font-alt);
    font-weight: 600;
    letter-spacing: .2px;
}

h1 {
    font-size: 2rem
}

h2 {
    font-size: 1.5rem
}

h3 {
    font-size: 1.25rem
}

h4 {
    font-size: 1.125rem
}

.gs-text-balance {
    display: block;
    text-align: left;
    max-width: 40ch; /* limita el ancho para mejor legibilidad */
    margin: 0 auto; /* centra el bloque */
    line-height: 1.3; /* un poco más de aire entre líneas */
}

.gs-text-balance--center {
    display: block;
    text-align: center;
    max-width: 40ch; /* limita el ancho para mejor legibilidad */
    margin: 0 auto; /* centra el bloque */
    line-height: 1.3; /* un poco más de aire entre líneas */
}

.gs-text-balance--justify {
    display: block;
    text-align: justify;
    max-width: 40ch; /* limita el ancho para mejor legibilidad */
    margin: 0 auto; /* centra el bloque */
    line-height: 1.3; /* un poco más de aire entre líneas */
}

/* Containers */
.gs-container {
    width: min(1240px, 100% - 2rem);
    margin-inline: auto;
}

.gs-section {
    padding-block: clamp(2rem, 3vw, 4rem);
}

/* ---------- 3) COMPONENTES ---------- */
/* Cards */
.gs-card {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    box-shadow: var(--gs-shadow-sm);
}

.gs-card--padded {
    padding: var(--gs-space-6);
}

.gs-card header {
    margin-bottom: var(--gs-space-4);
}

/* Botones */
.gs-btn {
    --_bg: var(--gs-surface-2);
    --_fg: var(--gs-text);
    --_bd: var(--gs-border);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .9rem;
    border: 1px solid var(--_bd);
    border-radius: var(--gs-radius);
    background: var(--_bg);
    color: var(--_fg);
    line-height: 1;
    cursor: pointer;
    transition: transform .06s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    box-shadow: var(--gs-shadow-sm);
    user-select: none;
}

    .gs-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--gs-shadow);
    }

    .gs-btn:active {
        transform: translateY(0);
        box-shadow: var(--gs-shadow-sm);
    }

.gs-btn--primary {
    --_bg: var(--gs-primary);
    --_fg: #fff;
    --_bd: var(--gs-primary-600);
}

.gs-btn--success {
    --_bg: var(--gs-success);
    --_fg: #fff;
    --_bd: var(--gs-success);
}

.gs-btn--danger {
    --_bg: var(--gs-danger);
    --_fg: #fff;
    --_bd: var(--gs-danger);
}

.gs-btn--ghost {
    --_bg: transparent;
    --_bd: var(--gs-border);
}

.gs-btn--link {
    --_bg: transparent;
    --_bd: transparent;
    color: var(--gs-primary);
    box-shadow: none;
    padding: 0;
}

.gs-btn--sm {
    padding: .45rem .65rem;
    border-radius: var(--gs-radius-xs);
    font-size: .9rem;
}

.gs-btn--lg {
    padding: .8rem 1.1rem;
    border-radius: var(--gs-radius-lg);
}

/* Badges */
.gs-badge {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .3px;
    background: var(--gs-surface-2);
    color: var(--gs-text);
    border: 1px solid var(--gs-border);
}

.gs-badge--primary {
    background: color-mix(in srgb, var(--gs-primary) 16%, transparent);
    color: var(--gs-primary-700);
    border-color: color-mix(in srgb, var(--gs-primary) 30%, var(--gs-border));
}

.gs-pointer {
    cursor: pointer;
}

    .gs-pointer:hover {
        cursor: pointer;
    }

/* Inputs (WebForms friendly) */
.gs-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.gs-label {
    font-size: .875rem;
    color: var(--gs-text-muted);
}

.gs-input, .gs-select, .gs-textarea {
    width: 100%;
    padding: .6rem .7rem;
    border-radius: var(--gs-radius);
    border: 1px solid var(--gs-border);
    background: var(--gs-surface);
    color: var(--gs-text);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .gs-input:focus, .gs-select:focus, .gs-textarea:focus {
        border-color: var(--gs-primary);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--gs-primary) 20%, transparent);
    }

    .gs-input[disabled], .gs-select[disabled], .gs-textarea[disabled] {
        opacity: .6;
        cursor: not-allowed;
    }

/* NavBar */
.gs-navbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--gs-surface);
    border-bottom: 1px solid var(--gs-border);
    backdrop-filter: saturate(180%) blur(8px);
}

    .gs-navbar .gs-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-block: .6rem;
    }

/* Sidebar (colapsable si quieres con JS) */
.gs-sidebar {
    background: var(--gs-surface);
    border-right: 1px solid var(--gs-border);
    width: 260px;
    min-height: 100dvh;
    position: sticky;
    top: 0;
}

.gs-sidebar__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .9rem;
    color: var(--gs-text-muted);
    border-left: 3px solid transparent;
}

    .gs-sidebar__item:hover {
        background: var(--gs-surface-2);
        color: var(--gs-text);
    }

.gs-sidebar__item--active {
    color: var(--gs-text);
    border-left-color: var(--gs-primary);
    background: color-mix(in srgb, var(--gs-primary) 10%, transparent);
}

/* Tablas ERP compactas */
.gs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    overflow: hidden;
    box-shadow: var(--gs-shadow-sm);
}

    .gs-table thead th {
        background: var(--gs-surface-3);
        color: var(--gs-text-2);
        text-align: left;
        font-size: .9rem;
        font-weight: 600;
        letter-spacing: .2px;
        padding: .6rem .75rem;
        border-bottom: 1px solid var(--gs-border-strong);
    }

    .gs-table tbody td {
        padding: .55rem .75rem;
        border-bottom: 1px solid var(--gs-border);
        vertical-align: top;
        font-size: .92rem;
    }

    .gs-table tbody tr:hover {
        background: color-mix(in srgb, var(--gs-primary) 6%, transparent);
    }

    .gs-table tfoot td {
        background: var(--gs-surface-2);
        font-weight: 600;
        border-top: 1px solid var(--gs-border-strong);
    }

/* Paginación/toolbar de GridView */
.gs-tablebar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    padding: .6rem;
    border: 1px solid var(--gs-border);
    border-top: none;
    background: var(--gs-surface);
}

/* Modales */
.gs-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
}

.gs-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    display: none;
}

.gs-modal__panel {
    width: min(700px, 92vw);
    background: var(--gs-surface);
    color: var(--gs-text);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-lg);
    overflow: hidden;
}

.gs-modal__header {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--gs-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gs-modal__body {
    padding: 1rem 1.1rem;
}

.gs-modal__footer {
    padding: 1rem 1.1rem;
    border-top: 1px solid var(--gs-border);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* Toasts (posicionamiento básico) */
.gs-toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    gap: .6rem;
    z-index: 60;
}

.gs-toast {
    background: var(--gs-surface);
    color: var(--gs-text);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    box-shadow: var(--gs-shadow);
    padding: .7rem .9rem;
    min-width: 260px;
}

.gs-toast--ok {
    border-color: color-mix(in srgb, var(--gs-success) 40%, var(--gs-border));
}

.gs-toast--warn {
    border-color: color-mix(in srgb, var(--gs-warning) 40%, var(--gs-border));
}

.gs-toast--err {
    border-color: color-mix(in srgb, var(--gs-danger) 40%, var(--gs-border));
}

/* Hero con imagen/gradiente (en vez de parallax fijo caro en móvil) */
.gs-hero {
    position: relative;
    isolation: isolate;
    color: #fff;
    background: linear-gradient(180deg, rgba(2,0,36,.6) 0%, rgba(37,99,235,.7) 50%, rgba(2,0,36,.75) 100%), center/cover no-repeat var(--_img, url('/Images/ERP_Background.png'));
    padding-block: clamp(4rem, 8vw, 8rem);
}

    .gs-hero .gs-container {
        display: grid;
        gap: 1rem;
    }

    .gs-hero h1 {
        color: #fff;
        font-size: clamp(2rem, 5vw, 3rem);
    }

    .gs-hero p {
        color: #e5e7eb;
        max-width: 62ch;
    }

/* ---------- 4) UTILIDADES ---------- */
.gs-hide {
    display: none !important;
}

.gs-flex {
    display: flex;
    gap: .75rem;
}

.gs-flex-col {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.gs-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
}

.gs-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1rem;
}

@media (max-width: 900px) {
    .gs-grid-2, .gs-grid-3 {
        grid-template-columns: 1fr;
    }
}

.gs-gap-2 {
    gap: .5rem
}

.gs-gap-4 {
    gap: 1rem
}

.gs-gap-6 {
    gap: 1.5rem
}

.gs-p-2 {
    padding: .5rem
}

.gs-p-4 {
    padding: 1rem
}

.gs-p-6 {
    padding: 1.5rem
}

.gs-mt-4 {
    margin-top: 1rem
}

.gs-mb-4 {
    margin-bottom: 1rem
}

.gs-w-full {
    width: 100%
}

.gs-max-w {
    max-width: 1240px
}

.gs-elev-0 {
    box-shadow: none
}

.gs-elev-1 {
    box-shadow: var(--gs-shadow-sm)
}

.gs-elev-2 {
    box-shadow: var(--gs-shadow)
}

.gs-elev-3 {
    box-shadow: var(--gs-shadow-lg)
}

.gs-rounded {
    border-radius: var(--gs-radius)
}

.gs-rounded-lg {
    border-radius: var(--gs-radius-lg)
}

.gs-rounded-xl {
    border-radius: var(--gs-radius-xl)
}

.gs-border {
    border: 1px solid var(--gs-border)
}

.gs-border-strong {
    border: 1px solid var(--gs-border-strong)
}

.gs-text-muted {
    color: var(--gs-text-muted)
}

.gs-text-center {
    text-align: center
}

.gs-text-right {
    text-align: right
}

/* ---------- 5) COMPAT / ALIAS PARA TU CSS ANTERIOR ---------- */
/* Mapea clases previas a tokens nuevos para no romper nada */
.w3-white {
    background: var(--gs-surface) !important;
    color: var(--gs-text) !important;
}

.w3-whiteSmoke {
    background: color-mix(in srgb, var(--gs-surface) 90%, transparent) !important;
    backdrop-filter: blur(8px) !important;
}

.w3-Smoke {
    background: rgba(0,0,0,.45) !important;
}

.w3-black {
    background: #000 !important;
    color: #fff !important;
}

.QuantaDarkColor {
    background: var(--gs-surface-2) !important;
    color: var(--gs-text) !important;
}

.QuantaDarkColor2 {
    background: color-mix(in srgb, var(--gs-surface-2) 85%, transparent) !important;
    color: var(--gs-text) !important;
    backdrop-filter: blur(10px) !important;
}

.QuantaLiteGlass {
    background: color-mix(in srgb, var(--gs-primary) 25%, transparent) !important;
    color: #fff !important;
    backdrop-filter: blur(10px) !important;
}

.QuantaHover:hover {
    background: color-mix(in srgb, var(--gs-primary) 12%, transparent) !important;
}

.w3-button, .w3-btn {
    all: unset;
}

.w3-button, .w3-btn {
    display: inline-block;
}

.w3-button, .w3-btn { /* usa el botón base */
}

.w3-button, .w3-btn { /* agrega la clase nueva */
}

    .w3-button.gs, .w3-btn.gs { /* helper para migrar */
    }

    .w3-button.gs, .w3-btn.gs { /* ejemplo: <a class="w3-button gs gs-btn gs-btn--primary">... */
    }

/* Tablas antiguas → nuevo estilo */
.w3-table, .w3-table-all {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--gs-border) !important;
    border-radius: var(--gs-radius) !important;
    overflow: hidden !important;
}

    .w3-table-all th {
        background: var(--gs-surface-2);
        border-bottom: 1px solid var(--gs-border-strong);
        padding: .6rem .75rem;
    }

    .w3-table-all td {
        padding: .55rem .75rem;
        border-bottom: 1px solid var(--gs-border);
    }

/* Parallax pesado en móvil: desactivar por rendimiento */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8 {
    background-attachment: scroll !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Layout base */
.gs-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--gs-surface);
    border-bottom: 1px solid var(--gs-border);
}

    .gs-navbar .gs-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .75rem 1rem;
    }

/* Layout base */
.gs-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--gs-surface);
    border-bottom: 1px solid var(--gs-border);
}

    .gs-navbar .gs-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .75rem 1rem;
    }

/* Nav principal + hamburger: desktop por defecto */
#primaryNav {
    display: flex;
    gap: .25rem;
    align-items: center;
}

#hamburger {
    display: none;
}

/* Vista mobile: oculta nav, muestra hamburger */
@media (max-width: 900px) {
    #primaryNav {
        display: none;
    }

    #hamburger {
        display: inline-flex;
    }
}

/* Modal genérico */
.gs-modal {
    display: none;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 60;
}

.gs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}

.gs-modal__panel {
    position: relative;
    background: var(--gs-surface-2);
    border: 1px solid var(--gs-border);
    border-radius: 16px;
    max-width: 560px;
    width: 92%;
    max-height: 85vh;
    overflow: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.gs-modal__header, .gs-modal__footer {
    padding: 1rem;
    border-bottom: 1px solid var(--gs-border);
}

.gs-modal__footer {
    border-top: 1px solid var(--gs-border);
    border-bottom: none;
}

.gs-modal__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Overlay de menú mobile: panel más estrecho en móviles */
@media (max-width: 600px) {
    .gs-modal__panel {
        width: 96%;
    }
}

/* Eyebrow + lead */
.gs-section-title .gs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .3px;
    padding: .25rem .6rem;
    border: 1px solid var(--gs-border);
    border-radius: 999px;
    background: var(--gs-surface-2);
    color: var(--gs-text-muted);
    margin-bottom: .5rem;
}

.gs-lead {
    font-size: 1.05rem
}

/* Hero del producto con borde acento */
.gs-gradient-border {
    position: relative;
    border: 1px solid transparent;
    background: linear-gradient(var(--gs-surface),var(--gs-surface)) padding-box, linear-gradient(120deg, color-mix(in srgb,var(--gs-primary) 60%,transparent), color-mix(in srgb,var(--gs-info) 60%,transparent)) border-box;
    border-radius: var(--gs-radius-lg);
}

/* Pills y logo row */
.gs-logo-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap
}

.gs-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--gs-border);
    background: var(--gs-surface-2);
    font-size: .8rem;
    font-weight: 600;
    color: var(--gs-text-muted)
}

/* KPIs compactos */
.gs-kpis {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
}

.gs-kpi {
    min-width: 120px
}

.gs-kpi__value {
    font-size: 1.4rem;
    font-weight: 700
}

.gs-kpi__label {
    font-size: .83rem;
    color: var(--gs-text-muted)
}

/* Feature cards con icono circular */
.gs-feature-card {
    transition: transform .15s ease, box-shadow .2s ease
}

    .gs-feature-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--gs-shadow)
    }

.gs-feature-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    margin-bottom: .5rem;
    background: color-mix(in srgb, var(--gs-primary) 14%, transparent);
    color: var(--gs-primary-700);
}

/* Details mejorado */
.gs-disclosure > summary {
    list-style: none
}

    .gs-disclosure > summary::-webkit-details-marker {
        display: none
    }

.gs-disclosure > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer
}

/* Device frame (si no lo tenías ya) */
.gs-device {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: 16px;
    overflow: hidden
}

.gs-device__bar {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--gs-border);
    background: var(--gs-surface-2);
    color: var(--gs-text-muted);
    font-weight: 600
}

    .gs-device__bar span {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: var(--gs-border-strong)
    }

    .gs-device__bar em {
        font-style: normal;
        margin-left: auto
    }

.gs-device__body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem
}

/* Imagen flotante eficiente (si no la agregaste antes) */
.gs-device__img--float {
    display: block;
    margin-inline: auto;
    transform: translateZ(0);
    will-change: transform,filter;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
    --float-distance: 10px;
    --float-duration: 6s;
    animation: gs-float var(--float-duration) ease-in-out infinite;
    transition: transform .25s ease, filter .25s ease;
}

.gs-device:hover .gs-device__img--float {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 16px 28px rgba(0,0,0,.22));
}

@keyframes gs-float {
    0% {
        transform: translateY(0) rotate(.0001deg)
    }

    50% {
        transform: translateY(calc(var(--float-distance)*-1)) rotate(.0001deg)
    }

    100% {
        transform: translateY(0) rotate(.0001deg)
    }
}

/* Util */
.gs-gap-lg {
    gap: 1rem
}

.gs-pointer {
    cursor: pointer
}

/* Contenedor general */
.gs-legal {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--gs-text);
    max-width: 900px;
    margin: 0 auto;
}

    /* Títulos de sección */
    .gs-legal h2 {
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 1rem;
        text-align: center;
        color: var(--gs-primary-700);
        border-bottom: 2px solid var(--gs-border);
        padding-bottom: 0.4rem;
    }

    .gs-legal h4 {
        font-size: 1.05rem;
        font-weight: 600;
        margin: 1rem 0 0.5rem;
        color: var(--gs-primary);
    }

    /* Listas numeradas (secciones principales) */
    .gs-legal ol {
        counter-reset: section;
        list-style: none;
        padding-left: 0;
        margin-left: 0;
    }

        .gs-legal ol > li {
            counter-increment: section;
            margin-bottom: 1.25rem;
            padding-left: 2.2rem;
            position: relative;
        }

            .gs-legal ol > li::before {
                content: counter(section) ".";
                position: absolute;
                left: 0;
                top: 0;
                font-weight: 700;
                color: var(--gs-primary);
                font-size: 1rem;
            }

    /* Sublistas (bullets internos) */
    .gs-legal ul {
        margin-top: 0.5rem;
        margin-bottom: 0.75rem;
        padding-left: 1.4rem;
        list-style: none;
    }

        .gs-legal ul li {
            margin-bottom: 0.4rem;
            position: relative;
            padding-left: 1.1rem;
        }

            .gs-legal ul li::before {
                content: "•";
                position: absolute;
                left: 0;
                color: var(--gs-primary);
                font-size: 1.1rem;
                line-height: 1.2;
            }

    /* Párrafos */
    .gs-legal p {
        margin-bottom: 0.8rem;
        text-align: justify;
    }

    /* Enlaces */
    .gs-legal a {
        color: var(--gs-primary-700);
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px dashed var(--gs-primary-300);
        transition: color 0.2s, border-color 0.2s;
    }

        .gs-legal a:hover {
            color: var(--gs-primary);
            border-color: var(--gs-primary);
        }

/* Overline y títulos */
.gs-overline {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gs-text-muted);
    margin-bottom: .35rem
}

.gs-title-lg {
    font-size: 1.35rem
}

/* Grid de productos: columnas responsivas y alturas consistentes */
.gs-product-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3,minmax(0,1fr))
}

@media (max-width:900px) {
    .gs-product-grid {
        grid-template-columns: 1fr
    }
}

@media (min-width:901px) and (max-width:1150px) {
    .gs-product-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

.gs-card--clickable {
    transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease
}

    .gs-card--clickable:hover {
        transform: translateY(-2px);
        box-shadow: var(--gs-shadow);
        border-color: color-mix(in srgb,var(--gs-primary) 28%,var(--gs-border))
    }

/* Media (icono o logo) */
.gs-product__media {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .5rem
}

.gs-product__logo {
    width: 64px;
    max-width: 70%;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.08))
}

.gs-product__icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gs-primary) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--gs-primary) 30%, var(--gs-border));
    box-shadow: var(--gs-shadow-sm);
    font-size: 1.35rem;
    color: var(--gs-primary-700)
}

/* Texto y metadatos */
.gs-product__title {
    margin: .25rem 0 .35rem
}

.gs-product__tags {
    display: flex;
    gap: .35rem;
    justify-content: center;
    margin-bottom: .35rem
}

.gs-product__desc {
    min-height: 3.6em
}
/* para equilibrar alturas en desktop */

/* Footer con CTAs */
.gs-product__footer {
    margin-top: .6rem;
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap
}

/* Modo oscuro: ligeros ajustes de contraste */
:root[data-theme="dark"] .gs-product__icon {
    background: color-mix(in srgb, var(--gs-primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--gs-primary) 40%, var(--gs-border));
}

/* Grid y cards del equipo */
.gs-team-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3,minmax(0,1fr))
}

@media(max-width:900px) {
    .gs-team-grid {
        grid-template-columns: 1fr
    }
}

@media(min-width:901px) and (max-width:1150px) {
    .gs-team-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

.gs-card--clickable {
    transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease
}

    .gs-card--clickable:hover {
        transform: translateY(-2px);
        box-shadow: var(--gs-shadow);
        border-color: color-mix(in srgb, var(--gs-primary) 28%, var(--gs-border));
    }

/* Cabecera de tarjeta: avatar + nombre/rol */
.gs-team__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .25rem
}

.gs-team__id strong {
    display: block
}

.gs-team__bio {
    margin: .35rem 0 .5rem
}

/* Chips/etiquetas y CTA al final */
.gs-team__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .25rem
}

.gs-team__cta {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem
}

/* Avatar: iniciales por defecto, redondo y con contraste */
.gs-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--gs-primary) 16%, transparent);
    color: var(--gs-primary-700);
    font-weight: 700;
    letter-spacing: .5px;
    border: 1px solid color-mix(in srgb, var(--gs-primary) 30%, var(--gs-border));
    box-shadow: var(--gs-shadow-sm);
    user-select: none
}
/* Variante con imagen */
.gs-avatar--img {
    object-fit: cover;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none
}

/* Encabezados consistentes */
.gs-overline {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gs-text-muted);
    margin-bottom: .35rem
}

.gs-title-lg {
    font-size: 1.35rem
}

/* Dark mode: toques sutiles */
:root[data-theme="dark"] .gs-avatar {
    background: color-mix(in srgb, var(--gs-primary) 20%, transparent);
    color: var(--gs-primary-600);
    border-color: color-mix(in srgb, var(--gs-primary) 40%, var(--gs-border));
}

/* Prosa más limpia */
.gs-prose p {
    margin-bottom: 1rem;
    text-align: justify;
    font-size: 0.95rem;
}

/* Imagen del fundador más consistente */
#experience .gs-avatar--img {
    margin-top: 0.5rem;
    border-radius: 12px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
}

/* ========= Timeline ========= */
.gs-timeline {
    position: relative;
    display: grid;
    gap: 1.25rem;
    margin-top: .5rem;
    padding-left: 2.25rem; /* espacio para la línea */
}

    /* Columna de línea vertical */
    .gs-timeline::before {
        content: "";
        position: absolute;
        left: 1.05rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--gs-border-strong);
    }

/* Item */
.gs-tl__item {
    position: relative;
    display: grid;
    gap: .5rem;
}

/* Punto del timeline */
.gs-tl__dot {
    position: absolute;
    left: -0.1rem;
    top: .35rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: var(--gs-surface);
    border: 2px solid var(--gs-primary);
    display: grid;
    place-items: center;
    box-shadow: var(--gs-shadow-sm);
}

    .gs-tl__dot i {
        font-size: .75rem;
        color: var(--gs-primary);
    }

/* Tarjeta */
.gs-tl__card {
    padding: .9rem 1rem;
}

.gs-tl__meta {
    font-size: .8rem;
    letter-spacing: .2px;
    color: var(--gs-text-muted);
    margin-bottom: .25rem;
}

.gs-tl__title {
    margin: 0 0 .25rem 0;
    font-size: 1.05rem;
}

.gs-tl__desc {
    margin: 0;
    color: var(--gs-text-muted);
    font-size: .95rem;
}

/* Animación sutil al aparecer */
@keyframes tl-reveal-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gs-tl__item {
    opacity: 0;
    transform: translateY(8px);
}

    .gs-tl__item.is-visible {
        animation: tl-reveal-up .5s ease forwards;
    }

/* Motion-safe */
@media (prefers-reduced-motion: reduce) {
    .gs-tl__item {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}

/* Responsive: en pantallas amplias, 2 columnas alternadas */
@media (min-width: 900px) {
    .gs-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 3rem;
        padding-left: 0;
    }

        .gs-timeline::before {
            left: 50%;
            transform: translateX(-1px);
        }

    .gs-tl__item {
        padding-left: 0;
    }

        .gs-tl__item:nth-child(odd) {
            grid-column: 1;
        }

        .gs-tl__item:nth-child(even) {
            grid-column: 2;
        }

    .gs-tl__dot {
        left: calc(50% - .65rem);
    }
}

/* ---- Integraciones (cards pequeñas) ---- */
.gs-integration {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .9rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    transition: transform .2s ease,border-color .2s ease,background .2s ease;
    font-size: .92rem;
    /*color: var(--gs-text-muted);*/
    color: #f1f3f6;
    min-height: 112px;
    text-align: center
}

    .gs-integration i {
        font-size: 1.6rem;
        color: var(--gs-primary)
    }

    .gs-integration:hover {
        transform: translateY(-3px);
        border-color: var(--gs-primary);
        background: rgba(255,255,255,.08);
        color: #a3ccff;
    }

/* ---- Carrusel base (sin desbordes) ---- */
.gs-carousel {
    position: relative;
    margin-top: 1rem;
    max-width: 100%;
    overflow: hidden
}

.gs-carousel__viewport {
    position: relative;
    overflow: hidden;
    max-width: 100%
}

.gs-carousel__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    will-change: transform;
    transition: transform .4s ease;
    padding: .25rem 0;
    contain: content
}

.gs-carousel__item {
    flex: 0 0 auto;
    min-width: clamp(160px,28vw,220px)
}

@media (max-width:480px) {
    .gs-carousel__item {
        min-width: clamp(160px,80vw,260px)
    }
}

/* Nav */
.gs-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.25);
    color: #fff;
    backdrop-filter: blur(6px);
    cursor: pointer;
    z-index: 2;
    transition: transform .2s ease, opacity .2s ease
}

    .gs-carousel__nav:hover {
        transform: translateY(-50%) scale(1.05)
    }

.gs-carousel__prev {
    left: .25rem
}

.gs-carousel__next {
    right: .25rem
}

/* Dots */
.gs-carousel__dots {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: .75rem
}

    .gs-carousel__dots button {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        border: none;
        background: rgba(255,255,255,.35);
        cursor: pointer
    }

        .gs-carousel__dots button.is-active {
            background: var(--gs-primary)
        }

/* Contenedores flex no “estiren” el card del carrusel */
.gs-card {
    min-width: 0
}
/* --- Contacto pro --- */
.gs-contact .gs-overline {
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gs-text-muted);
    margin-bottom: .35rem;
}

.gs-title-md {
    font-size: 1.35rem;
}

.gs-title-sm {
    font-size: 1.05rem;
}

.gs-cta-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin: .9rem 0 0.6rem;
}

@media (max-width:900px) {
    .gs-cta-block {
        grid-template-columns: 1fr;
    }
}

.gs-divider {
    height: 1px;
    background: var(--gs-border);
    margin: 1rem 0;
}

/* Lista de info con iconos alineados */
.gs-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
}

    .gs-info-list li {
        display: grid;
        grid-template-columns: 20px 1fr;
        align-items: start;
        gap: .6rem;
        color: var(--gs-text-muted);
        font-size: .95rem;
    }

    .gs-info-list i {
        color: var(--gs-primary);
        line-height: 1.4;
    }

/* Mapa con radio y proporción */
.gs-map {
    border: 1px solid var(--gs-border);
    border-radius: 12px;
    overflow: hidden;
}

    .gs-map iframe {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        /* Fallback para navegadores sin aspect-ratio */
        height: auto;
        min-height: 260px;
        border: 0;
    }

/* QR elegante */
.gs-qr {
    margin-top: 1rem;
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: .9rem;
    border: 1px solid var(--gs-border);
    border-radius: 12px;
    background: var(--gs-surface-2);
}

    .gs-qr img {
        border-radius: 8px;
        box-shadow: var(--gs-shadow-sm);
    }

.gs-qr__caption {
    font-size: .85rem;
}

/* Ajustes de espaciado responsivo */
@media (max-width:900px) {
    #contact .gs-container {
        gap: 1rem;
    }
}