/* =========================================================
   KEY! | BIOMES.CSS
   Sistema visual dinámico de biomas
========================================================= */


/* =========================================================
   1. VARIABLES GENERALES DEL TEMA
========================================================= */

body {
    /* Fondo general */
    --theme-page: #06130d;
    --theme-bg-top: #174329;
    --theme-bg-middle: #0b291a;
    --theme-bg-bottom: #04100a;

    /* Secciones */
    --theme-section: #071710;
    --theme-section-alt: #0a2016;

    /* Paneles */
    --theme-surface: rgba(13, 34, 23, 0.88);
    --theme-surface-strong: rgba(6, 19, 12, 0.96);
    --theme-surface-soft: rgba(255, 255, 255, 0.045);

    /* Color principal */
    --theme-accent: #8cff3f;
    --theme-accent-2: #35d777;

    /*
       Los valores RGB separados se utilizan para
       transparencias sin depender de color-mix().
    */
    --theme-accent-rgb: 140, 255, 63;
    --theme-accent-2-rgb: 53, 215, 119;

    /* Texto */
    --theme-text: #edf7ee;
    --theme-text-soft: #bdd0c0;
    --theme-text-muted: #829a89;

    /* Bordes y sombras */
    --theme-border: rgba(140, 255, 63, 0.20);
    --theme-border-soft: rgba(255, 255, 255, 0.08);
    --theme-shadow: rgba(0, 0, 0, 0.38);

    /* Contraste del botón */
    --theme-button-text: #06210e;

    /*
       Actualizamos las variables originales de styles.css.
       De esta manera, los componentes ya creados cambian
       automáticamente con cada bioma.
    */

    --color-bg: var(--theme-page);
    --color-bg-soft: var(--theme-section-alt);
    --color-bg-deep: var(--theme-bg-bottom);

    --color-surface: var(--theme-surface);
    --color-surface-strong: var(--theme-surface-strong);
    --color-surface-light: var(--theme-surface-soft);

    --color-primary: var(--theme-accent);
    --color-primary-strong: var(--theme-accent-2);

    --color-secondary: var(--theme-accent-2);

    --color-text: var(--theme-text);
    --color-text-soft: var(--theme-text-soft);
    --color-text-muted: var(--theme-text-muted);

    --color-border: var(--theme-border-soft);
    --color-border-strong: var(--theme-border);
}


/* =========================================================
   2. BIOMA: SELVA
========================================================= */

body[data-biome="jungle"] {
    --theme-page: #06130d;

    --theme-bg-top: #1b4b30;
    --theme-bg-middle: #0d2e1d;
    --theme-bg-bottom: #04100a;

    --theme-section: #071710;
    --theme-section-alt: #0b2117;

    --theme-surface: rgba(14, 38, 25, 0.88);
    --theme-surface-strong: rgba(6, 20, 13, 0.96);
    --theme-surface-soft: rgba(168, 255, 191, 0.045);

    --theme-accent: #8cff3f;
    --theme-accent-2: #35d777;

    --theme-accent-rgb: 140, 255, 63;
    --theme-accent-2-rgb: 53, 215, 119;

    --theme-text: #edf7ee;
    --theme-text-soft: #bdd0c0;
    --theme-text-muted: #829a89;

    --theme-border: rgba(140, 255, 63, 0.22);

    --theme-button-text: #06210e;
}


/* =========================================================
   3. BIOMA: OCÉANO
========================================================= */

body[data-biome="ocean"] {
    --theme-page: #03121c;

    --theme-bg-top: #0d6687;
    --theme-bg-middle: #073c59;
    --theme-bg-bottom: #020e17;

    --theme-section: #041924;
    --theme-section-alt: #062537;

    --theme-surface: rgba(5, 40, 58, 0.88);
    --theme-surface-strong: rgba(2, 21, 32, 0.96);
    --theme-surface-soft: rgba(129, 226, 255, 0.055);

    --theme-accent: #43ddff;
    --theme-accent-2: #2789ff;

    --theme-accent-rgb: 67, 221, 255;
    --theme-accent-2-rgb: 39, 137, 255;

    --theme-text: #eefbff;
    --theme-text-soft: #bed8e4;
    --theme-text-muted: #7da4b7;

    --theme-border: rgba(67, 221, 255, 0.25);

    --theme-button-text: #031923;
}


/* =========================================================
   4. BIOMA: MONTAÑA
========================================================= */

