/*
 * Shared 2026 hardening for public Zentix routes.
 * Page-specific visual ownership remains in each route bundle.
 */

html {
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: clip;
    scroll-padding-top: 6rem;
}

body {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: clip;
}

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

html[lang="es"] .en,
html[data-language="es"] .en,
html[lang="en"] .es,
html[data-language="en"] .es {
    display: none;
}

img,
svg,
video,
canvas,
iframe {
    max-inline-size: 100%;
}

.skip-link {
    position: fixed;
    inset-block-start: max(0.5rem, env(safe-area-inset-top));
    inset-inline-start: max(0.5rem, env(safe-area-inset-left));
    z-index: 100000;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1rem;
    border: 2px solid #fff;
    border-radius: 0.75rem;
    background: #312e81;
    color: #fff;
    font: 700 0.875rem/1.2 Inter, system-ui, sans-serif;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
    transform: translateY(calc(-100% - 1rem));
    transition: transform 160ms ease;
}

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

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline: 3px solid #818cf8;
    outline-offset: 3px;
}

:where(
    .app-header a,
    .app-header button,
    .app-sidebar a,
    .app-sidebar button,
    .privacy-header a,
    .privacy-header button,
    .terms-header a,
    .terms-header button,
    .privacy-footer a,
    .terms-footer a,
    .kb-header a,
    .kb-header button,
    .kb-ai-badge,
    .kb-back-btn,
    .contact-page a,
    .contact-page button,
    .checkout-page button,
    .checkout-page label.plan-option-content,
    .data-deletion-page a
) {
    min-block-size: 44px;
}

:where(
    .features-footer nav a,
    .blog-footer nav a,
    .footer-column a,
    .footer-bottom a
) {
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
}

.lang-toggle a {
    min-inline-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}

.app-header .options-btn {
    min-inline-size: 44px;
    min-block-size: 44px;
}

.app-sidebar {
    max-inline-size: min(26.25rem, calc(100vw - max(1rem, env(safe-area-inset-left))));
}

html[data-theme="dark"] .app-sidebar {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(8, 13, 24, 0.97);
    color: #e2e8f0;
}

html[data-theme="dark"] .app-sidebar :where(
    .logo-name,
    .sidebar-nav-item,
    .sidebar-item,
    .sidebar-login-link
) {
    color: #e2e8f0;
}

html[data-theme="dark"] .app-sidebar .sidebar-nav-item i {
    color: #c7d2fe;
}

html[data-theme="dark"] .app-sidebar :where(.sidebar-nav-item.is-active, .sidebar-nav-item.active) {
    background: rgba(129, 140, 248, 0.16);
}

html[data-theme="dark"] .app-sidebar :where(.sidebar-section-label, .sidebar-item strong) {
    color: #a7b2c5;
}

