/* Generado por `manage.py build_css`. No editar a mano:
   los cambios van en static/css/components/*.css. */
/* components/variables.css */
:root {
    
    --exp-paper: #f4f2ec;
    --exp-ink: #12130f;
    --exp-ink-70: #4f4c44;
    --exp-ink-45: #8a8579;

    
    --exp-rule: rgba(18, 19, 15, 0.16);
    --exp-grid: rgba(18, 19, 15, 0.05);

    
    --exp-lime: #c9f24d;
    --exp-live: #3f9d3d;

    
    --exp-paper-60: rgba(244, 242, 236, 0.6);
    --exp-paper-45: rgba(244, 242, 236, 0.45);
    --exp-paper-20: rgba(244, 242, 236, 0.2);

    
    --exp-shadow-menu: 0 24px 40px -24px rgba(18, 19, 15, 0.35);

    
    --exp-font-display: 'Archivo', sans-serif;
    --exp-font-serif: 'Instrument Serif', Georgia, serif;
    --exp-font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --exp-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

    
    --exp-transition-fast: 0.15s ease;
    --exp-transition: 0.3s ease;

    
    --exp-navbar-height: 48px;

    
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-pill: 0;

    
    --bs-dark-rgb: 18, 19, 15;
    --bs-light-rgb: 244, 242, 236;
    --bs-body-bg: #f4f2ec;
    --bs-body-color: #12130f;
    --bs-secondary-color: rgba(18, 19, 15, 0.55);
    --bs-border-color: rgba(18, 19, 15, 0.16);

    
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
    --bs-box-shadow-inset: none;

    
    --bs-code-color: var(--exp-ink);
    --bs-font-monospace: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* components/base.css */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--exp-navbar-height);
}

body {
    font-family: var(--exp-font-sans);
    line-height: 1.6;
    color: var(--exp-ink);
    background-color: var(--exp-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    color: var(--exp-ink-70);
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--exp-font-serif);
    font-weight: 400;
    color: var(--exp-ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

::selection {
    background: var(--exp-ink);
    color: var(--exp-paper);
}

:focus-visible {
    outline: 2px solid var(--exp-ink);
    outline-offset: 2px;
}

.breadcrumb {
    font-family: var(--exp-font-mono);
}

.breadcrumb-item a {
    color: var(--exp-ink);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--exp-ink-45);
}

/* components/navbar.css */
.navbar-glass {
    background: var(--exp-paper);
    border-bottom: 1px solid var(--exp-rule);
}

.navbar-glass > .container {
    position: relative;
}

.navbar-glass .navbar-brand {
    margin: 0.25rem 0;
}

.navbar-glass .navbar-nav {
    gap: 1.25rem;
}

.navbar-glass .nav-link {
    color: var(--exp-ink);
    font-family: var(--exp-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: lowercase;
    padding: 0.5rem 0.25rem !important;
    transition: none;
}

@media (min-width: 992px) {
    .navbar-glass .nav-link::before {
        content: "/" / "";
    }
}

.navbar-glass .nav-link:hover {
    color: var(--exp-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

.nav-chevron {
    font-size: 0.5rem;
    margin-left: 0.25rem;
    vertical-align: 1px;
    transition: transform var(--exp-transition-fast);
}

.nav-item-mega:hover .nav-chevron {
    transform: rotate(180deg);
}

.nav-item-mega {
    position: static;
}

.nav-item-mega > .nav-link {
    padding-bottom: 2.5rem !important;
    margin-bottom: -2rem;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--exp-paper);
    border: 1px solid var(--exp-rule);
    box-shadow: var(--exp-shadow-menu);
    border-radius: 0;
    margin-top: 1rem;
    padding: 2rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s;
    pointer-events: none;
    z-index: 100;
}

.nav-item-mega:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-menu-heading {
    font-family: var(--exp-font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--exp-ink-45);
    margin-bottom: 1rem;
    padding-left: 0.75rem;
}

.mega-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0;
    text-decoration: none;
    color: var(--exp-ink);
    transition: background var(--exp-transition-fast);
}

.mega-menu-item:hover {
    background: rgba(18, 19, 15, 0.04);
    color: var(--exp-ink);
}

.mega-menu-icon {
    font-size: 0.8125rem;
    color: var(--exp-ink);
    width: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.mega-menu-title {
    display: block;
    font-family: var(--exp-font-serif);
    font-size: 1.1875rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--exp-ink);
}

.mega-menu-desc {
    display: block;
    font-family: var(--exp-font-sans);
    font-size: 0.75rem;
    color: var(--exp-ink-70);
    line-height: 1.5;
    margin-top: 0.15rem;
}

.mega-menu-dark {
    background: var(--exp-ink);
    border-color: var(--exp-ink);
    box-shadow: 0 24px 40px -24px rgba(18, 19, 15, 0.5);
}

.mega-menu-dark .mega-menu-heading {
    color: var(--exp-lime);
}

.mega-menu-dark .mega-menu-item,
.mega-menu-dark .mega-menu-title {
    color: var(--exp-paper);
}

.mega-menu-dark .mega-menu-desc {
    color: var(--exp-paper-60);
}

.mega-menu-dark .mega-menu-item:hover {
    background: rgba(244, 242, 236, 0.06);
}

.mega-menu-step-num {
    font-family: var(--exp-font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--exp-lime);
    flex-shrink: 0;
    margin-top: 0.3rem;
    min-width: 1.5rem;
}

.navbar-glass .navbar-toggler {
    border: none;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
}

@media (min-width: 992px) {
    .navbar-glass .navbar-toggler {
        display: none;
    }
}

.navbar-glass .navbar-toggler:focus {
    box-shadow: none;
}

.navbar-glass .toggler-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--exp-ink);
    transition: transform var(--exp-transition), opacity var(--exp-transition);
}

