/* public/css/landing/landing.css - Modo Claro Institucional (Estilo Recibo.ec / Portal de Clientes) */


:root {
    --kbot-font-display: 'Plus Jakarta Sans', sans-serif;
    --kbot-brand-deep: #142F54;
    --kbot-brand-on-deep: #CFDFF5;
    --kbot-brand-sky: #EAF2FF;
    --kbot-brand-border: #AFC9F3;
    --kbot-brand-mint: #E9F7F0;
    --kbot-sky-text: #284569;
    --kbot-mint-text: #244B3D;
    --kbot-canvas: #F8FAFC;
    --kbot-card: #FFFFFF;
    --kbot-border: #CBD5E1;
    --kbot-text-primary: #0F172A;
    --kbot-text-muted: #475569;
    --kbot-action: #2563EB;
    --kbot-action-hover: #1D4ED8;
    --kbot-success: #047857;
    --kbot-warning: #92400E;
    --kbot-gutter: 20px;
    --kbot-header-height: 64px;
    --kbot-content-width: 1200px;
    --kbot-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

:where(.landing-page, .landing-page *) { box-sizing: border-box; }
:where(.landing-page) { margin: 0; min-height: 100svh; }
:where(.landing-page button) { border: 0; background: transparent; font: inherit; }
:where(.landing-page input, .landing-page select, .landing-page textarea) { font: inherit; }

body {
    background-color: var(--kbot-canvas);
    color: var(--kbot-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html {
    scroll-padding-top: calc(var(--kbot-header-height) + 24px);
}

.landing-container {
    width: min(var(--kbot-content-width), calc(100% - 2 * var(--kbot-gutter)));
    margin-inline: auto;
}

.landing-main {
    position: relative;
    z-index: 10;
}

.landing-sections {
    padding-bottom: 64px;
}

.landing-skip-link {
    position: fixed;
    top: 8px;
    left: var(--kbot-gutter);
    z-index: 70;
    padding: 12px 20px;
    background: var(--kbot-card);
    color: var(--kbot-text-primary);
    border-radius: 8px;
    transform: translateY(-160%);
}

.landing-skip-link:focus {
    transform: translateY(0);
}

.landing-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--kbot-card);
    border-bottom: 1px solid #E2E8F0;
}

.landing-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--kbot-header-height);
}

.landing-brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--kbot-text-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-decoration: none;
}

.landing-brand img {
    width: 30px;
    height: 30px;
}

.landing-nav {
    display: none;
    align-items: center;
    gap: 32px;
}

.landing-nav a,
.landing-portal-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--kbot-text-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-underline-offset: 5px;
    text-decoration: none;
}

.landing-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.landing-portal-link {
    display: none;
}

.landing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 180ms var(--kbot-ease-out);
}

.landing-button svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.landing-button--primary {
    background: var(--kbot-action);
    color: #FFFFFF;
}

.landing-button--secondary {
    border-color: var(--kbot-border);
    background: var(--kbot-card);
    color: var(--kbot-text-primary);
}

.landing-header__cta {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    white-space: nowrap;
}

.landing-menu-toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--kbot-border);
    border-radius: 8px;
    color: var(--kbot-text-primary);
    background: var(--kbot-card);
    cursor: pointer;
}

.landing-menu-toggle svg {
    width: 20px;
    height: 20px;
}

.landing-menu-toggle__close,
.landing-menu-toggle[aria-expanded="true"] .landing-menu-toggle__open {
    display: none;
}

.landing-menu-toggle[aria-expanded="true"] .landing-menu-toggle__close {
    display: inline;
}

.landing-mobile-menu {
    position: absolute;
    inset: 100% 0 auto;
    max-height: calc(100svh - var(--kbot-header-height));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: var(--kbot-card);
    border-bottom: 1px solid var(--kbot-border);
    box-shadow: 0 12px 24px -16px rgb(15 23 42 / 20%);
}

.landing-mobile-menu[hidden] {
    display: none;
}

