/* ========================================================================== 
   MIRAZO LABS THEME SYSTEM
   Los colores de marca permanecen en main.css. Estos tokens describen el
   propósito visual de cada color y permiten cambiar de tema sin invertir la
   identidad de botones, iconos o logotipos.
   ========================================================================== */

:root,
:root[data-theme='dark'] {
    color-scheme: dark;
    --theme-page-bg: #dcf8f8;
    --theme-page-text: #141f1f;
    --theme-text-muted: #435555;
    --theme-surface: #f2f9f8;
    --theme-surface-strong: #ffffff;
    --theme-surface-muted: #eef7f4;
    --theme-border: rgba(0, 111, 92, 0.18);
    --theme-shadow: rgba(1, 0, 9, 0.24);
    --theme-section-bg: #010009;
    --theme-section-bg-alt: #0e3030;
    --theme-section-surface: rgba(0, 0, 0, 0.6);
    --theme-section-surface-strong: rgba(0, 0, 0, 0.8);
    --theme-on-section: #f2f9f8;
    --theme-on-section-muted: #cbDEDE;
    --theme-on-image: #f2f9f8;
    --theme-on-image-muted: #dce9e5;
    --theme-image-scrim: rgba(1, 0, 9, 0.58);
    --theme-glass: rgba(255, 255, 255, 0.05);
    --theme-input-bg: rgba(0, 0, 0, 0.4);
    --theme-input-bg-focus: rgba(0, 0, 0, 0.6);
    --theme-overlay: rgba(0, 0, 0, 0.3);
    --theme-hero-image:
        radial-gradient(circle at 30% 50%, #001d12 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, #005534 0%, transparent 40%),
        repeating-radial-gradient(circle at 20% 30%, rgba(0, 255, 150, 0.02) 0, transparent 2px, rgba(0, 0, 0, 0.5) 3px, transparent 4px),
        repeating-radial-gradient(circle at 20% 30%, #005534 0, transparent 2px, rgba(0, 0, 0, 0.8) 3px, transparent 4px),
        repeating-radial-gradient(circle at 80% 70%, #010009 0, transparent 1px, #001d12 2px, transparent 3px);
    --theme-services-overlay: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 162, 162, 0.4) 50%, rgba(12, 250, 159, 0.2) 100%);
    --theme-services-bg: #010009;
    --theme-next-bg: linear-gradient(135deg, #010009, #0e3030);
    --theme-social-bg: linear-gradient(135deg, #010009 0%, #0e3030 50%, #010009 100%);
    --theme-card-bg: linear-gradient(to right, #0e3030, #010009);
    --theme-navbar-bg: rgba(0, 0, 0, 0.95);
    --theme-navbar-bg-scrolled: rgba(0, 0, 0, 0.98);
    --theme-navbar-text: #cbDEDE;
    --theme-navbar-text-strong: #f2f9f8;
    --theme-navbar-item-bg: rgba(0, 0, 0, 0.5);
    --theme-navbar-control-bg: rgba(255, 255, 255, 0.05);
    --theme-navbar-shadow: rgba(0, 0, 0, 0.5);
    --theme-logo-backing: transparent;
    --theme-footer-bg: #010009;
    --theme-legal-card: linear-gradient(135deg, #0e3030, #010009);
    --theme-legal-shadow: rgba(0, 0, 0, 0.5);
    --theme-ds-page-bg: #f4fbfa;
    --theme-ds-opportunity-bg: #dcf8f8;
    --theme-ds-solutions-bg: #f8fdfc;
    --theme-ds-hero-bg: radial-gradient(circle at 12% 20%, rgba(3, 201, 125, 0.2), transparent 32%), radial-gradient(circle at 88% 78%, rgba(0, 162, 162, 0.22), transparent 34%), linear-gradient(145deg, #010009 0%, #041817 55%, #0e3030 100%);
    --theme-consulting-bg:
        radial-gradient(circle at 0 0, rgba(12, 250, 159, 0.12), transparent 32%),
        radial-gradient(circle at 100% 100%, rgba(0, 162, 162, 0.18), transparent 34%),
        #071310;
    --theme-consulting-grid: rgba(255, 255, 255, 0.04);
    --theme-cta-bg: linear-gradient(110deg, #0b7b64, #04554c);
    --theme-cta-image-scrim: linear-gradient(135deg, rgba(1, 0, 9, 0.68), rgba(14, 48, 48, 0.5));
    --theme-services-header-bg: rgb(0, 13, 8);
    --theme-services-header-text: #f2f9f8;
    --theme-ds-method-base: #0e3030;
    --theme-ds-method-overlay: linear-gradient(180deg, rgba(1, 0, 9, 0.04) 0%, rgba(1, 0, 9, 0.38) 32%, rgba(1, 0, 9, 0.84) 60%, rgba(1, 0, 9, 0.96) 100%);
    --theme-ds-method-border: rgba(95, 229, 229, 0.2);
    --theme-ds-method-shadow: none;
    --theme-ds-method-filter: blur(0) saturate(100%);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --theme-page-bg: #f5faf9;
        --theme-page-text: #11231f;
        --theme-text-muted: #40534e;
        --theme-surface: #ffffff;
        --theme-surface-strong: #ffffff;
        --theme-surface-muted: #eaf4f1;
        --theme-border: rgba(0, 111, 92, 0.22);
        --theme-shadow: rgba(17, 35, 31, 0.12);
        --theme-section-bg: #f4faf8;
        --theme-section-bg-alt: #e2f2ed;
        --theme-section-surface: rgba(255, 255, 255, 0.88);
        --theme-section-surface-strong: #ffffff;
        --theme-on-section: #11231f;
        --theme-on-section-muted: #40534e;
        --theme-on-image: #f7fffc;
        --theme-on-image-muted: #e2f5ef;
        --theme-image-scrim: rgba(1, 12, 9, 0.6);
        --theme-glass: rgba(0, 111, 92, 0.06);
        --theme-input-bg: rgba(255, 255, 255, 0.9);
        --theme-input-bg-focus: #ffffff;
        --theme-overlay: rgba(255, 255, 255, 0.16);
        --theme-hero-image: radial-gradient(circle at 25% 35%, rgba(12, 250, 159, 0.2), transparent 42%), radial-gradient(circle at 80% 20%, rgba(0, 162, 162, 0.18), transparent 38%), linear-gradient(145deg, #f8fdfc, #dff3ee);
        --theme-services-overlay: linear-gradient(135deg, rgba(247, 253, 251, 0.94) 0%, rgba(220, 248, 248, 0.84) 52%, rgba(206, 255, 236, 0.74) 100%);
        --theme-services-bg: #f4faf8;
        --theme-next-bg: linear-gradient(135deg, #f4faf8, #e2f2ed);
        --theme-social-bg: linear-gradient(135deg, #f4faf8 0%, #e2f2ed 50%, #f4faf8 100%);
        --theme-card-bg: linear-gradient(to right, #e2f2ed, #ffffff);
        --theme-navbar-bg: rgba(250, 253, 252, 0.96);
        --theme-navbar-bg-scrolled: rgba(250, 253, 252, 0.99);
        --theme-navbar-text: #263636;
        --theme-navbar-text-strong: #11231f;
        --theme-navbar-item-bg: rgba(255, 255, 255, 0.82);
        --theme-navbar-control-bg: rgba(0, 111, 92, 0.06);
        --theme-navbar-shadow: rgba(17, 35, 31, 0.18);
        --theme-logo-backing: rgba(1, 0, 9, 0.88);
        --theme-footer-bg: #e7f4f1;
        --theme-legal-card: linear-gradient(135deg, #ffffff, #eaf4f1);
        --theme-legal-shadow: rgba(17, 35, 31, 0.12);
        --theme-ds-page-bg: #f5faf9;
        --theme-ds-opportunity-bg: #eaf4f1;
        --theme-ds-solutions-bg: #ffffff;
        --theme-ds-hero-bg: radial-gradient(circle at 12% 20%, rgba(3, 201, 125, 0.14), transparent 32%), radial-gradient(circle at 88% 78%, rgba(0, 162, 162, 0.14), transparent 34%), linear-gradient(145deg, #f8fdfc, #dff3ee);
        --theme-consulting-bg: radial-gradient(circle at 0 0, rgba(12, 250, 159, 0.12), transparent 32%), radial-gradient(circle at 100% 100%, rgba(0, 162, 162, 0.12), transparent 34%), #f4faf8;
        --theme-consulting-grid: rgba(0, 111, 92, 0.06);
        --theme-cta-bg: linear-gradient(110deg, #d6f5eb, #c7ece5);
        --theme-cta-image-scrim: linear-gradient(135deg, rgba(1, 0, 9, 0.7), rgba(0, 53, 42, 0.56));
        --theme-services-header-bg: rgba(255, 255, 255, 0.88);
        --theme-services-header-text: #11231f;
        --theme-ds-method-base: rgba(219, 245, 238, 0.34);
        --theme-ds-method-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(11, 69, 57, 0.18) 34%, rgba(1, 31, 24, 0.58) 68%, rgba(1, 12, 9, 0.86) 100%);
        --theme-ds-method-border: rgba(255, 255, 255, 0.58);
        --theme-ds-method-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 20px 45px rgba(17, 79, 65, 0.2);
        --theme-ds-method-filter: blur(8px) saturate(135%);
    }
}

:root[data-theme='light'] {
    color-scheme: light;
    --theme-page-bg: #f5faf9;
    --theme-page-text: #11231f;
    --theme-text-muted: #40534e;
    --theme-surface: #ffffff;
    --theme-surface-strong: #ffffff;
    --theme-surface-muted: #eaf4f1;
    --theme-border: rgba(0, 111, 92, 0.22);
    --theme-shadow: rgba(17, 35, 31, 0.12);
    --theme-section-bg: #f4faf8;
    --theme-section-bg-alt: #e2f2ed;
    --theme-section-surface: rgba(255, 255, 255, 0.88);
    --theme-section-surface-strong: #ffffff;
    --theme-on-section: #11231f;
    --theme-on-section-muted: #40534e;
    --theme-on-image: #f7fffc;
    --theme-on-image-muted: #e2f5ef;
    --theme-image-scrim: rgba(1, 12, 9, 0.6);
    --theme-glass: rgba(0, 111, 92, 0.06);
    --theme-input-bg: rgba(255, 255, 255, 0.9);
    --theme-input-bg-focus: #ffffff;
    --theme-overlay: rgba(255, 255, 255, 0.16);
    --theme-hero-image: radial-gradient(circle at 25% 35%, rgba(12, 250, 159, 0.2), transparent 42%), radial-gradient(circle at 80% 20%, rgba(0, 162, 162, 0.18), transparent 38%), linear-gradient(145deg, #f8fdfc, #dff3ee);
    --theme-services-overlay: linear-gradient(135deg, rgba(247, 253, 251, 0.94) 0%, rgba(220, 248, 248, 0.84) 52%, rgba(206, 255, 236, 0.74) 100%);
    --theme-services-bg: #f4faf8;
    --theme-next-bg: linear-gradient(135deg, #f4faf8, #e2f2ed);
    --theme-social-bg: linear-gradient(135deg, #f4faf8 0%, #e2f2ed 50%, #f4faf8 100%);
    --theme-card-bg: linear-gradient(to right, #e2f2ed, #ffffff);
    --theme-navbar-bg: rgba(250, 253, 252, 0.96);
    --theme-navbar-bg-scrolled: rgba(250, 253, 252, 0.99);
    --theme-navbar-text: #263636;
    --theme-navbar-text-strong: #11231f;
    --theme-navbar-item-bg: rgba(255, 255, 255, 0.82);
    --theme-navbar-control-bg: rgba(0, 111, 92, 0.06);
    --theme-navbar-shadow: rgba(17, 35, 31, 0.18);
    --theme-logo-backing: rgba(1, 0, 9, 0.88);
    --theme-footer-bg: #e7f4f1;
    --theme-legal-card: linear-gradient(135deg, #ffffff, #eaf4f1);
    --theme-legal-shadow: rgba(17, 35, 31, 0.12);
    --theme-ds-page-bg: #f5faf9;
    --theme-ds-opportunity-bg: #eaf4f1;
    --theme-ds-solutions-bg: #ffffff;
    --theme-ds-hero-bg: radial-gradient(circle at 12% 20%, rgba(3, 201, 125, 0.14), transparent 32%), radial-gradient(circle at 88% 78%, rgba(0, 162, 162, 0.14), transparent 34%), linear-gradient(145deg, #f8fdfc, #dff3ee);
    --theme-consulting-bg: radial-gradient(circle at 0 0, rgba(12, 250, 159, 0.12), transparent 32%), radial-gradient(circle at 100% 100%, rgba(0, 162, 162, 0.12), transparent 34%), #f4faf8;
    --theme-consulting-grid: rgba(0, 111, 92, 0.06);
    --theme-cta-bg: linear-gradient(110deg, #d6f5eb, #c7ece5);
    --theme-cta-image-scrim: linear-gradient(135deg, rgba(1, 0, 9, 0.7), rgba(0, 53, 42, 0.56));
    --theme-services-header-bg: rgba(255, 255, 255, 0.88);
    --theme-services-header-text: #11231f;
    --theme-ds-method-base: rgba(219, 245, 238, 0.34);
    --theme-ds-method-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(11, 69, 57, 0.18) 34%, rgba(1, 31, 24, 0.58) 68%, rgba(1, 12, 9, 0.86) 100%);
    --theme-ds-method-border: rgba(255, 255, 255, 0.58);
    --theme-ds-method-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 20px 45px rgba(17, 79, 65, 0.2);
    --theme-ds-method-filter: blur(8px) saturate(135%);
}

html,
body {
    color: var(--theme-page-text);
    background-color: var(--theme-page-bg);
}

body {
    transition: color 0.25s ease, background-color 0.25s ease;
}

input,
textarea,
select {
    color: var(--theme-page-text);
    background-color: var(--theme-surface-strong);
    border-color: var(--theme-border);
}

.custom-form-control {
    color: var(--theme-on-section);
    background: var(--theme-input-bg);
    border-color: var(--theme-border);
}

.custom-form-control:focus {
    background: var(--theme-input-bg-focus);
}

.custom-form-control::placeholder {
    color: var(--theme-on-section-muted);
    opacity: 0.85;
}

.hero-mirazo {
    color: var(--theme-on-section);
    background-color: var(--theme-section-bg);
    background-image: var(--theme-hero-image);
}

.hero-mirazo::before {
    background-color: var(--theme-overlay);
}

.hero-buttons .button-ghost {
    color: var(--theme-on-section);
}

.logo-3d {
    background: radial-gradient(circle, var(--theme-logo-backing) 0%, var(--theme-logo-backing) 46%, transparent 72%);
}

.hero-content,
.hero-title,
.services-content,
.services-title,
.service-title,
.services-cta-text {
    color: var(--theme-on-section);
}

.hero-subtitle,
.hero-features,
.services-subtitle,
.service-description {
    color: var(--theme-on-section-muted);
}

.services-section {
    color: var(--theme-on-section);
    background: var(--theme-services-bg);
}

.next-section {
    color: var(--theme-on-section);
    background: var(--theme-next-bg);
}

.social-section {
    color: var(--theme-on-section);
    background: var(--theme-social-bg);
}

.services-cover-overlay {
    background: var(--theme-services-overlay);
}

.services-page .services-header:not(.services-cta-panel) {
    color: var(--theme-services-header-text);
    background-color: var(--theme-services-header-bg);
    box-shadow: 0 16px 38px var(--theme-shadow);
}

.services-page .services-header:not(.services-cta-panel) .services-title,
.services-page .services-header:not(.services-cta-panel) .services-subtitle {
    color: var(--theme-services-header-text);
}

.services-cta-panel {
    isolation: isolate;
}

.services-cta-panel::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: var(--theme-cta-image-scrim);
    content: '';
    pointer-events: none;
}

.services-cta-panel > * {
    position: relative;
    z-index: 1;
}

.services-cta-panel .services-cta-text,
.services-cta-panel .services-cta-text:hover,
.services-cta-panel > p {
    color: var(--theme-on-image);
}

.service-card,
.social-profile-card {
    color: var(--theme-on-section);
    background: var(--theme-section-surface);
    border-color: var(--theme-border);
}

.card {
    color: var(--theme-on-section);
    background: var(--theme-card-bg);
    border-color: var(--theme-border);
}

.service-card-highlight {
    background: var(--theme-section-surface-strong);
}

.services-cta,
.social-link-card,
.social-icon-wrapper {
    background: var(--theme-glass);
}

.social-title,
.profile-name,
.message-text,
.social-icon-wrapper i,
.social-link-card:hover .social-link-text {
    color: var(--theme-on-section);
}

.social-subtitle,
.social-link-text,
.next-content p {
    color: var(--theme-on-section-muted);
}

.footer-home {
    color: var(--theme-on-section);
    background-color: var(--theme-footer-bg);
}

.footer-info-text,
.footer-privacy,
.footer-email,
.footer-description,
.footer-link,
.footer-contact-item,
.copyright-text {
    color: var(--theme-on-section-muted);
}

.footer-column-title,
.footer-social-icon {
    color: var(--theme-on-section);
}

.about-section {
    color: var(--theme-on-section);
    background: var(--theme-section-bg);
}

.about-container,
.about-card h3,
.team-name,
.team-social {
    color: var(--theme-on-section);
}

.about-card,
.team-card {
    background: var(--theme-section-surface);
    border-color: var(--theme-border);
}

.about-card p,
.mv-card p,
.team-bio {
    color: var(--theme-on-section-muted);
}

.mv-card {
    background: var(--theme-glass);
}

.team-section {
    color: var(--theme-on-section);
    background: var(--theme-social-bg);
}

.team-card:hover {
    background: var(--theme-section-surface-strong);
}

.footer-social-icon {
    background: var(--theme-glass);
}

.legal-section {
    background-color: var(--theme-section-bg);
}

.legal-card {
    background: var(--theme-legal-card);
    border-color: var(--theme-border);
    box-shadow: 0 10px 30px var(--theme-legal-shadow);
}

.legal-card p,
.legal-card li {
    color: var(--theme-on-section-muted);
}

.legal-card strong,
.lead-text {
    color: var(--theme-on-section);
}

.marquee-container {
    background-color: var(--theme-section-bg);
}

.marquee-container::before {
    background: linear-gradient(to right, var(--theme-section-bg), transparent);
}

.marquee-container::after {
    background: linear-gradient(to left, var(--theme-section-bg), transparent);
}

.pricing-box,
.benefit-box,
.ds-solution-card,
.ds-opportunity-card {
    color: var(--theme-page-text);
    background-color: var(--theme-surface-strong);
    border-color: var(--theme-border);
}

.pricing-box h3,
.pricing-box .features-list li,
.benefit-box h3,
.benefit-box h4,
.ds-card-title,
.ds-card-title:hover {
    color: var(--theme-page-text);
}

.pricing-box .text-muted,
.benefit-box p,
.ds-card-description,
.ds-section-description {
    color: var(--theme-text-muted);
}

.ds-page {
    color: var(--theme-page-text);
    background: var(--theme-ds-page-bg);
}

.ds-opportunity,
.ds-conversion {
    color: var(--theme-page-text);
    background: var(--theme-ds-opportunity-bg);
}

.ds-solutions {
    color: var(--theme-page-text);
    background: var(--theme-ds-solutions-bg);
}

.ds-hero {
    color: var(--theme-on-section);
    background: var(--theme-ds-hero-bg);
}

.ds-hero-title,
.ds-hero-title:hover {
    color: var(--theme-on-section);
}

.ds-hero-subtitle {
    color: var(--theme-on-section-muted);
}

.ds-methodology {
    background: var(--theme-section-bg);
}

.ds-methodology .ds-section-title,
.ds-methodology .ds-section-title:hover,
.ds-method-card .ds-card-title,
.ds-method-card .ds-card-title:hover {
    color: var(--theme-on-section);
}

.ds-methodology .ds-section-description,
.ds-method-card .ds-card-description {
    color: var(--theme-on-section-muted);
}

.ds-method-card {
    background-color: var(--theme-ds-method-base);
    border-color: var(--theme-ds-method-border);
    box-shadow: var(--theme-ds-method-shadow);
}

.ds-methodology .ds-method-card.ds-image-card::before {
    background: var(--theme-ds-method-overlay);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: var(--theme-ds-method-filter);
    backdrop-filter: var(--theme-ds-method-filter);
}

.ds-methodology .ds-method-card.ds-image-card .ds-card-title,
.ds-methodology .ds-method-card.ds-image-card .ds-card-title:hover {
    color: var(--theme-on-image);
}

.ds-methodology .ds-method-card.ds-image-card .ds-card-description {
    color: var(--theme-on-image-muted);
}

.consulting-section.section {
    color: var(--theme-on-section);
    background: var(--theme-consulting-bg);
}

.consulting-section::before {
    background-image: linear-gradient(var(--theme-consulting-grid) 1px, transparent 1px), linear-gradient(90deg, var(--theme-consulting-grid) 1px, transparent 1px);
}

.consulting-section .consulting-title,
.consulting-section .consulting-card,
.consulting-section .consulting-card:hover,
.consulting-section .consulting-card h3,
.consulting-section .consulting-card h3:hover,
.consulting-section .consulting-roadmap-intro h3,
.consulting-section .consulting-roadmap-intro h3:hover,
.consulting-section .consulting-steps strong {
    color: var(--theme-on-section);
}

.consulting-section .consulting-subtitle,
.consulting-section .consulting-card p,
.consulting-section .consulting-roadmap-intro p {
    color: var(--theme-on-section-muted);
}

.consulting-section .consulting-signals span,
.consulting-section .consulting-card {
    color: var(--theme-on-section);
    background: var(--theme-section-surface);
    border-color: var(--theme-border);
}

.consulting-section .consulting-card-featured {
    background: linear-gradient(145deg, rgba(12, 250, 159, 0.13), var(--theme-section-surface));
}

.consulting-section .consulting-roadmap {
    color: var(--theme-on-image);
    background-color: var(--theme-image-scrim);
    background-blend-mode: multiply;
    border-color: var(--theme-border);
}

.consulting-section .consulting-roadmap-intro h3,
.consulting-section .consulting-roadmap-intro h3:hover,
.consulting-section .consulting-roadmap .consulting-steps strong {
    color: var(--theme-on-image);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.82);
}

.consulting-section .consulting-roadmap-intro p {
    color: var(--theme-on-image-muted);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.92);
}

.consulting-section .consulting-cta {
    color: var(--theme-on-section);
    background: var(--theme-cta-bg);
    border-color: var(--theme-border);
}

:root[data-theme='light'] .consulting-section .consulting-cta h3,
:root[data-theme='light'] .consulting-section .consulting-cta p {
    color: var(--theme-page-text);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .consulting-section .consulting-cta h3,
    :root:not([data-theme]) .consulting-section .consulting-cta p {
        color: var(--theme-page-text);
    }
}

@media (prefers-reduced-motion: reduce) {
    body {
        transition: none;
    }
}