.navbar-glass .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.navbar-glass .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) {
    transform: translateY(-5px) rotate(-45deg);
}

.navbar-glass.navbar-scrolled {
    background: var(--exp-paper);
}

.mega-menu-item-compact {
    padding: 0.375rem 0.875rem;
    align-items: center;
    border: 1px solid rgba(18, 19, 15, 0.2);
    gap: 0.5rem;
}

.mega-menu-item-compact:hover {
    background: var(--exp-ink);
}

.mega-menu-item-compact:hover .mega-menu-title,
.mega-menu-item-compact:hover .mega-menu-icon {
    color: var(--exp-paper);
}

.mega-menu-item-compact .mega-menu-icon {
    font-size: 0.75rem;
    margin-top: 0;
}

.mega-menu-item-compact .mega-menu-title {
    font-family: var(--exp-font-sans);
    font-size: 0.78125rem;
}

/* components/hero.css */
.hero {
    background: var(--exp-paper);
    padding: calc(var(--exp-navbar-height) + 4.5rem) 0 4.5rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--exp-rule);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--exp-grid) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.page-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--exp-navbar-height) + 4rem);
    padding-bottom: 4rem;
    background: var(--exp-paper);
    border-bottom: 1px solid var(--exp-rule);
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--exp-grid) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%;
    pointer-events: none;
}

