/* Capa final de dirección de arte: mantiene los componentes existentes y unifica el sistema visual. */
:root {
    --ui-bg: #05070a;
    --ui-panel: rgba(12, 17, 24, 0.82);
    --ui-panel-strong: #0d131c;
    --ui-line: rgba(152, 190, 241, 0.14);
    --ui-line-strong: rgba(152, 190, 241, 0.3);
    --ui-blue: #80b7ff;
    --ui-blue-deep: #347edc;
    --ui-text: #f7f9fc;
    --ui-muted: #aab5c4;
    --ui-radius: 3px;
    --ui-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
}

body {
    background:
        radial-gradient(circle at 78% 3%, rgba(45, 104, 182, 0.11), transparent 28%),
        radial-gradient(circle at 12% 42%, rgba(23, 65, 123, 0.07), transparent 32%),
        var(--ui-bg);
}

.site-main {
    width: min(100% - 56px, 1480px);
    padding-block: clamp(34px, 5.5vw, 84px);
}

.tech-navbar .container { max-width: 1480px; }
.tech-navbar { border-bottom-color: var(--ui-line); }
.tech-navbar .navbar-brand { letter-spacing: 0.025em; }
.tech-navbar .nav-link { letter-spacing: 0.018em; }

.premium-hero,
.about-hero {
    border-color: var(--ui-line-strong);
    box-shadow: var(--ui-shadow), inset 0 1px rgba(255, 255, 255, 0.025);
}

.premium-hero {
    min-height: min(720px, calc(100svh - 110px));
    background:
        radial-gradient(circle at 78% 50%, rgba(48, 112, 205, 0.12), transparent 29%),
        linear-gradient(118deg, #07090d 0%, #0b1018 58%, #080b10 100%);
}

.hero-copy { max-width: 700px; }
.hero-copy h1 {
    max-width: 10.5ch;
    font-size: clamp(48px, 5.4vw, 82px);
    letter-spacing: -0.052em;
    line-height: 0.96;
    text-wrap: balance;
}

.hero-description { max-width: 58ch; color: var(--ui-muted); font-size: 15px; }
.hero-actions { margin-top: 32px; }
.site-button { min-height: 50px; padding-inline: 21px; border-radius: var(--ui-radius); letter-spacing: 0.03em; }
.site-button-light { box-shadow: 0 10px 28px rgba(255, 255, 255, 0.08); }
.site-button-light:hover { box-shadow: 0 12px 34px rgba(108, 169, 255, 0.2); }

.hero-proof { max-width: 620px; }
.hero-visual { filter: saturate(0.92); }
.logo-orbit { border-color: rgba(105, 164, 250, 0.18); }

.home-intro,
.portfolio-preview,
.process-section,
.about-values,
.about-team,
.capabilities-section {
    position: relative;
}

.home-intro::before,
.portfolio-preview::before,
.process-section::before,
.about-values::before,
.about-team::before,
.capabilities-section::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 1px;
    background: var(--ui-blue);
    box-shadow: 0 0 13px rgba(83, 149, 246, 0.55);
    content: '';
}

.home-intro h2,
.section-heading h2,
.about-story h2,
.about-shell .section-head h2,
.capabilities-heading h2 {
    letter-spacing: -0.035em;
}

.mode-item {
    min-height: 340px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.018), transparent 62%);
}
.mode-item:hover { border-color: var(--ui-line-strong); background-color: rgba(74, 134, 219, 0.045); }
.mode-icon { border-color: var(--ui-line-strong); background: rgba(10, 18, 29, 0.66); }