body[data-biome="mountain"] {
    --theme-page: #08140f;

    --theme-bg-top: #738b7f;
    --theme-bg-middle: #29483a;
    --theme-bg-bottom: #07140f;

    --theme-section: #0a1812;
    --theme-section-alt: #13251c;

    --theme-surface: rgba(20, 43, 33, 0.88);
    --theme-surface-strong: rgba(8, 23, 17, 0.96);
    --theme-surface-soft: rgba(240, 255, 247, 0.055);

    /* Blanco hielo y verde alpino */
    --theme-accent: #f2fff7;
    --theme-accent-2: #4eb985;

    --theme-accent-rgb: 242, 255, 247;
    --theme-accent-2-rgb: 78, 185, 133;

    --theme-text: #f5fbf7;
    --theme-text-soft: #cad8d0;
    --theme-text-muted: #92a99c;

    --theme-border: rgba(226, 255, 238, 0.24);

    --theme-button-text: #0c2a1d;
}


/* =========================================================
   5. BIOMA: DESIERTO
========================================================= */

body[data-biome="desert"] {
    --theme-page: #1c0f08;

    --theme-bg-top: #b7682d;
    --theme-bg-middle: #603219;
    --theme-bg-bottom: #1a0c06;

    --theme-section: #21120a;
    --theme-section-alt: #342013;

    --theme-surface: rgba(63, 35, 20, 0.89);
    --theme-surface-strong: rgba(31, 16, 9, 0.96);
    --theme-surface-soft: rgba(255, 231, 187, 0.065);

    /* Crema y naranja */
    --theme-accent: #ffd79a;
    --theme-accent-2: #ff812f;

    --theme-accent-rgb: 255, 215, 154;
    --theme-accent-2-rgb: 255, 129, 47;

    --theme-text: #fff4e4;
    --theme-text-soft: #dfc4a7;
    --theme-text-muted: #aa876d;

    --theme-border: rgba(255, 196, 121, 0.28);

    --theme-button-text: #351606;
}


/* =========================================================
   6. BIOMA: DEPORTE
========================================================= */

body[data-biome="sport"] {
    --theme-page: #090c08;

    --theme-bg-top: #3f4e1c;
    --theme-bg-middle: #202a10;
    --theme-bg-bottom: #080c06;

    --theme-section: #0d1109;
    --theme-section-alt: #181e0e;

    --theme-surface: rgba(30, 38, 17, 0.90);
    --theme-surface-strong: rgba(12, 16, 7, 0.96);
    --theme-surface-soft: rgba(213, 255, 77, 0.055);

    --theme-accent: #ceff3f;
    --theme-accent-2: #ff8a2e;

    --theme-accent-rgb: 206, 255, 63;
    --theme-accent-2-rgb: 255, 138, 46;

    --theme-text: #f7faef;
    --theme-text-soft: #cad3b7;
    --theme-text-muted: #929c78;

    --theme-border: rgba(206, 255, 63, 0.23);

    --theme-button-text: #172006;
}


/* =========================================================
   7. BIOMA: TRABAJO / TALLER
========================================================= */

body[data-biome="work"] {
    --theme-page: #0c0f0f;

    --theme-bg-top: #594326;
    --theme-bg-middle: #29231b;
    --theme-bg-bottom: #080a0a;

    --theme-section: #101212;
    --theme-section-alt: #1b1914;

    --theme-surface: rgba(42, 37, 28, 0.90);
    --theme-surface-strong: rgba(15, 17, 16, 0.96);
    --theme-surface-soft: rgba(255, 205, 96, 0.055);

    --theme-accent: #ffd166;
    --theme-accent-2: #ff8738;

    --theme-accent-rgb: 255, 209, 102;
    --theme-accent-2-rgb: 255, 135, 56;

    --theme-text: #fff8e8;
    --theme-text-soft: #d6c8ae;
    --theme-text-muted: #9e9077;

    --theme-border: rgba(255, 209, 102, 0.25);

    --theme-button-text: #2b1805;
}


/* =========================================================
   8. BIOMA: PERSONAL
========================================================= */

body[data-biome="personal"] {
    --theme-page: #170d0e;

    --theme-bg-top: #70432d;
    --theme-bg-middle: #3b2220;
    --theme-bg-bottom: #15090b;

    --theme-section: #1b0f10;
    --theme-section-alt: #2a1816;

    --theme-surface: rgba(52, 29, 27, 0.90);
    --theme-surface-strong: rgba(24, 12, 13, 0.96);
    --theme-surface-soft: rgba(255, 206, 111, 0.055);

    --theme-accent: #ffd36a;
    --theme-accent-2: #ff709e;

    --theme-accent-rgb: 255, 211, 106;
    --theme-accent-2-rgb: 255, 112, 158;

    --theme-text: #fff8ed;
    --theme-text-soft: #decabb;
    --theme-text-muted: #a68d80;

    --theme-border: rgba(255, 211, 106, 0.24);

    --theme-button-text: #351a09;
}