.hero h1 {
    color: var(--exp-ink);
    font-family: var(--exp-font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 3.875rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.hero h1 em {
    font-family: var(--exp-font-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 1.3em;
    letter-spacing: -0.02em;
    line-height: 0.95;
    color: var(--exp-ink);
}

.hero p {
    color: var(--exp-ink-70);
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.0625rem);
    line-height: 1.65;
    max-width: 580px;
}

.hero p strong {
    color: var(--exp-ink);
    font-weight: 500;
}

.exp-badge {
    display: inline-block;
    padding: 0.3125rem 0.625rem;
    font-family: var(--exp-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--exp-ink);
    border: 1px solid rgba(18, 19, 15, 0.3);
    border-radius: 0;
}

.exp-badge-light,
.exp-badge-primary,
.exp-badge-secondary {
    background: transparent;
    color: var(--exp-ink);
}

.exp-section-dark .exp-badge,
.exp-section-cta .exp-badge,
.bg-ink .exp-badge {
    color: var(--exp-paper-60);
    border-color: rgba(244, 242, 236, 0.3);
}

/* components/buttons.css */
.btn-ink,
.btn-lime,
.btn-outline-ink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: var(--exp-font-mono);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 0.9375rem 1.75rem;
    border: 1px solid var(--exp-ink);
    border-radius: 0;
    transition: background var(--exp-transition-fast), color var(--exp-transition-fast), border-color var(--exp-transition-fast);
}

.btn-ink {
    background: var(--exp-ink);
    color: var(--exp-paper);
}

.btn-ink:hover {
    background: transparent;
    color: var(--exp-ink);
    border-color: var(--exp-ink);
}

.btn-lime {
    background: var(--exp-lime);
    color: var(--exp-ink);
    border-color: var(--exp-lime);
}

.btn-lime:hover,
.btn-lime:focus {
    background: var(--exp-paper);
    color: var(--exp-ink);
    border-color: var(--exp-paper);
}

.btn-outline-ink {
    background: transparent;
    color: var(--exp-ink);
}

.btn-outline-ink:hover {
    background: var(--exp-ink);
    color: var(--exp-paper);
    border-color: var(--exp-ink);
}

.link-underline {
    color: var(--exp-ink);
    font-family: var(--exp-font-sans);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(18, 19, 15, 0.3);
    transition: border-color var(--exp-transition-fast);
}

.link-underline:hover {
    color: var(--exp-ink);
    border-bottom-color: var(--exp-ink);
}

.btn-ink:disabled,
.btn-ink.disabled,
.btn-lime:disabled,
.btn-lime.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-ink:disabled:hover,
.btn-ink.disabled:hover {
    background: var(--exp-ink);
    color: var(--exp-paper);
}

.btn-primary {
    --bs-btn-color: var(--exp-paper);
    --bs-btn-bg: var(--exp-ink);
    --bs-btn-border-color: var(--exp-ink);
    --bs-btn-hover-color: var(--exp-ink);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--exp-ink);
    --bs-btn-active-color: var(--exp-paper);
    --bs-btn-active-bg: var(--exp-ink);
    --bs-btn-active-border-color: var(--exp-ink);
    --bs-btn-disabled-color: var(--exp-paper);
    --bs-btn-disabled-bg: var(--exp-ink);
    --bs-btn-disabled-border-color: var(--exp-ink);
    --bs-btn-focus-shadow-rgb: 18, 19, 15;
    font-family: var(--exp-font-mono);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.btn-ink-lg {
    padding: 1.125rem 2.5rem;
    font-size: 0.9375rem;
}

.btn-ink-sm {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

.btn-navbar-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: var(--exp-font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 0.625rem 1.125rem;
    border: 1px solid var(--exp-ink);
    border-radius: 0;
    background: var(--exp-ink);
    color: var(--exp-paper);
    transition: background var(--exp-transition-fast), color var(--exp-transition-fast);
}

.btn-navbar-cta:hover {
    background: transparent;
    color: var(--exp-ink);
    border-color: var(--exp-ink);
}

/* components/sections.css */
.exp-section {
    padding: 4.5rem 0;
}

.exp-section-lg {
    padding: 6rem 0;
}

.exp-section-gray {
    background-color: var(--exp-paper);
    border-top: 1px solid var(--exp-rule);
    border-bottom: 1px solid var(--exp-rule);
}

.exp-section-dark,
.exp-section-cta,
.exp-section-footer {
    background: var(--exp-ink);
    color: var(--exp-paper-60);
}

.exp-section-dark h1, .exp-section-dark h2, .exp-section-dark h3,
.exp-section-cta h1, .exp-section-cta h2, .exp-section-cta h3 {
    color: var(--exp-paper);
}

.exp-section-dark :focus-visible,
.exp-section-cta :focus-visible,
.exp-section-footer :focus-visible {
    outline-color: var(--exp-lime);
}

.exp-section-title {
    font-family: var(--exp-font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin-bottom: 1rem;
}

.exp-section-title em {
    font-family: var(--exp-font-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 1.16em;
    letter-spacing: -0.02em;
    line-height: 1;
    color: inherit;
}

.exp-section-subtitle {
    font-size: 1rem;
    color: var(--exp-ink-70);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--exp-rule);
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-color: var(--exp-ink);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: rgba(18, 19, 15, 0.04);
    --bs-accordion-active-color: var(--exp-ink);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 2px var(--exp-ink);
}

.accordion-button {
    font-family: var(--exp-font-serif);
    font-size: 1.1875rem;
    letter-spacing: -0.01em;
}

.accordion-button::after {
    filter: grayscale(1);
}

.accordion-body {
    color: var(--exp-ink-70);
    font-size: 0.9375rem;
}

.exp-section-dark .exp-section-subtitle,
.exp-section-cta .exp-section-subtitle {
    color: var(--exp-paper-60);
}

/* components/cards.css */
.exp-card {
    background: transparent;
    border: none;
    border-top: 1px solid var(--exp-rule);
    border-radius: 0;
    padding: 1.375rem 1.25rem 1.375rem 0;
    transition: background var(--exp-transition-fast);
    height: 100%;
}

a .exp-card:hover,
a:hover .exp-card {
    background: rgba(18, 19, 15, 0.04);
}

.exp-icon-circle {
    width: auto;
    min-width: 0;
    height: auto;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
    background: transparent;
    color: var(--exp-ink);
}

.exp-icon-circle.icon-purple,
.exp-icon-circle.icon-cyan {
    background: transparent;
    color: var(--exp-ink);
}

.exp-card-title {
    font-family: var(--exp-font-serif);
    font-size: 1.4375rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
    color: var(--exp-ink);
}

.exp-card-text {
    font-size: 0.84375rem;
    color: var(--exp-ink-70);
    line-height: 1.6;
    margin-bottom: 0;
}

.case-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
}

/* components/steps.css */
.step-card {
    text-align: left;
    padding: 1.5rem 1.25rem 1.5rem 0;
    position: relative;
    border-top: 2px solid var(--exp-lime);
    height: 100%;
}

.step-number {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--exp-lime);
    font-family: var(--exp-font-mono);
    font-size: 1rem;
    font-weight: 500;
    display: block;
    margin: 0 0 1rem;
    box-shadow: none;
}

.step-card h3 {
    font-family: var(--exp-font-serif);
    font-size: 1.4375rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
    color: var(--exp-paper);
}

.step-card p {
    font-size: 0.84375rem;
    color: var(--exp-paper-60);
    line-height: 1.6;
}

/* components/features.css */
.feature-block {
    padding: 3rem 0;
    border-top: 1px solid var(--exp-rule);
}

.feature-block:first-child {
    border-top: none;
}

.feature-visual {
    background: var(--exp-ink);
    border-radius: 0;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.feature-visual-icon {
    font-size: 5rem;
    color: var(--exp-paper);
    opacity: 0.08;
    position: absolute;
}

.feature-visual-card {
    background: transparent;
    border: 1px solid rgba(244, 242, 236, 0.16);
    border-radius: 0;
    padding: 1.5rem;
    box-shadow: none;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 320px;
}

.feature-visual-card .code-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.8125rem;
    font-family: var(--exp-font-mono);
    color: var(--exp-paper-60);
}

.feature-visual-card .code-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--exp-lime) !important;
}

.feature-check-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.feature-check-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    color: var(--exp-ink-70);
    border-top: 1px solid var(--exp-rule);
}

.feature-check-list li:first-child {
    border-top: none;
}