html[data-theme="dark"] .app-sidebar :where(.sidebar-close-btn, .sidebar-login-link) {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

@media (min-width: 48.0625rem) and (max-width: 74.9375rem) {
    .app-sidebar {
        inline-size: min(72vw, 23.75rem);
        max-inline-size: min(23.75rem, calc(100vw - 1rem));
    }
}

.header-dropdown {
    max-inline-size: calc(100vw - 2rem);
}

.legal-header-actions,
.pricing-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.public-icon-brand {
    background: rgba(124, 92, 252, 0.15);
    color: #7c5cfc;
}

.public-icon-cyan {
    background: rgba(0, 212, 255, 0.15);
    color: #0891b2;
}

.public-icon-blue {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.public-icon-success {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.public-icon-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.public-icon-orange {
    background: rgba(251, 146, 60, 0.15);
    color: #c2410c;
}

.public-icon-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.public-hero-spaced {
    padding-top: 8.75rem;
}

.pricing-buy-action {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    cursor: pointer;
    font: 700 0.875rem/1.2 var(--font-primary, Inter, system-ui, sans-serif);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.24);
}

.pricing-buy-action.is-agency {
    background: #d97706;
    box-shadow: 0 10px 30px rgba(217, 119, 6, 0.28);
}

.p-section-compact {
    padding-top: 0;
}

.pricing-comparison-heading {
    margin-bottom: 1.125rem;
}

.pricing-check {
    color: #059669;
}

.pricing-footnote {
    margin-top: 1.25rem;
    color: #475569;
    font-size: 0.8125rem;
    text-align: center;
}

.pricing-actions {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    gap: 0.75rem;
}

.contact-availability {
    margin-top: 0.25rem;
    color: var(--success-color, #047857);
    font-size: 0.75rem;
    font-weight: 600;
}

.form-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.auth-logo-link {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}

.facebook-btn {
    margin-top: 0.5rem;
    border-color: rgba(24, 119, 242, 0.2);
    background: rgba(24, 119, 242, 0.08);
}

.facebook-btn .fa-facebook-f {
    width: 1.125rem;
    height: 1.125rem;
    color: #1877f2;
    font-size: 1.125rem;
}

.checkout-logo-image {
    height: 2.125rem;
    border-radius: 0.5625rem;
}

.checkout-brand-link {
    background: var(--gradient-primary);
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

.secure-note.is-compact {
    margin: 0;
}

.kb-category-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 1.375rem;
}

.kb-theme-btn {
    min-inline-size: 44px;
}

.kb-cat-icon,
.kb-category-heading-icon {
    background: color-mix(in srgb, var(--kb-accent, #6366f1) 10%, transparent);
    color: var(--kb-accent, #6366f1);
}

.kb-category-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    font-size: 1rem;
}

.kb-categories[hidden],
.kb-articles[hidden],
.kb-cat-card[hidden] {
    display: none;
}

.public-scroll-region {
    position: relative;
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

/*
 * The marketing assistant ships a tiny usable launcher with the page.
 * Its full conversation surface and stylesheet are loaded together on intent.
 */
.public-assistant-scope {
    display: contents;
}

.public-assistant-scope .chatbot-persistent {
    position: fixed;
    inset-inline-end: max(1.25rem, env(safe-area-inset-right));
    inset-block-end: max(1.125rem, env(safe-area-inset-bottom));
    z-index: 900;
    inline-size: min(13.75rem, calc(100vw - 2.5rem));
    margin: 0;
    transition: opacity 160ms ease, transform 160ms ease;
}

.public-assistant-scope .chatbot-persistent.is-hero-suppressed {
    opacity: 0;
    pointer-events: none;
    transform: translateY(1rem);
}

.public-assistant-scope .chatbot-launcher {
    inline-size: 100%;
    min-block-size: 60px;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.5625rem 0.4375rem 0.4375rem;
    overflow: hidden;
    border: 1px solid rgba(188, 176, 255, 0.52);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, #745eea, #4d64dc 62%, #3e53c6);
    color: #fff;
    box-shadow: 0 18px 48px rgba(58, 46, 158, 0.4);
    cursor: pointer;
    font-family: var(--font-primary, Inter, system-ui, sans-serif);
}

.public-assistant-scope .chatbot-launcher-mark {
    inline-size: 44px;
    block-size: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.13);
}

.public-assistant-scope .chatbot-launcher-copy {
    min-inline-size: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1875rem;
    text-align: start;
}

.public-assistant-scope .chatbot-launcher-copy strong,
.public-assistant-scope .chatbot-launcher-copy small {
    max-inline-size: 100%;
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-assistant-scope .chatbot-launcher-copy strong {
    font-size: 0.8125rem;
    line-height: 1.1;
}

.public-assistant-scope .chatbot-launcher-copy small {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.65625rem;
    opacity: 0.82;
}

.public-assistant-scope .chatbot-launcher-status {
    inline-size: 0.375rem;
    block-size: 0.375rem;
    flex: 0 0 0.375rem;
    border-radius: 999px;
    background: #64e8aa;
}

.public-assistant-scope .chatbot-launcher-action {
    inline-size: 28px;
    block-size: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 0.625rem;
    background: rgba(9, 14, 52, 0.18);
}

.public-assistant-scope .chatbot-persistent.chatbot-collapsed :where(
    .chatbot-input-wrapper,
    .chatbot-messages-panel
) {
    display: none;
}

:where(.kb-ai-badge, .kb-cat-card, .kb-article-header) {
    appearance: none;
    inline-size: 100%;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: start;
}

@media (max-width: 30rem) {
    .public-assistant-scope .chatbot-persistent {
        inset-inline: 0.75rem;
        inline-size: auto;
        max-inline-size: 13.75rem;
        margin-inline-start: auto;
    }

    .privacy-header .header-inner,
    .terms-header .header-inner {
        gap: 0.5rem;
        padding-inline: 0.75rem;
    }

    .privacy-content,
    .terms-content {
        inline-size: 100%;
        padding-inline: 0.75rem;
    }

    .privacy-section,
    .terms-section,
    .toc {
        min-inline-size: 0;
        padding: 1.1rem;
        overflow-wrap: anywhere;
    }

    .data-deletion-page {
        padding-inline: 0.75rem;
    }

    .data-deletion-page .card {
        inline-size: 100%;
        min-inline-size: 0;
        padding: 1.25rem;
    }

    .checkout-page {
        padding-inline: 0.75rem;
    }

    .checkout-wrapper,
    .checkout-grid,
    .plan-selector,
    .order-summary {
        min-inline-size: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
        outline: 2px solid CanvasText;
    }

    .skip-link {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}