[hidden] { display: none !important; }
.landing-page input::placeholder, .landing-page textarea::placeholder { color: var(--kbot-text-muted); opacity: 1; }
.landing-page ::selection { background: #DBEAFE; color: #0F172A; }
.landing-page :is(input, textarea) { caret-color: var(--kbot-action-hover); }
.landing-page :is(.demo-filters, .calculator-fields, .contact-fields) :is(input:not([type="range"]), select, textarea), .landing-page #preparedLeadText { border-color: #64748B; }
.landing-page[data-input="keyboard"] .landing-button { transition: none; }
.faq-list { max-width: 960px; }.faq-detail { border-top: 1px solid var(--kbot-border); }.faq-detail:last-child { border-bottom: 1px solid var(--kbot-border); }
.faq-detail summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding-block: 20px; list-style: none; cursor: pointer; color: var(--kbot-text-primary); font-size: 17px; font-weight: 600; line-height: 1.5; }.faq-detail summary::-webkit-details-marker { display: none; }.faq-detail__chevron { width: 20px; height: 20px; flex-shrink: 0; color: var(--kbot-text-muted); }.faq-detail[open] .faq-detail__chevron { transform: rotate(180deg); }.faq-detail__body { padding: 0 48px 24px 0; }.faq-detail__body p { margin: 0; max-width: 70ch; color: var(--kbot-text-muted); font-size: 16px; line-height: 1.7; }
.landing-footer { padding-block: 96px 32px; background: #FFFFFF; border-top: 1px solid var(--kbot-border); }.landing-close { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 64px; align-items: center; padding-bottom: 80px; }.landing-close h2 { margin: 0; font: 800 clamp(28px,3vw,40px)/1.15 'Plus Jakarta Sans',sans-serif; letter-spacing: -.03em; text-wrap: balance; }.landing-close p { margin: 0 0 24px; color: var(--kbot-text-muted); font-size: 18px; line-height: 1.6; }
.footer-content { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 48px; padding-block: 40px; border-block: 1px solid var(--kbot-border); }.footer-content .landing-brand { align-self: start; }.footer-content nav, .footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }.footer-content a:not(.landing-brand), .footer-text-button { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; color: var(--kbot-text-muted); font-size: 14px; line-height: 1.5; text-align: left; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }.footer-content #legalLinks { display: flex; flex-wrap: wrap; gap: 16px; }.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; }.footer-legal p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--kbot-text-muted); }
.contact-dialog { position: fixed; inset: 0; margin: auto; width: min(600px,calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 32px; border: 0; border-radius: 16px; background: #FFFFFF; color: var(--kbot-text-primary); overflow-y: auto; overscroll-behavior-y: contain; box-shadow: 0 24px 64px -20px rgb(15 23 42 / 30%); }.contact-dialog::backdrop { background: rgb(15 23 42 / 55%); }.contact-dialog h2 { margin: 0; padding-right: 44px; font: 700 28px/1.3 'Plus Jakarta Sans',sans-serif; letter-spacing: -.02em; }.contact-dialog > p:not(.contact-status) { margin: 16px 0 28px; color: var(--kbot-text-muted); font-size: 16px; line-height: 1.6; }
.contact-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--kbot-text-muted); cursor: pointer; }.contact-close svg { width: 20px; height: 20px; }
.contact-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }.contact-field { min-width: 0; }.contact-field--full { grid-column: 1 / -1; }.contact-field label, #contactPrepared > label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--kbot-text-primary); }.contact-field label span { font-weight: 400; color: var(--kbot-text-muted); }.contact-field input, .contact-field textarea, #preparedLeadText { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--kbot-border); border-radius: 8px; background: #FFFFFF; font-size: 16px; color: var(--kbot-text-primary); line-height: 1.5; }.contact-field textarea, #preparedLeadText { resize: vertical; }.contact-dialog form > button { width: 100%; margin-top: 24px; }.contact-status { margin: 20px 0 0; color: var(--kbot-text-muted); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }.contact-status:empty { display: none; }.contact-status[data-state="error"] { color: var(--kbot-warning); }.contact-status[data-state="success"] { color: var(--kbot-success); }#contactPrepared { margin-top: 24px; }.contact-prepared-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.calculator-inputs input[type="range"] { appearance: none; }.calculator-inputs input[type="range"]::-webkit-slider-thumb { appearance: none; box-sizing: border-box; width: 24px; height: 24px; background: var(--kbot-action); border: 3px solid #FFFFFF; border-radius: 50%; }.calculator-inputs input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; background: var(--kbot-action); border: 3px solid #FFFFFF; border-radius: 50%; }
.landing-page { scrollbar-color: #64748B #E2E8F0; }.code-panel pre { scrollbar-color: #94A3B8 #1E293B; scrollbar-width: thin; }.code-panel--light pre { scrollbar-color: #64748B #E2E8F0; }.api-section .code-panel pre { height: 280px; }.api-section .code-panel [role="tabpanel"] { min-width: 0; }
.landing-hero__art { flex-direction: column; align-items: center; }.mascot-pause { min-height: 44px; padding: 8px 12px; color: var(--kbot-text-muted); background: transparent; border-radius: 8px; font-size: 13px; cursor: pointer; }
#hero[data-motion-paused="true"] :is(.floating-bot-layer, #avatar-eye-left, #avatar-eye-right), #hero[data-in-view="false"] :is(.floating-bot-layer, #avatar-eye-left, #avatar-eye-right) { animation-play-state: paused; }
@media (max-width: 767px), (hover: none), (pointer: coarse) {
    #hero :is(.floating-bot-layer, #avatar-eye-left, #avatar-eye-right) { animation: none; }
    #hero :is(#avatar-wrapper, #avatar-eyes-pupils) { transition: none; }
    #hero #kbot-hero-canvas { filter: none; }
    #hero .mascot-pause { display: none; }
}
@media (hover: hover) and (pointer: fine) { .footer-content a:hover, .footer-text-button:hover { color: var(--kbot-action-hover); text-decoration: underline; text-underline-offset: 4px; }.demo-download:hover, .demo-pagination button:not(:disabled):hover { background: var(--kbot-canvas); } }
@media (max-width: 767px) { .landing-footer { padding-top: 64px; }.landing-close { grid-template-columns: minmax(0,1fr); gap: 24px; padding-bottom: 48px; }.footer-content { grid-template-columns: minmax(0,1fr); gap: 32px; }.contact-dialog { padding: 24px; }.contact-dialog h2 { font-size: 24px; }.contact-close { right: 12px; top: 12px; }.contact-fields { grid-template-columns: minmax(0,1fr); gap: 16px; }.contact-prepared-actions .landing-button { width: 100%; }.faq-detail__body { padding-right: 0; } }

.landing-mobile-menu__links {
    display: grid;
    gap: 4px;
    padding-block: 16px 24px;
}

.landing-mobile-menu__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 12px;
    border-radius: 8px;
    color: var(--kbot-text-primary);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.landing-mobile-menu__portal {
    margin-top: 8px;
    border-top: 1px solid #E2E8F0;
}

.landing-mobile-menu__portal svg {
    width: 18px;
    height: 18px;
}

.landing-hero {
    display: grid;
    align-items: center;
    min-height: calc(100svh - var(--kbot-header-height));
    padding-block: 32px;
}

.landing-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

.landing-hero__copy {
    min-width: 0;
    text-align: center;
}

.landing-hero__title {
    margin: 0;
    color: var(--kbot-text-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.landing-hero__title span {
    display: block;
    color: var(--kbot-action-hover);
}

.landing-hero__lead {
    max-width: 46ch;
    margin: 20px auto 0;
    color: var(--kbot-text-muted);
    font-size: 16px;
    line-height: 1.6;
    text-wrap: pretty;
}

.landing-hero__actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.landing-hero__capabilities {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    margin: 24px 0 0;
    padding: 0;
    color: var(--kbot-text-muted);
    font-size: 13px;
    line-height: 1.5;
    list-style: none;
}

.landing-hero__capabilities li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.landing-hero__capabilities svg {
    width: 14px;
    height: 14px;
    color: var(--kbot-success);
}

.landing-hero__art {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.landing-hero .landing-hero__mascot {
    width: 260px;
    max-width: 100%;
}

.landing-page :is(.landing-header, .landing-hero) :is(a, button):focus-visible,
.landing-skip-link:focus-visible {
    outline: 3px solid var(--kbot-action-hover);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .landing-nav a:hover,
    .landing-portal-link:hover {
        color: var(--kbot-action-hover);
        text-decoration: underline;
    }

    .landing-mobile-menu__links a:hover,
    .landing-menu-toggle:hover {
        background: var(--kbot-canvas);
    }

    .landing-button:hover {
        transform: translateY(-1px);
    }

    .landing-button--primary:hover {
        background: var(--kbot-action-hover);
    }

    .landing-button--secondary:hover {
        border-color: var(--kbot-text-muted);
        background: #F1F5F9;
    }
}

.landing-button:active {
    transform: scale(0.98);
}

@media (min-width: 640px) {
    :root { --kbot-gutter: 32px; }
    .landing-hero { padding-block: 48px; }
    .landing-hero__title { font-size: 48px; }
    .landing-hero__lead { font-size: 18px; }
    .landing-hero__actions { flex-direction: row; }
    .landing-hero__capabilities { font-size: 14px; gap: 24px; }
    .landing-hero .landing-hero__mascot { width: 360px; }
    .landing-header__actions { gap: 16px; }
    .landing-portal-link { display: inline-flex; }
}

@media (min-width: 1024px) {
    .landing-hero { padding-block: 64px; }
    .landing-hero__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; }
    .landing-hero__copy { text-align: left; }
    .landing-hero__title { font-size: 52px; }
    .landing-hero__lead { margin-inline: 0; }
    .landing-hero__actions,
    .landing-hero__capabilities { justify-content: flex-start; }
    .landing-hero .landing-hero__mascot { width: 480px; }
}

@media (min-width: 1200px) {
    :root { --kbot-gutter: 48px; --kbot-header-height: 72px; }
    .landing-nav { display: flex; }
    .landing-menu-toggle,
    .landing-mobile-menu { display: none; }
    .landing-hero__title { font-size: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    html.scroll-smooth { scroll-behavior: auto; }
    .landing-button,
    .landing-hero .avatar-wrapper,
    .landing-hero #avatar-eyes-pupils { transition: none; }
    .landing-hero #avatar-eye-left,
    .landing-hero #avatar-eye-right { animation: none; }
    .landing-hero .floating-bot-layer { animation: none; }
}

.font-display {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Shared content roles, following the approved landing system. */
.landing-section { padding-block: 96px; }
.section-heading { max-width: 760px; margin-bottom: 48px; }
.section-heading h2 { margin: 0; color: var(--kbot-text-primary); font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.section-heading p { margin: 20px 0 0; color: var(--kbot-text-muted); font-size: 18px; line-height: 1.65; max-width: 65ch; text-wrap: pretty; }
.workflow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 0; list-style: none; }
.workflow-step { min-width: 0; }
.workflow-preview { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; min-height: 232px; padding: 28px; background: var(--kbot-card); border: 1px solid var(--kbot-border); border-radius: 12px; }
.workflow-file-icon { color: var(--kbot-action); margin-bottom: 4px; }
.workflow-file-icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
.workflow-preview__title { margin: 0; font-weight: 600; color: var(--kbot-text-primary); font-size: 16px; }
.workflow-preview__meta { margin: 0; color: var(--kbot-text-muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.workflow-formats { display: flex; gap: 16px; color: var(--kbot-text-muted); font-size: 14px; font-weight: 600; }
.workflow-output { display: flex; justify-content: space-between; align-self: stretch; flex-wrap: wrap; gap: 8px 16px; color: var(--kbot-text-muted); font-size: 14px; }
.workflow-output strong { color: var(--kbot-text-primary); font-weight: 600; }
.workflow-step__title { display: flex; align-items: baseline; gap: 12px; margin-top: 28px; }
.workflow-step__title > span { flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--kbot-action); }
.workflow-step h3 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.4; letter-spacing: -0.02em; }
.workflow-step > p { margin: 12px 0 0; color: var(--kbot-text-muted); font-size: 16px; line-height: 1.65; }
.workflow-benefits { display: flex; flex-wrap: wrap; gap: 20px 40px; padding-top: 32px; margin-top: 40px; border-top: 1px solid var(--kbot-border); }
.workflow-benefits p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--kbot-text-muted); }
.workflow-benefits svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--kbot-success); }
.workflow-integration { margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: var(--kbot-text-muted); }
.landing-status { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.landing-status svg { width: 14px; height: 14px; flex-shrink: 0; }
.landing-status--warning { background: #FFFBEB; color: var(--kbot-warning); }
.landing-status--success { background: #ECFDF5; color: var(--kbot-success); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.demo-frame { background: var(--kbot-card); border: 1px solid var(--kbot-border); border-radius: 16px; overflow: clip; }
.demo-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; }
.demo-caption { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--kbot-text-muted); font-size: 14px; }
.demo-dot { width: 8px; height: 8px; background: var(--kbot-action); border-radius: 50%; flex-shrink: 0; }
.demo-tabs { display: flex; gap: 8px; padding: 0 24px; border-bottom: 1px solid var(--kbot-border); }
.demo-tabs button { min-height: 48px; padding: 12px 16px; font-size: 15px; color: var(--kbot-text-muted); border-bottom: 2px solid transparent; background: transparent; cursor: pointer; }
.demo-tabs [aria-selected="true"] { color: var(--kbot-action-hover); border-bottom-color: var(--kbot-action); font-weight: 600; }
.demo-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 24px; margin: 0; gap: 24px; border-bottom: 1px solid var(--kbot-border); }
.demo-metric { min-width: 0; }
.demo-metric dt { color: var(--kbot-text-muted); font-size: 14px; line-height: 1.5; }
.demo-metric dd { margin: 8px 0 0; color: var(--kbot-text-primary); font-size: 28px; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.landing-metrics dt, .landing-metrics a { overflow-wrap: anywhere; }
.demo-filters { display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: 20px; padding: 24px; }
.demo-filters label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--kbot-text-muted); }
.demo-filters input, .demo-filters select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--kbot-border); border-radius: 8px; background: white; color: var(--kbot-text-primary); font-size: 16px; }
.demo-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.demo-table th { text-align: left; color: var(--kbot-text-muted); font-size: 13px; font-weight: 500; background: var(--kbot-canvas); }
.demo-table th, .demo-table td { padding: 12px 16px; border-bottom: 1px solid #E2E8F0; vertical-align: middle; }
.demo-table th:first-child { width: 20%; }.demo-table th:nth-child(2) { width: 24%; }.demo-table th:nth-child(3) { width: 14%; }.demo-table th:nth-child(4) { width: 16%; }.demo-table th:nth-child(5) { width: 16%; }.demo-table th:last-child { width: 10%; }
.demo-document { display: inline-block; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.5; }
.demo-company { overflow-wrap: anywhere; line-height: 1.6; }
.demo-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.demo-download, .demo-pagination button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--kbot-border); border-radius: 8px; color: var(--kbot-action-hover); background: var(--kbot-card); font-size: 14px; font-weight: 500; cursor: pointer; }
.demo-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; }
.demo-pagination p { margin: 0; font-size: 14px; color: var(--kbot-text-muted); }
.demo-pagination > div { display: flex; gap: 8px; }
.landing-page button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.demo-empty { text-align: center; padding: 40px 24px !important; }
.demo-empty p { margin: 12px 0 20px; color: var(--kbot-text-muted); }
.section-note { margin: 20px 0 0; color: var(--kbot-text-muted); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.section-note:empty { display: none; }
.calculator-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; }
.calculator-rucs { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.calculator-rucs label { font-size: 16px; font-weight: 600; }.calculator-rucs output { color: var(--kbot-action-hover); font: 700 28px/1.3 'Plus Jakarta Sans',sans-serif; }
.calculator-inputs input[type="range"] { width: 100%; min-height: 44px; padding-block: 8px; background: transparent; cursor: pointer; }
.calculator-inputs input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: var(--kbot-border); border-radius: 8px; }
.calculator-inputs input[type="range"]::-webkit-slider-thumb { margin-top: -8px; }
.calculator-inputs input[type="range"]::-moz-range-track { height: 8px; background: var(--kbot-border); border-radius: 8px; }
.calculator-range-labels { display: flex; justify-content: space-between; margin-top: 8px; color: var(--kbot-text-muted); font-size: 14px; }
.calculator-assumptions { margin-top: 32px; }.calculator-assumptions summary { cursor: pointer; min-height: 44px; font-size: 15px; color: var(--kbot-action-hover); padding-block: 10px; }
.calculator-fields { display: grid; gap: 20px; margin-top: 20px; }.calculator-fields label { display: grid; gap: 8px; font-size: 14px; color: var(--kbot-text-muted); }.calculator-fields input { min-width: 0; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--kbot-border); border-radius: 8px; color: var(--kbot-text-primary); background: white; font-size: 16px; }
.calculator-fields [aria-invalid="true"] { border-color: var(--kbot-warning); }
.calculator-results { margin: 0; display: grid; gap: 24px; align-content: start; }.calculator-results > div { border-bottom: 1px solid var(--kbot-border); padding-bottom: 20px; min-width: 0; }.calculator-results dt { color: var(--kbot-text-muted); font-size: 14px; }.calculator-results dd { margin: 8px 0 0; color: var(--kbot-text-primary); font: 700 32px/1.3 'Plus Jakarta Sans',sans-serif; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.commercial-proposal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--kbot-border); }.commercial-proposal h3 { margin: 0; font: 700 24px/1.35 'Plus Jakarta Sans',sans-serif; letter-spacing: -.02em; }.commercial-proposal p { margin: 12px 0 0; color: var(--kbot-text-muted); font-size: 16px; line-height: 1.6; }
.provisional-metrics { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--kbot-border); }.provisional-metrics > p { margin-top: 0; }
.landing-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin: 24px 0 0; }.landing-metrics > div { min-width: 0; }.landing-metrics dd { margin: 0; font: 700 32px/1.3 'Plus Jakarta Sans',sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere; }.landing-metrics dt { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--kbot-text-muted); }.landing-metrics a { display: inline-block; min-height: 24px; margin-top: 8px; color: var(--kbot-action-hover); font-size: 14px; }
@media (max-width: 767px) { .calculator-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }.landing-metrics { grid-template-columns: minmax(0,1fr); gap: 24px; }.commercial-proposal { align-items: flex-start; }.commercial-proposal .landing-button { width: 100%; } }
.ats-layout, .api-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 64px; align-items: start; }
.ats-explanation h3, .api-explanation h3 { margin: 0 0 24px; font: 700 22px/1.4 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
.ats-explanation > p, .api-explanation > p { color: var(--kbot-text-muted); font-size: 16px; line-height: 1.65; margin: 24px 0; }
.ats-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.ats-checklist li { display: flex; align-items: flex-start; gap: 12px; color: var(--kbot-text-muted); font-size: 16px; line-height: 1.6; }
.ats-checklist svg { width: 20px; height: 20px; margin-top: 3px; color: var(--kbot-success); flex-shrink: 0; }
.code-panel { min-width: 0; overflow: hidden; border-radius: 12px; background: var(--kbot-text-primary); color: #E2E8F0; }
.code-panel__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 64px; padding: 12px 20px; border-bottom: 1px solid #334155; color: #E2E8F0; font-size: 13px; }
.code-panel pre { margin: 0; padding: 28px 24px; overflow-x: auto; max-width: 100%; font: 400 14px/1.8 'JetBrains Mono',monospace; tab-size: 2; }
.code-panel code { font: inherit; }
.code-panel__note { margin: 0; padding: 0 24px 24px; font-size: 13px; line-height: 1.6; color: #CBD5E1; }
.code-panel--light { background: var(--kbot-card); color: var(--kbot-text-primary); border: 1px solid var(--kbot-border); }
.code-panel--light .code-panel__bar { color: var(--kbot-text-muted); border-color: var(--kbot-border); }
.code-panel--light .code-panel__note { color: var(--kbot-text-muted); }
.code-tabs { display: flex; gap: 4px; }
.code-tabs button, .code-copy { min-height: 44px; padding: 8px 12px; color: #CBD5E1; background: transparent; border-radius: 6px; font: inherit; cursor: pointer; }
.code-tabs [aria-selected="true"] { background: #334155; color: #FFFFFF; }
.code-copy { border: 1px solid #64748B; color: #FFFFFF; }
.code-panel :is(button, pre):focus-visible { outline-color: #93C5FD; outline-offset: -3px; }
.reference-code:focus-visible { outline: 3px solid #93C5FD; outline-offset: -3px; }
.api-facts { list-style: none; margin: 28px 0; padding: 0; }
.api-facts li { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding-block: 16px; border-bottom: 1px solid var(--kbot-border); font-size: 14px; color: var(--kbot-text-muted); }
.api-facts strong { font-weight: 500; color: var(--kbot-text-primary); }
.api-reference { max-width: 850px; padding-block: 48px 96px; color: var(--kbot-text-primary); }
.api-reference .section-heading { margin-top: 48px; }.api-reference h1 { font: 800 clamp(32px,4vw,48px)/1.15 'Plus Jakarta Sans',sans-serif; letter-spacing: -.03em; }
.api-reference h2 { font-size: 24px; font-weight: 700; margin: 40px 0 16px; }.api-reference p, .api-reference dd { font-size: 16px; line-height: 1.7; color: var(--kbot-text-muted); }
.api-reference code { overflow-wrap: anywhere; }.reference-code { padding: 24px; background: #0F172A; color: #E2E8F0; border-radius: 12px; overflow: auto; font: 14px/1.7 monospace; }.reference-filters dt { margin-top: 20px; font-weight: 600; }.reference-filters dd { margin: 8px 0 0; }
@media (min-width: 1200px) { .ats-section, .api-section { min-height: 100svh; } }
@media (max-width: 900px) { .ats-layout, .api-layout { grid-template-columns: minmax(0,1fr); gap: 32px; } }
.landing-page :is(button, a, input, select, summary, textarea):focus-visible { outline: 3px solid var(--kbot-action-hover); outline-offset: 3px; }
.demo-dev-switch { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 80; max-width: calc(100% - 24px); padding: 8px 12px; background: #F1F5F9; color: #0F172A; border: 1px solid #CBD5E1; border-radius: 8px; font: 13px system-ui; }
.demo-dev-switch select { min-height: 32px; background: white; border: 1px solid #CBD5E1; border-radius: 4px; }
@media (max-width: 767px) {
  .demo-toolbar, .demo-filters, .demo-pagination { padding: 20px; }
  .demo-filters { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .demo-tabs { padding-inline: 12px; gap: 0; }
  .demo-tabs button { flex: 1; padding-inline: 10px; font-size: 14px; }
  .demo-metrics { grid-template-columns: minmax(0,1fr); padding: 20px; gap: 16px; }
  .demo-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .demo-metric dd { margin: 0; font-size: 24px; text-align: right; }
  .demo-metric--wide { display: block; }.demo-metric--wide dd { margin-top: 8px; text-align: left; }
  .demo-table, .demo-table tbody { display: block; }
  .demo-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .demo-table tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 16px; padding: 20px; border-top: 1px solid var(--kbot-border); }
  .demo-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .demo-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--kbot-text-muted); font-size: 13px; }
  .demo-table td:first-child, .demo-table .demo-company, .demo-table .demo-empty { grid-column: 1 / -1; }
  .demo-table .numeric { text-align: left; }
  .demo-table .demo-empty::before { display: none; }
}
@media (min-width: 1200px) { .workflow { min-height: 100svh; } }
@media (max-width: 767px) {
  .landing-section { padding-block: 64px; }
  .section-heading { margin-bottom: 32px; }
  .section-heading p { font-size: 16px; }
  .workflow-steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .workflow-preview { min-height: 192px; padding: 24px; }
  .workflow-step__title { margin-top: 20px; }
  .workflow-benefits { gap: 16px; flex-direction: column; }
}

/* ======================================================== */
/* ESTILOS DEL AVATAR POLAR KBOT EN EL HERO                */
/* ======================================================== */
.avatar-viewport {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: default;
}

.avatar-viewport *,
svg#kbot-hero-canvas,
svg#kbot-hero-canvas * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: default;
}

svg#kbot-hero-canvas text,
svg#kbot-hero-canvas textPath {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.avatar-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none !important;
}

#avatar-eyes-pupils {
    transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes kbotBlink {
    0%, 93%, 100% {
        transform: scaleY(1);
    }
    95%, 97% {
        transform: scaleY(0.08);
    }
}

#avatar-eye-left {
    transform-box: view-box;
    transform-origin: 422.5px 473px;
    animation: kbotBlink 4.4s infinite ease-in-out;
}

#avatar-eye-right {
    transform-box: view-box;
    transform-origin: 577.5px 473px;
    animation: kbotBlink 4.4s infinite ease-in-out;
}

svg#kbot-hero-canvas {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 15px 35px rgba(29, 78, 216, 0.12));
    user-select: none !important;
}

@keyframes botBreathe {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-6px) scale(1.008);
    }
}

.floating-bot-layer {
    animation: botBreathe 4.5s ease-in-out infinite;
    transform-origin: center center;
}

.text-ray {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.text-contour {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.text-visor {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.text-eye {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 900;
    letter-spacing: 0.1em;
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.95)) drop-shadow(0 0 12px rgba(0, 229, 255, 0.45));
}


/* Keep contact context and dismissal available while reviewing a request. */
.contact-dialog { padding: 0; }
.contact-heading { position: sticky; top: 0; z-index: 2; padding: 32px 32px 24px; background: #FFFFFF; border-bottom: 1px solid var(--kbot-border); }
.contact-heading p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--kbot-text-muted); }
.contact-dialog form { padding: 24px 32px; }
.contact-status { margin: 20px 32px; }
#contactPrepared { margin: 24px 32px 32px; }
@media(max-width:767px) { .contact-heading { padding: 24px; }.contact-dialog form { padding: 24px; }.contact-status { margin-inline:24px; }#contactPrepared { margin:24px; } }