.feature-check-list li i {
    color: var(--exp-ink);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

/* components/blog.css */
.blog-card {
    background: transparent;
    border: none;
    border-top: 1px solid var(--exp-rule);
    border-radius: 0;
    overflow: hidden;
    transition: background var(--exp-transition-fast);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    background: rgba(18, 19, 15, 0.04);
}

.blog-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-top: 1.25rem;
}

.blog-card-body {
    padding: 1.25rem 1.25rem 1.25rem 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pagination .page-link {
    font-family: var(--exp-font-mono);
    font-size: 0.75rem;
    color: var(--exp-ink);
    background: transparent;
    border-color: var(--exp-rule);
    border-radius: 0;
}

.pagination .page-link:hover {
    background: rgba(18, 19, 15, 0.04);
    color: var(--exp-ink);
}

.pagination .page-item.disabled .page-link {
    color: var(--exp-ink-45);
    background: transparent;
    border-color: var(--exp-rule);
}

.blog-empty {
    padding: 3rem 1.5rem;
    border-top: 1px solid var(--exp-rule);
    border-bottom: 1px solid var(--exp-rule);
}

.blog-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border: 1px solid var(--exp-rule);
    background: transparent;
    color: var(--exp-ink);
    font-size: 1.4rem;
}

.blog-empty .btn-outline-ink {
    padding: 0.7rem 1.6rem;
    font-size: 0.8125rem;
}

/* components/lead-forms.css */
.hero-form-collapse {
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-top: 2rem;
    background: var(--exp-paper);
    border: 1px solid var(--exp-rule);
    border-radius: 0;
    box-shadow: none;
    padding: 2.5rem 2rem;
}

.lead-form-container {
    max-width: 640px;
    margin: 0 auto;
}

.lead-form-group {
    border: none;
    padding: 0;
    margin: 0 0 2rem;
}

.lead-form-group-title {
    font-family: var(--exp-font-serif);
    font-size: 1.4375rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--exp-ink);
    margin-bottom: 0.5rem;
}

.lead-form-group-desc {
    font-family: var(--exp-font-sans);
    font-size: 0.875rem;
    color: var(--exp-ink-70);
    margin-bottom: 1.5rem;
}

.lead-form-field {
    margin-bottom: 1.25rem;
    transition: opacity var(--exp-transition), max-height var(--exp-transition);
}

.lead-form-label {
    display: block;
    font-family: var(--exp-font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--exp-ink);
    margin-bottom: 0.4rem;
    text-align: left;
}

.lead-form-required {
    color: var(--exp-ink);
    margin-left: 0.15rem;
}

.lead-form-input,
.lead-form-textarea,
.lead-form-select {
    display: block;
    width: 100%;
    padding: 0.625rem 0;
    font-family: var(--exp-font-sans);
    font-size: 0.9375rem;
    color: var(--exp-ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(18, 19, 15, 0.3);
    border-radius: 0;
    transition: border-color var(--exp-transition-fast);
    outline: none;
}

.lead-form-input:focus,
.lead-form-textarea:focus,
.lead-form-select:focus {
    border-bottom-color: var(--exp-ink);
    box-shadow: none;
}

.lead-form-input::placeholder,
.lead-form-textarea::placeholder {
    color: var(--exp-ink-45);
}

.lead-form-input-error {
    border-bottom-color: #ef4444;
}

.lead-form-textarea {
    resize: vertical;
    min-height: 100px;
}

.lead-form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: left;
}

.lead-form-checkbox,
.lead-form-radio-input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--exp-ink);
    cursor: pointer;
    flex-shrink: 0;
}

.lead-form-check-label,
.lead-form-radio-label {
    font-family: var(--exp-font-sans);
    font-size: 0.875rem;
    color: var(--exp-ink-70);
    cursor: pointer;
}

.lead-form-radio-group,
.lead-form-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lead-form-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lead-form-help {
    display: block;
    font-family: var(--exp-font-sans);
    font-size: 0.78125rem;
    color: var(--exp-ink-45);
    margin-top: 0.3rem;
    text-align: left;
}

.lead-form-error {
    font-size: 0.78125rem;
    color: #ef4444;
    margin-top: 0.3rem;
    min-height: 0;
    text-align: left;
}

.lead-form-error:empty {
    display: none;
}

.lead-form-error-summary {
    font-family: var(--exp-font-sans);
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #b91c1c;
    padding: 0.75rem 1rem;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}

.lead-form-actions {
    margin-top: 2rem;
}

.lead-form-success {
    text-align: center;
    padding: 3rem 1rem;
}

.lead-form-success-icon {
    font-size: 2rem;
    color: var(--exp-ink);
    margin-bottom: 1rem;
}

.diagnostic .lead-form-success-icon {
    color: var(--exp-lime);
}