/* =========================================================
   9. FONDO GENERAL DE LA PÁGINA
========================================================= */

body {
    background:
        radial-gradient(
            circle at 12% 5%,
            rgba(var(--theme-accent-rgb), 0.08),
            transparent 23%
        ),
        radial-gradient(
            circle at 88% 30%,
            rgba(var(--theme-accent-2-rgb), 0.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            var(--theme-page) 0%,
            var(--theme-bg-bottom) 100%
        );

    transition:
        background 850ms ease,
        color 450ms ease;
}


/* Luz ambiental fija */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 25% 20%,
            rgba(var(--theme-accent-rgb), 0.06),
            transparent 25%
        ),
        radial-gradient(
            circle at 75% 70%,
            rgba(var(--theme-accent-2-rgb), 0.045),
            transparent 28%
        );

    transition: background 850ms ease;
}


/* =========================================================
   10. TRANSICIÓN GLOBAL ENTRE BIOMAS
========================================================= */

.site-header__container,
.mobile-menu,
.hero__background,
.mission-panel,
.mission-panel__scene,
.service-card,
.benefit-item,
.customizer-controls,
.customizer-preview,
.process-step,
.project-card__button,
.testimonial-card,
.faq-item,
.quote-form-wrapper,
.contact-method,
.contact__map-card,
.site-footer,
.modal__dialog,
.form-field input,
.form-field textarea,
.form-field select {
    transition:
        background 750ms ease,
        background-color 750ms ease,
        border-color 500ms ease,
        color 450ms ease,
        box-shadow 550ms ease,
        transform 280ms ease;
}


/* =========================================================
   11. HERO DINÁMICO
========================================================= */

.hero__background {
    background:
        radial-gradient(
            circle at 17% 15%,
            rgba(var(--theme-accent-rgb), 0.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 83% 28%,
            rgba(var(--theme-accent-2-rgb), 0.16),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            var(--theme-bg-top) 0%,
            var(--theme-bg-middle) 44%,
            var(--theme-bg-bottom) 100%
        );
}

.hero__character-glow {
    background:
        radial-gradient(
            circle,
            rgba(var(--theme-accent-rgb), 0.24),
            rgba(var(--theme-accent-2-rgb), 0.09),
            transparent 68%
        );
}

.hero__character-ring {
    border-color: var(--theme-border);

    box-shadow:
        0 0 0 20px rgba(var(--theme-accent-rgb), 0.025),
        0 0 0 50px rgba(var(--theme-accent-rgb), 0.015);
}

.hero__title-line--accent {
    color: var(--theme-accent);

    text-shadow:
        0 0 22px rgba(var(--theme-accent-rgb), 0.18);
}


/* =========================================================
   12. ELEMENTOS DE ACENTO
========================================================= */

.eyebrow__text,
.hero-equipment i,
.hero-interface__code,
.hero__character-card-label,
.mission-panel__number,
.mission-panel__equipment i,
.service-card__number,
.service-card__icon,
.benefit-item__number,
.customizer-step__title span,
.product-option__content i,
.process-step__marker + *,
.process-step__icon,
.project-card__code,
.faq-item__question i,
.contact-method__icon,
.contact__map-marker,
.site-footer__column a:hover,
.site-footer__column button:hover {
    color: var(--theme-accent);
}

.eyebrow__line {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--theme-accent),
            transparent
        );
}

.hero-interface__status-light {
    background: var(--theme-accent);

    box-shadow:
        0 0 16px rgba(var(--theme-accent-rgb), 0.68);
}

.expedition-progress__fill,
.process-timeline__path-progress,
.quote-form__progress-fill {
    background:
        linear-gradient(
            180deg,
            var(--theme-accent),
            var(--theme-accent-2)
        );
}

.process-timeline__path-progress,
.quote-form__progress-fill {
    background:
        linear-gradient(
            90deg,
            var(--theme-accent),
            var(--theme-accent-2)
        );
}


/* =========================================================
   13. BOTONES DINÁMICOS
========================================================= */