.portfolio-image,
.system-card-media { background: #0b1017; }
.portfolio-image { border-color: var(--ui-line); }
.portfolio-card:hover .portfolio-info h3 { color: #fff; text-shadow: 0 0 13px rgba(98, 159, 249, 0.3); }

.process-list li { transition: background-color 220ms ease, padding 220ms ease; }
.process-list li:hover { padding-top: 10px; background: linear-gradient(180deg, rgba(88, 151, 242, 0.055), transparent); }

.catalog-heading,
.contact-heading,
.mission-heading {
    padding-bottom: 36px;
    border-bottom: 1px solid var(--ui-line);
}

.catalog-heading h1,
.contact-heading h1,
.mission-heading h1 {
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.catalog-filters {
    position: sticky;
    top: 78px;
    z-index: 20;
    width: max-content;
    max-width: 100%;
    padding: 7px;
    border: 1px solid var(--ui-line);
    background: rgba(7, 10, 15, 0.86);
    backdrop-filter: blur(16px);
}

.catalog-filters button { min-height: 38px; border: 0; }
.catalog-filters button[aria-pressed='true'] { box-shadow: 0 6px 22px rgba(88, 148, 235, 0.18); }

.system-card {
    border-color: var(--ui-line);
    background: linear-gradient(135deg, rgba(17, 24, 34, 0.96), rgba(8, 12, 18, 0.94));
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.18);
}
.system-card:hover { border-color: var(--ui-line-strong); box-shadow: 0 28px 72px rgba(0, 0, 0, 0.3); }
.system-card-content { padding: clamp(26px, 4vw, 52px); }
.system-card-content h3 { max-width: 24ch; letter-spacing: -0.025em; }

.capabilities-grid article {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 70%);
    transition: background-color 220ms ease, transform 220ms ease;
}
.capabilities-grid article:hover { z-index: 1; transform: translateY(-5px); background-color: rgba(78, 137, 222, 0.045); }

.about-story { padding-block: clamp(78px, 9vw, 132px); }
.about-metrics > div { transition: background-color 220ms ease, transform 220ms ease; }
.about-metrics > div:hover { transform: translateY(-3px); }
.mv-card { background: linear-gradient(145deg, #10151d, #0b0e13); }
.value-card { padding-inline: clamp(20px, 2vw, 30px); }

.mission-page { border: 1px solid var(--ui-line); background: rgba(8, 12, 18, 0.72); box-shadow: var(--ui-shadow); }
.mission-heading { padding: clamp(34px, 6vw, 76px); }
.mission-grid article { background: linear-gradient(145deg, rgba(17, 24, 35, 0.9), rgba(8, 12, 18, 0.92)); }
.mission-grid article:hover h2 { color: #fff; text-shadow: 0 0 16px rgba(106, 166, 255, 0.35); }

.contact-layout { gap: clamp(40px, 7vw, 96px); }
.contact-form {
    padding: clamp(26px, 4vw, 48px);
    border: 1px solid var(--ui-line);
    background: linear-gradient(145deg, rgba(15, 21, 30, 0.94), rgba(8, 11, 16, 0.96));
    box-shadow: var(--ui-shadow);
}
.field-group input,
.field-group select,
.field-group textarea { border-color: var(--ui-line); background-color: rgba(4, 7, 11, 0.72); }
.field-group input:hover,
.field-group select:hover,
.field-group textarea:hover { border-color: rgba(133, 181, 246, 0.38); }
.contact-details { position: sticky; top: 108px; align-self: start; }
.contact-details > a { padding-block: 19px; }

.modal-content { border-color: var(--ui-line-strong); box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55); }
.pricing-card { background: linear-gradient(145deg, #121925, #090d13); }

.tech-footer { margin-top: clamp(70px, 9vw, 140px); border-top-color: var(--ui-line); }
.footer-logo img { filter: drop-shadow(0 0 12px rgba(84, 147, 235, 0.18)); }

@media (max-width: 991.98px) {
    .site-main { width: min(100% - 32px, 1480px); }
    .premium-hero { min-height: 680px; }
    .catalog-filters { top: 70px; overflow-x: auto; }
    .contact-details { position: static; }
}

@media (max-width: 680px) {
    .site-main { width: min(100% - 20px, 1480px); padding-top: 20px; }
    .premium-hero { min-height: 720px; padding: 44px 24px 52px; }
    .hero-copy h1 { max-width: 11ch; font-size: clamp(42px, 13vw, 57px); }
    .hero-description { font-size: 14px; }
    .hero-proof { gap: 10px; }
    .hero-proof li { width: 100%; }
    .catalog-heading,
    .contact-heading,
    .mission-heading { padding-bottom: 24px; }
    .catalog-filters { width: 100%; }
    .contact-form { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .process-list li:hover,
    .capabilities-grid article:hover,
    .about-metrics > div:hover { transform: none; }
}
/* Interactive brand detail: the dragon stays cinematic without affecting layout or clicks. */
.dragon-cursor-canvas {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: block;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 1;
    mix-blend-mode: screen;
    filter: saturate(1.08) contrast(1.04);
    contain: strict;
}

@media (prefers-reduced-motion: reduce) {
    .dragon-cursor-canvas {
        display: none;
    }
}