.lead-form-success-title {
    font-family: var(--exp-font-serif);
    font-size: 1.4375rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.lead-form-success-message {
    font-family: var(--exp-font-sans);
    font-size: 0.9375rem;
    color: var(--exp-ink-70);
}

.diagnostic .lead-form-success-message {
    color: var(--exp-paper-60);
}

.lead-form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lead-form-consent {
    margin-top: 1.25rem;
    text-align: left;
}

.lead-form-consent .lead-form-check-label {
    font-size: 0.875rem;
    line-height: 1.5;
}

.lead-form-consent a {
    color: var(--exp-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lead-form-privacy-note {
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--exp-ink-45);
    text-align: left;
}

.lead-form-privacy-note a {
    color: inherit;
    text-decoration: underline;
}

/* components/diagnostic.css */
.diagnostic {
    background: var(--exp-ink);
    border: 1px solid var(--exp-ink);
    text-align: left;
}

.diagnostic-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-family: var(--exp-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--exp-paper-45);
}

.diagnostic-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--exp-lime);
    flex-shrink: 0;
}

.diagnostic-form {
    padding: 22px 20px;
}

.diagnostic-question {
    font-family: var(--exp-font-mono);
    font-size: 0.8125rem;
    color: rgba(244, 242, 236, 0.55);
    margin-bottom: 14px;
}

.diagnostic-cursor {
    display: inline-block;
    width: 7px;
    height: 14px;
    background: var(--exp-lime);
    margin-left: 4px;
    vertical-align: -2px;
    animation: blink 1s step-end infinite;
}

.diagnostic-desc {
    font-size: 0.78125rem;
    color: var(--exp-paper-45);
    margin-bottom: 14px;
}

.diagnostic .lead-form-field {
    margin-bottom: 1rem;
}

.diagnostic .lead-form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--exp-paper-60);
    margin-bottom: 0.5rem;
}

.diagnostic .lead-form-required {
    color: var(--exp-lime);
}

.diagnostic .lead-form-input,
.diagnostic .lead-form-textarea,
.diagnostic .lead-form-select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(244, 242, 236, 0.3);
    border-radius: 0;
    padding: 0.5rem 0;
    font-family: var(--exp-font-sans);
    font-size: 0.9375rem;
    color: var(--exp-paper);
    outline: none;
}

.diagnostic .lead-form-input:focus,
.diagnostic .lead-form-textarea:focus,
.diagnostic .lead-form-select:focus {
    border-bottom-color: var(--exp-lime);
}

.diagnostic .lead-form-select option {
    background: var(--exp-ink);
    color: var(--exp-paper);
}

.diagnostic .lead-form-input::placeholder,
.diagnostic .lead-form-textarea::placeholder {
    color: rgba(244, 242, 236, 0.35);
}

.diagnostic .lead-form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: diagnostic-option;
}

.diagnostic .lead-form-radio {
    counter-increment: diagnostic-option;
}

.diagnostic .lead-form-radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.diagnostic .lead-form-radio-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 12px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(244, 242, 236, 0.72);
    cursor: pointer;
    transition: border-color var(--exp-transition-fast), background var(--exp-transition-fast);
}

.diagnostic .lead-form-radio-label::after {
    content: counter(diagnostic-option);
    font-family: var(--exp-font-mono);
    color: rgba(244, 242, 236, 0.4);
}

.diagnostic .lead-form-radio-label:hover {
    border-color: rgba(244, 242, 236, 0.4);
}

.diagnostic .lead-form-radio-input:checked + .lead-form-radio-label {
    border-color: rgba(201, 242, 77, 0.55);
    background: rgba(201, 242, 77, 0.1);
    color: var(--exp-paper);
}

.diagnostic .lead-form-radio-input:checked + .lead-form-radio-label::after {
    color: var(--exp-lime);
}

.diagnostic .lead-form-radio-input:focus-visible + .lead-form-radio-label {
    outline: 2px solid var(--exp-lime);
    outline-offset: 2px;
}

.diagnostic .lead-form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.diagnostic .lead-form-checkbox {
    accent-color: var(--exp-lime);
    margin-top: 0.2rem;
}

.diagnostic .lead-form-check-label {
    font-size: 0.75rem;
    color: var(--exp-paper-60);
}

.diagnostic .lead-form-check-label a,
.diagnostic .lead-form-privacy-note a {
    color: var(--exp-paper);
}

.diagnostic .lead-form-help {
    display: block;
    font-size: 0.71875rem;
    color: var(--exp-paper-45);
    margin-top: 0.25rem;
}

.diagnostic .lead-form-error {
    font-size: 0.75rem;
    color: #f87171;
    margin-top: 0.25rem;
    min-height: 0;
}

.diagnostic .lead-form-input-error {
    border-bottom-color: #f87171;
}

.diagnostic .lead-form-privacy-note {
    font-size: 0.71875rem;
    line-height: 1.5;
    color: var(--exp-paper-45);
    margin: 0.75rem 0 0;
}

.diagnostic-submit {
    display: block;
    width: 100%;
    margin-top: 20px;
    cursor: pointer;
}

.diagnostic-progress {
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    margin-top: 20px;
}

.diagnostic-progress-fill {
    height: 2px;
    background: var(--exp-lime);
}

.diagnostic .lead-form-success,
.diagnostic .lead-form-throttled {
    padding: 22px 20px;
    color: var(--exp-paper);
}

.diagnostic .lead-form-success p,
.diagnostic .lead-form-throttled p {
    color: var(--exp-paper-60);
}

/* components/app-shell.css */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--exp-paper);
    position: relative;
    padding: 2rem 1rem;
}

.auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--exp-grid) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%;
    pointer-events: none;
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--exp-paper);
    border: 1px solid var(--exp-rule);
    padding: 2.5rem 2rem;
}