.button--primary {
    color: var(--theme-button-text);

    background:
        linear-gradient(
            135deg,
            var(--theme-accent),
            var(--theme-accent-2)
        );

    box-shadow:
        0 15px 36px rgba(var(--theme-accent-rgb), 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.button--primary:hover {
    box-shadow:
        0 19px 44px rgba(var(--theme-accent-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.button--ghost:hover,
.sound-toggle:hover,
.menu-toggle:hover,
.icon-button:hover,
.slider-button:hover {
    border-color: var(--theme-border);

    background:
        rgba(var(--theme-accent-rgb), 0.08);
}


/* =========================================================
   14. PANELES DINÁMICOS
========================================================= */

.site-header__container,
.mobile-menu,
.customizer-controls,
.customizer-preview,
.quote-form-wrapper,
.contact__map-card,
.modal__dialog {
    background: var(--theme-surface-strong);
}

.service-card,
.benefit-item,
.process-step,
.project-card__button,
.testimonial-card,
.faq-item,
.contact-method {
    background:
        linear-gradient(
            180deg,
            var(--theme-surface),
            var(--theme-surface-strong)
        );
}

.service-card:hover,
.project-card__button:hover,
.contact-method:hover {
    border-color: var(--theme-border);

    box-shadow:
        0 24px 54px var(--theme-shadow),
        0 0 30px rgba(var(--theme-accent-rgb), 0.06);
}


/* =========================================================
   15. FONDOS DE SECCIONES
========================================================= */

.missions,
.customizer,
.quote {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(var(--theme-accent-rgb), 0.06),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            var(--theme-section-alt),
            var(--theme-section)
        );
}

.services,
.benefits,
.process,
.comparison,
.projects,
.testimonials,
.faq,
.contact {
    background:
        radial-gradient(
            circle at 85% 40%,
            rgba(var(--theme-accent-2-rgb), 0.045),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            var(--theme-section),
            var(--theme-page)
        );
}


/* =========================================================
   16. SELECTOR DE MISIONES
========================================================= */

.mission-tab.is-active {
    color: var(--theme-text);

    background:
        rgba(var(--theme-accent-rgb), 0.13);

    border-color:
        rgba(var(--theme-accent-rgb), 0.34);

    box-shadow:
        0 10px 25px rgba(var(--theme-accent-rgb), 0.08);
}

.mission-tab.is-active .mission-tab__icon {
    color: var(--theme-accent);

    background:
        rgba(var(--theme-accent-rgb), 0.15);
}

.mission-panel {
    border-color: var(--theme-border);

    background:
        linear-gradient(
            145deg,
            rgba(var(--theme-accent-rgb), 0.045),
            var(--theme-surface-strong) 48%,
            var(--theme-surface)
        );
}

.mission-panel__scene {
    background:
        radial-gradient(
            circle at 20% 18%,
            rgba(var(--theme-accent-rgb), 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(var(--theme-accent-2-rgb), 0.16),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            var(--theme-bg-top),
            var(--theme-bg-bottom)
        );
}


/* =========================================================
   17. FORMULARIOS
========================================================= */

.form-field input,
.form-field textarea,
.form-field select,
.upload-area,
.form-file-upload,
.product-option__content,
.form-choice__content {
    background:
        rgba(var(--theme-accent-rgb), 0.025);

    border-color: var(--theme-border-soft);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color:
        rgba(var(--theme-accent-rgb), 0.42);

    background:
        rgba(var(--theme-accent-rgb), 0.055);

    box-shadow:
        0 0 0 4px rgba(var(--theme-accent-rgb), 0.09);
}

.product-option input:checked + .product-option__content,
.form-choice input:checked + .form-choice__content {
    background:
        rgba(var(--theme-accent-rgb), 0.11);

    border-color:
        rgba(var(--theme-accent-rgb), 0.30);
}


/* =========================================================
   18. TEXTURAS NATURALES POR BIOMA
========================================================= */

.hero__background::before,
.hero__background::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    transition:
        opacity 700ms ease,
        background 850ms ease;
}


/* Selva: luces filtradas entre hojas */

body[data-biome="jungle"] .hero__background::after {
    opacity: 0.45;

    background:
        radial-gradient(
            ellipse at 10% 20%,
            rgba(190, 255, 141, 0.11),
            transparent 18%
        ),
        radial-gradient(
            ellipse at 90% 15%,
            rgba(109, 255, 92, 0.08),
            transparent 18%
        ),
        linear-gradient(
            112deg,
            transparent 20%,
            rgba(216, 255, 190, 0.045) 38%,
            transparent 55%
        );
}


/* Océano: burbujas y rayos bajo el agua */

body[data-biome="ocean"] .hero__background::after {
    opacity: 0.52;

    background:
        radial-gradient(
            circle at 15% 70%,
            rgba(255, 255, 255, 0.18) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 33% 52%,
            rgba(255, 255, 255, 0.14) 0 4px,
            transparent 5px
        ),
        radial-gradient(
            circle at 74% 62%,
            rgba(255, 255, 255, 0.15) 0 3px,
            transparent 4px
        ),
        linear-gradient(
            105deg,
            transparent 15%,
            rgba(183, 239, 255, 0.10) 35%,
            transparent 53%
        );

    background-size:
        140px 170px,
        190px 220px,
        240px 260px,
        auto;
}


/* Desierto: polvo, luz solar y dunas */

body[data-biome="desert"] .hero__background::after {
    opacity: 0.54;

    background:
        radial-gradient(
            circle at 72% 15%,
            rgba(255, 225, 156, 0.28),
            transparent 18%
        ),
        radial-gradient(
            ellipse at 20% 85%,
            rgba(255, 178, 91, 0.20),
            transparent 38%
        ),
        radial-gradient(
            ellipse at 80% 95%,
            rgba(108, 47, 18, 0.34),
            transparent 48%
        );
}


/* Montaña: niebla y luz helada */

body[data-biome="mountain"] .hero__background::after {
    opacity: 0.54;

    background:
        linear-gradient(
            155deg,
            transparent 10%,
            rgba(244, 255, 248, 0.15) 35%,
            transparent 58%
        ),
        radial-gradient(
            ellipse at 50% 72%,
            rgba(229, 246, 236, 0.16),
            transparent 45%
        ),
        radial-gradient(
            circle at 82% 12%,
            rgba(255, 255, 255, 0.18),
            transparent 16%
        );
}


/* Deporte: líneas dinámicas */

body[data-biome="sport"] .hero__background::after {
    opacity: 0.34;

    background:
        repeating-linear-gradient(
            118deg,
            transparent 0 90px,
            rgba(211, 255, 70, 0.08) 92px 94px,
            transparent 96px 160px
        );
}


/* Trabajo: luz industrial y retícula de taller */

body[data-biome="work"] .hero__background::after {
    opacity: 0.34;

    background:
        radial-gradient(
            circle at 74% 18%,
            rgba(255, 209, 102, 0.16),
            transparent 20%
        ),
        linear-gradient(
            rgba(255, 209, 102, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 209, 102, 0.055) 1px,
            transparent 1px
        );

    background-size: auto, 72px 72px, 72px 72px;
}


/* Personal: iluminación cálida */

body[data-biome="personal"] .hero__background::after {
    opacity: 0.42;

    background:
        radial-gradient(
            circle at 72% 20%,
            rgba(255, 207, 111, 0.18),
            transparent 20%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(255, 112, 158, 0.10),
            transparent 24%
        );
}


/* =========================================================
   19. FOOTER
========================================================= */

.site-footer {
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(var(--theme-accent-rgb), 0.06),
            transparent 20%
        ),
        linear-gradient(
            180deg,
            var(--theme-section),
            var(--theme-bg-bottom)
        );

    border-top-color: var(--theme-border-soft);
}


/* =========================================================
   20. INDICADORES ACTIVOS
========================================================= */

.expedition-progress__step.is-active .expedition-progress__dot,
.testimonial-slider__pagination button.is-active {
    background: var(--theme-accent);

    box-shadow:
        0 0 16px rgba(var(--theme-accent-rgb), 0.55);
}

.color-option input:checked + .color-option__swatch {
    border-color: var(--theme-accent);
}

/* =========================================================
   TRANSICIÓN DEL CONTENIDO DE LA MISIÓN
========================================================= */

.mission-panel__character,
.hero__character-image,
.mission-panel__information {
    transition:
        opacity 260ms ease,
        transform 450ms ease,
        filter 450ms ease;
}

.mission-panel--changing .mission-panel__character {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    filter: blur(4px);
}

.mission-panel--changing .mission-panel__information {
    opacity: 0;
    transform: translateX(16px);
}

/* Refuerzo visual del botón activo. */
.mission-tab[aria-selected="true"] {
    color: var(--theme-text);
    background: rgba(var(--theme-accent-rgb), 0.13);
    border-color: rgba(var(--theme-accent-rgb), 0.34);
    box-shadow: 0 10px 25px rgba(var(--theme-accent-rgb), 0.08);
}