.auth-logo {
    display: block;
    margin: 0 auto 1.5rem;
}

.auth-title {
    font-family: var(--exp-font-serif);
    font-size: 1.4375rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--exp-ink);
    margin-bottom: 1.5rem;
}

.auth-card p {
    font-size: 0.9375rem;
}

.auth-card form p {
    margin-bottom: 1rem;
}

.auth-card form p label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--exp-ink);
    margin-bottom: 0.4rem;
}

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
    display: block;
    width: 100%;
    padding: 0.625rem 0;
    font-family: var(--exp-font-sans);
    font-size: 0.9375rem;
    color: var(--exp-ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(18, 19, 15, 0.3);
    border-radius: 0;
    outline: none;
    transition: border-color var(--exp-transition-fast);
}

.auth-card input[type="text"]:focus,
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus {
    border-bottom-color: var(--exp-ink);
}

.auth-card .helptext,
.auth-card .helptext li {
    font-size: 0.75rem;
    color: var(--exp-ink-45);
}

.auth-card .errorlist {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    font-size: 0.78125rem;
    color: #ef4444;
}

.auth-actions {
    margin-top: 1.5rem;
    display: grid;
}

.navbar.bg-dark {
    border-bottom: 1px solid var(--exp-paper-20);
}

.navbar.bg-dark .navbar-brand {
    font-family: var(--exp-font-mono);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--exp-paper);
}

.navbar.bg-dark .nav-link {
    font-family: var(--exp-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--exp-paper-60);
}

.navbar.bg-dark .nav-link:hover,
.navbar.bg-dark .nav-link.active {
    color: var(--exp-paper);
}

.navbar.bg-dark :focus-visible {
    outline-color: var(--exp-lime);
}

.card {
    --bs-card-bg: transparent;
    --bs-card-border-color: var(--exp-rule);
    --bs-card-border-radius: 0;
    --bs-card-cap-bg: transparent;
}

.card .card-title {
    font-family: var(--exp-font-serif);
    font-weight: 400;
    letter-spacing: -0.01em;
}

.card .card-subtitle {
    font-family: var(--exp-font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--exp-ink-45);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--exp-ink);
    --bs-table-border-color: var(--exp-rule);
}

.table thead th {
    font-family: var(--exp-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--exp-ink-45);
    border-bottom: 1px solid var(--exp-ink);
}

.btn-secondary {
    --bs-btn-color: var(--exp-paper);
    --bs-btn-bg: var(--exp-ink-70);
    --bs-btn-border-color: var(--exp-ink-70);
    --bs-btn-hover-color: var(--exp-paper);
    --bs-btn-hover-bg: var(--exp-ink);
    --bs-btn-hover-border-color: var(--exp-ink);
    --bs-btn-active-color: var(--exp-paper);
    --bs-btn-active-bg: var(--exp-ink);
    --bs-btn-active-border-color: var(--exp-ink);
}

.btn-outline-secondary,
.btn-outline-dark {
    --bs-btn-color: var(--exp-ink);
    --bs-btn-border-color: rgba(18, 19, 15, 0.3);
    --bs-btn-hover-color: var(--exp-paper);
    --bs-btn-hover-bg: var(--exp-ink);
    --bs-btn-hover-border-color: var(--exp-ink);
    --bs-btn-active-color: var(--exp-paper);
    --bs-btn-active-bg: var(--exp-ink);
    --bs-btn-active-border-color: var(--exp-ink);
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--exp-ink);
}

.form-control,
.form-select {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(18, 19, 15, 0.3);
    border-radius: 0;
    padding-left: 0;
    color: var(--exp-ink);
    font-family: var(--exp-font-sans);
}

.form-control:focus,
.form-select:focus {
    background-color: transparent;
    border-bottom-color: var(--exp-ink);
    box-shadow: none;
    color: var(--exp-ink);
}

.form-control::placeholder {
    color: var(--exp-ink-45);
}

.form-control.is-invalid {
    border-bottom-color: #ef4444;
    background-image: none;
}

/* components/cta.css */
.exp-section-cta h2 {
    color: var(--exp-paper);
}

.exp-section-cta p {
    color: var(--exp-paper-60);
    font-size: 1rem;
}

#contacto h2 {
    font-size: clamp(2rem, 4vw, 2.875rem);
}

/* components/footer.css */
.footer-slogan {
    font-family: var(--exp-font-serif);
    font-size: 1.375rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--exp-paper);
    margin: 1rem 0 0.25rem;
}

.footer-slogan em {
    font-style: italic;
}

.footer-tagline {
    font-size: 0.875rem;
    color: var(--exp-paper-60);
    margin-top: 0;
}

.footer-heading {
    font-family: var(--exp-font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--exp-paper-45);
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--exp-paper-60);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color var(--exp-transition-fast);
}

.footer-links a:hover {
    color: var(--exp-paper);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.footer-social a {
    color: var(--exp-paper-60);
    font-size: 1.1rem;
    transition: color var(--exp-transition-fast);
}

.footer-social a:hover {
    color: var(--exp-paper);
}

.footer-bottom {
    border-top: 1px solid var(--exp-paper-20);
    padding-top: 1.5rem;
    margin-top: 3rem;
    font-family: var(--exp-font-mono);
    font-size: 0.71875rem;
    color: var(--exp-paper-45);
}

.footer-bottom p {
    color: var(--exp-paper-45);
}

.footer-legal-links {
    margin-top: 0.5rem;
}

.footer-legal-links a {
    color: inherit;
    text-decoration: none;
}

.footer-legal-links a:hover {
    color: var(--exp-paper);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-legal-links span {
    margin: 0 0.4rem;
}

/* components/legal.css */
.legal-updated {
    font-family: var(--exp-font-mono);
    font-size: 0.75rem;
    color: var(--exp-ink-45);
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.legal-prose {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--exp-ink-70);
}

.legal-prose h2 {
    font-family: var(--exp-font-serif);
    font-size: 1.625rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--exp-ink);
    margin-top: 2.5rem;
    margin-bottom: 0.9rem;
}

.legal-prose h2:first-child {
    margin-top: 0;
}

.legal-prose h3 {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--exp-ink);
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
}

.legal-prose p,
.legal-prose ul,
.legal-prose ol {
    margin-bottom: 1.1rem;
}

.legal-prose ul,
.legal-prose ol {
    padding-left: 1.35rem;
}

.legal-prose li {
    margin-bottom: 0.45rem;
}

.legal-prose a {
    color: var(--exp-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-prose dl {
    margin-bottom: 1.1rem;
}

.legal-prose dt {
    font-weight: 500;
    color: var(--exp-ink);
}

.legal-prose dd {
    margin: 0 0 0.75rem 0;
}

.legal-table-wrapper {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.legal-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.legal-table th,
.legal-table td {
    text-align: left;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--exp-rule);
    vertical-align: top;
}

.legal-table th {
    font-family: var(--exp-font-mono);
    font-size: 0.71875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--exp-ink-45);
    background: transparent;
    border-bottom: 1px solid var(--exp-ink);
}

.legal-warning {
    border: 1px solid rgba(18, 19, 15, 0.3);
    background: rgba(18, 19, 15, 0.04);
    border-radius: 0;
    padding: 1rem 1.2rem;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.legal-warning code {
    font-family: var(--exp-font-mono);
    font-size: 0.85em;
    background: rgba(18, 19, 15, 0.06);
    padding: 0.1em 0.35em;
    border-radius: 0;
}

/* components/cookie-banner.css */
.cookie-banner {
    position: fixed;
    z-index: 1080;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: 640px;
    margin: 0 auto;
    background: var(--exp-ink);
    color: var(--exp-paper);
    border: 1px solid var(--exp-ink);
    border-radius: 0;
    box-shadow: none;
    padding: 1.25rem 1.4rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--exp-transition), transform var(--exp-transition);
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner-title {
    font-family: var(--exp-font-serif);
    font-size: 1.1875rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0 0 0.4rem;
}

.cookie-banner-text p {
    font-size: 0.84375rem;
    line-height: 1.55;
    margin: 0;
    color: var(--exp-paper-60);
}

.cookie-banner-text a {
    color: var(--exp-lime);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-banner-options {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cookie-banner-options[hidden] {
    display: none;
}

.cookie-option {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--exp-paper-60);
    cursor: pointer;
}

.cookie-option input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
    accent-color: var(--exp-lime);
}

.cookie-option strong {
    display: block;
    color: var(--exp-paper);
    font-weight: 500;
}

.cookie-option-fixed {
    cursor: default;
    opacity: 0.75;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

.cookie-btn {
    border: 0;
    border-radius: 0;
    padding: 0.6rem 1.15rem;
    font-family: var(--exp-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--exp-transition-fast), color var(--exp-transition-fast);
}

.cookie-btn-primary {
    background: var(--exp-paper);
    color: var(--exp-ink);
}

.cookie-btn-primary:hover {
    background: var(--exp-lime);
}

.cookie-btn-ghost {
    background: transparent;
    color: var(--exp-paper-60);
    border: 1px solid rgba(244, 242, 236, 0.25);
}

.cookie-btn-ghost:hover {
    background: rgba(244, 242, 236, 0.08);
    color: var(--exp-paper);
}

.cookie-btn[hidden] {
    display: none;
}

@media (max-width: 575.98px) {
    .cookie-banner {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        padding: 1.1rem;
    }

    .cookie-banner-actions .cookie-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        transition: none;
    }
}

/* components/animations.css */
@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes slidein {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes growx {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes marq {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

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

    .reveal,
    .reveal-delay-1,
    .reveal-delay-2,
    .reveal-delay-3,
    .reveal-delay-4,
    .reveal-delay-5,
    .reveal-delay-6 {
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* components/utilities.css */
.exp-eyebrow {
    font-family: var(--exp-font-mono);
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--exp-ink-45);
}

.exp-rule-top { border-top: 1px solid var(--exp-rule); }
.exp-rule-bottom { border-bottom: 1px solid var(--exp-rule); }

.bg-ink {
    background: var(--exp-ink);
    color: var(--exp-paper);
}

.bg-ink p { color: var(--exp-paper-60); }
.bg-ink h1, .bg-ink h2, .bg-ink h3,
.bg-ink h4, .bg-ink h5, .bg-ink h6 { color: var(--exp-paper); }

.bg-ink :focus-visible {
    outline-color: var(--exp-lime);
}

.reveal {
    opacity: 0;
    translate: 0 30px;
    transition: opacity 0.6s ease, translate 0.6s ease;
}

.reveal.revealed {
    opacity: 1;
    translate: 0 0;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* components/responsive.css */
@media (max-width: 991.98px) {
    .hero {
        padding: calc(var(--exp-navbar-height) + 3rem) 0 3.5rem;
    }

    .exp-section {
        padding: 3rem 0;
    }

    .exp-section-lg {
        padding: 4rem 0;
    }

    .feature-block {
        padding: 2rem 0;
    }

    .feature-visual {
        min-height: 240px;
        padding: 2rem;
        margin-top: 2rem;
    }

    
    .btn-ink,
    .btn-lime,
    .btn-outline-ink,
    .btn-navbar-cta {
        min-height: 44px;
    }

    

    .navbar-glass:has(.navbar-toggler[aria-expanded="true"]),
    .navbar-glass:has(.collapsing) {
        background: var(--exp-paper);
        transition: none;
    }

    .navbar-glass:has(.navbar-toggler[aria-expanded="true"]) .nav-link,
    .navbar-glass:has(.collapsing) .nav-link {
        color: var(--exp-ink);
    }

    .navbar-glass:has(.navbar-toggler[aria-expanded="true"]) .toggler-bar,
    .navbar-glass:has(.collapsing) .toggler-bar {
        background-color: var(--exp-ink);
    }

    .navbar-glass .navbar-nav {
        background: transparent;
        border-radius: 0;
        padding: 1rem 0;
        min-height: calc(100vh - var(--exp-navbar-height));
    }

    .navbar-glass .navbar-toggler,
    .navbar-glass .btn-navbar-cta-mobile-wrapper {
        flex: 1;
    }

    .navbar-glass .btn-navbar-cta-mobile-wrapper {
        display: flex;
        justify-content: flex-end;
    }

    .btn-navbar-cta-mobile {
        padding: 0.4rem 0.8rem;
        font-size: clamp(0.55rem, 2.5vw, 0.75rem);
        white-space: nowrap;
    }

    
    .navbar-glass .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        background: transparent;
        border-radius: 0;
        padding: 0.65rem 1.25rem !important;
        position: relative;
        margin-bottom: 0.25rem;
        transition: background var(--exp-transition-fast);
        text-align: center;
        border: none;
        border-bottom: 1px solid var(--exp-rule);
    }

    .navbar-glass .nav-link::after {
        display: none;
    }

    .navbar-glass .nav-link:hover,
    .nav-item-mega.active > .nav-link {
        background: rgba(18, 19, 15, 0.04);
    }

    .navbar-glass.navbar-scrolled .navbar-nav {
        background: transparent;
    }

    .navbar-glass.navbar-scrolled .nav-link:hover {
        background: rgba(18, 19, 15, 0.04);
    }

    
    .nav-chevron {
        transition: transform var(--exp-transition-fast);
    }

    .nav-item-mega.active .nav-chevron {
        transform: rotate(180deg);
    }

    
    .mega-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: var(--exp-paper);
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--exp-transition), padding var(--exp-transition), margin var(--exp-transition);
        pointer-events: auto;
        margin: 0;
        border: none;
    }

    .nav-item-mega.active .mega-menu {
        max-height: 600px;
        padding: 1rem;
        margin: 0.5rem 0 0.75rem;
        border: 1px solid var(--exp-rule);
    }

    .mega-menu-dark,
    .nav-item-mega.active .mega-menu-dark {
        background: var(--exp-ink);
        border-color: var(--exp-ink);
    }

    .mega-menu .container-fluid {
        padding: 0;
    }

    .mega-menu .row {
        flex-direction: column;
    }

    .mega-menu-heading {
        margin-top: 0.75rem;
    }

    .mega-menu-heading:first-child {
        margin-top: 0;
    }

    .mega-menu-item {
        padding: 0.5rem 0.75rem;
        border-radius: 0;
        min-height: 44px;
    }

    .navbar-glass .collapse.show,
    .navbar-glass .collapsing {
        border-radius: 0;
    }

    .navbar-glass.navbar-scrolled:has(.navbar-toggler[aria-expanded="true"]) .nav-link,
    .navbar-glass.navbar-scrolled:has(.collapsing) .nav-link {
        color: var(--exp-ink);
    }
}

@media (max-width: 767.98px) {
    .hero h1 {
        font-size: 2.25rem;
    }

    .hero h1 em {
        font-size: 1.25em;
    }

    .hero p {
        font-size: 1rem;
    }

    .exp-section-title {
        font-size: 1.5rem;
    }

    
    .exp-card,
    .step-card {
        padding-right: 0;
    }
}

@media (max-width: 575.98px) {
    .hero {
        padding: calc(var(--exp-navbar-height) + 2rem) 0 3rem;
    }

    
    .diagnostic-form {
        padding: 18px 14px;
    }

    .btn-ink-lg {
        padding: 0.9375rem 1.75rem;
        font-size: 0.8125rem;
    }

    .hero-form-collapse {
        padding: 1.5rem 1rem;
    }
}