/* =========================================================
   VOLTEX
   Landing Page Premium
   Proyecto conceptual desarrollado por NEXORA Digital

   Archivo: css/style.css
   ========================================================= */


/* =========================================================
   01. VARIABLES
   ========================================================= */

:root {

    /* Fondos */
    --color-bg: #07090a;
    --color-bg-soft: #0b0e10;
    --color-bg-card: #101416;
    --color-bg-card-light: #14191c;

    /* Texto */
    --color-text: #f5f6f4;
    --color-text-soft: #a3aaad;
    --color-text-muted: #747d81;

    /* Bordes */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.13);

    /* VOLTEX */
    --color-primary: #f7931a;
    --color-primary-light: #ffad42;
    --color-primary-dark: #cf7210;

    /* Complementarios */
    --color-success: #5ed6b3;
    --color-white: #ffffff;

    /* Sombras */
    --shadow-small:
        0 8px 30px rgba(0, 0, 0, 0.22);

    --shadow-medium:
        0 20px 60px rgba(0, 0, 0, 0.32);

    --shadow-large:
        0 35px 100px rgba(0, 0, 0, 0.45);

    /* Radio */
    --radius-small: 10px;
    --radius-medium: 18px;
    --radius-large: 28px;
    --radius-pill: 999px;

    /* Layout */
    --container-width: 1220px;

    /* Header */
    --header-height: 82px;

    /* Transiciones */
    --transition-fast: 180ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
}


/* =========================================================
   02. RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;

    overflow-x: clip;
}

body {
    margin: 0;
    min-height: 100vh;

    overflow-x: clip;

    font-family:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--color-text);

    background:
        var(--color-bg);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.nav-open {
    overflow: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

p,
h1,
h2,
h3 {
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

section {
    position: relative;
}

section[id] {
    scroll-margin-top: 105px;
}


/* =========================================================
   03. CONTENEDOR
   ========================================================= */

.container {
    width: min(
        calc(100% - 48px),
        var(--container-width)
    );

    margin-inline: auto;
}


/* =========================================================
   04. TIPOGRAFÍA GENERAL
   ========================================================= */

h1,
h2,
h3 {
    color: var(--color-text);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

h1 {
    font-size: clamp(
        3.4rem,
        6.1vw,
        5.9rem
    );

    font-weight: 800;
}

h2 {
    font-size: clamp(
        2.35rem,
        4vw,
        4rem
    );

    font-weight: 700;
}

h3 {
    font-size: 1.25rem;
    font-weight: 700;
}

p {
    color: var(--color-text-soft);
}

.eyebrow {
    margin-bottom: 18px;

    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.section-heading {
    max-width: 720px;
    margin-bottom: 64px;
}

.section-heading h2 {
    margin-bottom: 22px;
}

.section-heading > p:last-child {
    max-width: 640px;

    font-size: 1.04rem;
    line-height: 1.8;
}

.section-heading-center {
    margin-inline: auto;
    text-align: center;
}

.section-heading-center > p:last-child {
    margin-inline: auto;
}


/* =========================================================
   05. BOTONES
   ========================================================= */

.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 0 26px;

    border: 1px solid transparent;
    border-radius: var(--radius-pill);

    font-size: 0.91rem;
    font-weight: 700;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: #111;

    background:
        linear-gradient(
            135deg,
            var(--color-primary-light),
            var(--color-primary)
        );

    box-shadow:
        0 12px 32px rgba(247, 147, 26, 0.2);
}

.button-primary:hover {
    box-shadow:
        0 17px 42px rgba(247, 147, 26, 0.28);
}

.button-secondary {
    color: var(--color-text);

    background:
        rgba(255, 255, 255, 0.035);

    border-color:
        rgba(255, 255, 255, 0.12);
}

.button-secondary:hover {
    background:
        rgba(255, 255, 255, 0.07);

    border-color:
        rgba(255, 255, 255, 0.2);
}

.text-link {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    color: var(--color-text);

    font-size: 0.93rem;
    font-weight: 700;
}

.text-link span {
    color: var(--color-primary);

    transition:
        transform var(--transition-fast);
}

.text-link:hover span {
    transform: translateX(5px);
}


/* =========================================================
   06. HEADER
   ========================================================= */

.header {
    position: fixed;

    z-index: 1000;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--header-height);

    display: flex;
    align-items: center;

    background:
        rgba(7, 9, 10, 0.72);

    border-bottom:
        1px solid transparent;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    transition:
        height var(--transition-normal),
        background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.header.header-scrolled {
    height: 72px;

    background:
        rgba(7, 9, 10, 0.92);

    border-bottom-color:
        var(--color-border);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.2);
}

.header-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


/* =========================================================
   07. MARCA
   ========================================================= */

.brand {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    flex-shrink: 0;
}

.brand-symbol {
    width: 36px;
    height: 36px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #111;

    background:
        linear-gradient(
            135deg,
            var(--color-primary-light),
            var(--color-primary)
        );

    font-size: 1rem;
    font-weight: 800;

    box-shadow:
        0 8px 25px rgba(247, 147, 26, 0.17);
}

.brand-name {
    color: var(--color-white);

    font-size: 1.08rem;
    font-weight: 800;

    letter-spacing: 0.14em;
}


/* =========================================================
   08. NAVEGACIÓN
   ========================================================= */

.main-nav {
    display: flex;

    align-items: center;

    gap: 30px;
}

.main-nav > a {
    position: relative;

    color: #aab0b2;

    font-size: 0.82rem;
    font-weight: 600;

    transition:
        color var(--transition-fast);
}

.main-nav > a:not(.nav-cta)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -9px;

    width: 100%;
    height: 1px;

    background:
        var(--color-primary);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform var(--transition-normal);
}

.main-nav > a:hover,
.main-nav > a.active {
    color: var(--color-white);
}

.main-nav > a:hover::after,
.main-nav > a.active::after {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}

.main-nav .nav-cta {
    min-height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0 19px;

    border:
        1px solid rgba(247, 147, 26, 0.42);

    border-radius:
        var(--radius-pill);

    color:
        #ffd6a5;

    background:
        rgba(247, 147, 26, 0.08);
}

.main-nav .nav-cta:hover {
    color: #111;

    background:
        var(--color-primary);

    border-color:
        var(--color-primary);
}


/* =========================================================
   09. MENÚ MÓVIL
   Se activará completamente desde responsive.css
   ========================================================= */

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border:
        1px solid var(--color-border);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.035);

    cursor: pointer;
}

.menu-toggle span {
    display: block;

    width: 20px;
    height: 1.5px;

    margin: 5px auto;

    background:
        var(--color-white);

    transition:
        transform var(--transition-normal),
        opacity var(--transition-normal);
}


/* =========================================================
   10. HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    padding:
        150px 0 100px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(247, 147, 26, 0.065),
            transparent 33%
        ),
        linear-gradient(
            180deg,
            #080a0b 0%,
            #07090a 100%
        );
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.2;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 86%
        );
}

.hero-background {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(20px);

    opacity: 0.7;
}

.hero-glow-one {
    top: 8%;
    right: -10%;

    width: 520px;
    height: 520px;

    background:
        radial-gradient(
            circle,
            rgba(247, 147, 26, 0.16),
            transparent 67%
        );
}

.hero-glow-two {
    left: 25%;
    bottom: -24%;

    width: 450px;
    height: 450px;

    background:
        radial-gradient(
            circle,
            rgba(94, 214, 179, 0.065),
            transparent 68%
        );
}

.hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(460px, 1.05fr);

    align-items: center;

    gap: 75px;
}


/* =========================================================
   11. HERO — TEXTO
   ========================================================= */

.hero-content {
    max-width: 650px;
}

.concept-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 38px;

    padding:
        8px 13px;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-pill);

    color:
        #969da0;

    background:
        rgba(255, 255, 255, 0.025);

    font-size: 0.68rem;

    letter-spacing: 0.025em;
}

.concept-label strong {
    color: #c5c9ca;
    font-weight: 700;
}

.concept-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 0 4px rgba(247, 147, 26, 0.1);
}

.hero h1 {
    max-width: 690px;

    margin-bottom: 27px;
}

.hero h1 span {
    display: block;

    color:
        var(--color-primary);
}

.hero-description {
    max-width: 600px;

    margin-bottom: 34px;

    color:
        #a9afb1;

    font-size: 1.08rem;
    line-height: 1.85;
}

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-bottom: 31px;
}

.hero-note {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    max-width: 570px;
}

.hero-note-icon {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-top: 2px;

    border:
        1px solid rgba(94, 214, 179, 0.22);

    border-radius: 50%;

    color:
        var(--color-success);

    background:
        rgba(94, 214, 179, 0.05);

    font-size: 0.63rem;
    font-weight: 800;
}

.hero-note p {
    color:
        #6f777a;

    font-size: 0.76rem;
    line-height: 1.7;
}


/* =========================================================
   12. HERO — DASHBOARD
   ========================================================= */

.hero-visual {
    position: relative;

    width: 100%;
}

.hero-visual::before {
    content: "";

    position: absolute;

    z-index: -1;

    top: 12%;
    left: 10%;

    width: 80%;
    height: 75%;

    background:
        rgba(247, 147, 26, 0.11);

    filter:
        blur(85px);
}

.dashboard-shell {
    position: relative;

    width: 100%;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius:
        25px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 25, 28, 0.94),
            rgba(9, 12, 13, 0.97)
        );

    box-shadow:
        var(--shadow-large);

    transform:
        perspective(1200px)
        rotateY(-3deg)
        rotateX(1deg);
}

.dashboard-shell::before {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;

    width: 65%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(247, 147, 26, 0.55),
            transparent
        );
}

.dashboard-top {
    height: 62px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        0 22px;

    border-bottom:
        1px solid var(--color-border);
}

.dashboard-brand {
    display: flex;

    align-items: center;

    gap: 9px;

    color:
        #daddde;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.11em;
}

.dashboard-brand-symbol {
    width: 26px;
    height: 26px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 7px;

    color: #111;

    background:
        var(--color-primary);

    font-size: 0.68rem;
    font-weight: 800;
}

.dashboard-user {
    display: flex;

    align-items: center;

    gap: 8px;

    color:
        #737b7e;

    font-size: 0.68rem;
}

.status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--color-success);

    box-shadow:
        0 0 8px rgba(94, 214, 179, 0.5);
}

.dashboard-content {
    padding:
        25px;
}

.dashboard-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 22px;
}

.dashboard-label {
    display: block;

    margin-bottom: 6px;

    color:
        #60696c;

    font-size: 0.62rem;

    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.dashboard-heading h2 {
    margin: 0;

    font-size: 1.16rem;
    letter-spacing: -0.02em;
}

.dashboard-badge {
    padding:
        6px 9px;

    border:
        1px solid rgba(247, 147, 26, 0.18);

    border-radius:
        var(--radius-pill);

    color:
        #cf985b;

    background:
        rgba(247, 147, 26, 0.05);

    font-size: 0.57rem;

    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.balance-card {
    position: relative;

    overflow: hidden;

    margin-bottom: 14px;

    padding:
        22px;

    border:
        1px solid rgba(247, 147, 26, 0.15);

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            rgba(247, 147, 26, 0.11),
            rgba(255, 255, 255, 0.02)
        );
}

.balance-card::after {
    content: "₿";

    position: absolute;

    right: -10px;
    bottom: -40px;

    color:
        rgba(247, 147, 26, 0.055);

    font-size: 9rem;
    font-weight: 800;
}

.balance-label {
    display: block;

    margin-bottom: 9px;

    color:
        #8e9699;

    font-size: 0.67rem;
}

.balance-value {
    margin-bottom: 3px;

    color:
        var(--color-white);

    font-size: 1.8rem;
    font-weight: 700;

    letter-spacing: -0.035em;
}

.balance-card p {
    color:
        #636c70;

    font-size: 0.66rem;
}

.dashboard-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-bottom: 14px;
}

.dashboard-stat {
    padding:
        14px;

    border:
        1px solid var(--color-border);

    border-radius:
        13px;

    background:
        rgba(255, 255, 255, 0.018);
}

.dashboard-stat span {
    display: block;

    margin-bottom: 4px;

    color:
        #656e71;

    font-size: 0.58rem;
}

.dashboard-stat strong {
    color:
        #c9cecf;

    font-size: 0.75rem;
    font-weight: 600;
}

.chart-card {
    padding:
        18px;

    border:
        1px solid var(--color-border);

    border-radius:
        16px;

    background:
        rgba(255, 255, 255, 0.018);
}

.chart-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 17px;
}

.chart-header span {
    display: block;

    margin-bottom: 2px;

    color:
        #5f686b;

    font-size: 0.57rem;
}

.chart-header strong {
    color:
        #a4abad;

    font-size: 0.69rem;
    font-weight: 600;
}

.chart-period {
    padding:
        4px 7px;

    border-radius:
        6px;

    background:
        rgba(255, 255, 255, 0.04);
}

.chart-visual {
    position: relative;

    height: 122px;

    overflow: hidden;
}

.chart-line {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.035);
}

.chart-line.line-1 {
    top: 0;
}

.chart-line.line-2 {
    top: 25%;
}

.chart-line.line-3 {
    top: 50%;
}

.chart-line.line-4 {
    top: 75%;
}

.chart-line.line-5 {
    bottom: 0;
}

.chart-path {
    position: absolute;

    inset:
        12px 4px 8px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 8px;
}

.chart-path span {
    position: relative;

    width: 11%;

    border-radius:
        5px 5px 2px 2px;

    background:
        linear-gradient(
            to top,
            rgba(247, 147, 26, 0.05),
            rgba(247, 147, 26, 0.72)
        );
}

.chart-path span:nth-child(1) {
    height: 35%;
}

.chart-path span:nth-child(2) {
    height: 48%;
}

.chart-path span:nth-child(3) {
    height: 41%;
}

.chart-path span:nth-child(4) {
    height: 66%;
}

.chart-path span:nth-child(5) {
    height: 57%;
}

.chart-path span:nth-child(6) {
    height: 78%;
}

.chart-path span:nth-child(7) {
    height: 91%;
}


/* =========================================================
   13. INTRODUCCIÓN
   ========================================================= */

.intro-section {
    padding:
        125px 0;

    border-top:
        1px solid var(--color-border);

    background:
        #090c0d;
}

.intro-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}

.intro-card {
    position: relative;

    min-height: 250px;

    padding:
        31px;

    overflow: hidden;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-medium);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.008)
        );

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal);
}

.intro-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(247, 147, 26, 0.2);

    background:
        linear-gradient(
            145deg,
            rgba(247, 147, 26, 0.045),
            rgba(255, 255, 255, 0.009)
        );
}

.card-number {
    display: block;

    margin-bottom: 57px;

    color:
        var(--color-primary);

    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.13em;
}

.intro-card h3 {
    margin-bottom: 13px;

    font-size: 1.33rem;
}

.intro-card p {
    max-width: 300px;

    color:
        #858d90;

    font-size: 0.87rem;
    line-height: 1.75;
}


/* =========================================================
   14. BENEFICIOS
   ========================================================= */

.benefits-section {
    padding:
        130px 0;

    background:
        var(--color-bg);
}

.benefits-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}

.benefit-card {
    min-height: 295px;

    padding:
        29px 25px;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-medium);

    background:
        var(--color-bg-card);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal);
}

.benefit-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(247, 147, 26, 0.24);
}

.benefit-icon {
    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 62px;

    border:
        1px solid rgba(247, 147, 26, 0.17);

    border-radius:
        12px;

    color:
        var(--color-primary);

    background:
        rgba(247, 147, 26, 0.045);

    font-size: 0.68rem;
    font-weight: 700;
}

.benefit-card h3 {
    margin-bottom: 13px;
}

.benefit-card p {
    color:
        #818a8d;

    font-size: 0.84rem;
    line-height: 1.75;
}


/* =========================================================
   15. EXPERIENCIA
   ========================================================= */

.experience-section {
    padding:
        135px 0;

    border-block:
        1px solid var(--color-border);

    background:
        linear-gradient(
            180deg,
            #0b0e0f,
            #090b0c
        );
}

.experience-grid {
    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    align-items: center;

    gap: 95px;
}

.experience-content {
    max-width: 500px;
}

.experience-content h2 {
    margin-bottom: 25px;
}

.experience-content > p:not(.eyebrow) {
    margin-bottom: 36px;

    font-size: 0.97rem;
    line-height: 1.85;
}

.experience-list {
    display: grid;

    gap: 14px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.experience-list li {
    display: flex;

    align-items: center;

    gap: 12px;

    color:
        #abb1b3;

    font-size: 0.84rem;
}

.experience-list li span {
    width: 22px;
    height: 22px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid rgba(94, 214, 179, 0.19);

    border-radius: 50%;

    color:
        var(--color-success);

    background:
        rgba(94, 214, 179, 0.04);

    font-size: 0.58rem;
}


/* =========================================================
   16. VENTANA VISUAL
   ========================================================= */

.experience-panel {
    position: relative;
}

.experience-panel::before {
    content: "";

    position: absolute;

    inset:
        10% 10%;

    z-index: 0;

    background:
        rgba(247, 147, 26, 0.09);

    filter:
        blur(80px);
}

.experience-window {
    position: relative;
    z-index: 1;

    overflow: hidden;

    min-height: 430px;

    border:
        1px solid var(--color-border-strong);

    border-radius:
        23px;

    background:
        #0c0f11;

    box-shadow:
        var(--shadow-large);
}

.window-header {
    height: 50px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        0 18px;

    border-bottom:
        1px solid var(--color-border);
}

.window-header > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #3c4244;
}

.window-header > span:first-child {
    background:
        rgba(247, 147, 26, 0.75);
}

.window-content {
    min-height: 379px;

    display: grid;

    grid-template-columns:
        64px 1fr;
}

.window-sidebar {
    padding:
        18px 13px;

    border-right:
        1px solid var(--color-border);

    background:
        #090c0d;
}

.sidebar-logo {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
        0 auto 42px;

    border-radius:
        9px;

    color:
        #111;

    background:
        var(--color-primary);

    font-size: 0.72rem;
    font-weight: 800;
}

.sidebar-item {
    width: 27px;
    height: 7px;

    margin:
        0 auto 18px;

    border-radius:
        var(--radius-pill);

    background:
        #202628;
}

.sidebar-item.active {
    background:
        var(--color-primary);
}

.window-main {
    padding:
        25px;
}

.window-title {
    display: flex;

    justify-content: space-between;

    margin-bottom: 22px;
}

.window-title span:first-child {
    width: 125px;
    height: 11px;

    border-radius:
        var(--radius-pill);

    background:
        #282e30;
}

.window-title span:last-child {
    width: 60px;
    height: 9px;

    border-radius:
        var(--radius-pill);

    background:
        #1d2224;
}

.window-card-large {
    min-height: 205px;

    display: flex;

    align-items: flex-end;

    margin-bottom: 14px;

    padding:
        25px;

    overflow: hidden;

    border:
        1px solid rgba(247, 147, 26, 0.13);

    border-radius:
        17px;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(247, 147, 26, 0.13),
            transparent 45%
        ),
        #101416;
}

.demo-data small {
    display: block;

    margin-bottom: 8px;

    color:
        #667074;

    font-size: 0.55rem;
    letter-spacing: 0.13em;
}

.demo-data strong {
    display: block;

    margin-bottom: 5px;

    color:
        #d7dbdc;

    font-size: 1.2rem;
}

.demo-data span {
    color:
        #616a6d;

    font-size: 0.66rem;
}

.window-card-row {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}

.window-card-small {
    height: 73px;

    border:
        1px solid var(--color-border);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.018);
}


/* =========================================================
   17. PROCESO
   ========================================================= */

.process-section {
    padding:
        135px 0;

    background:
        var(--color-bg);
}

.process-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 0;
}

.process-step {
    position: relative;

    padding:
        0 28px 0 0;
}

.process-step:not(:first-child) {
    padding-left: 28px;
}

.process-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin-bottom: 28px;

    border:
        1px solid rgba(247, 147, 26, 0.22);

    border-radius: 50%;

    color:
        var(--color-primary);

    background:
        rgba(247, 147, 26, 0.045);

    font-size: 0.62rem;
    font-weight: 700;
}

.process-line {
    position: absolute;

    top: 18px;
    left: 49px;

    width:
        calc(100% - 49px);

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(247, 147, 26, 0.25),
            var(--color-border)
        );
}

.process-step:last-child .process-line {
    display: none;
}

.process-step h3 {
    margin-bottom: 12px;
}

.process-step p {
    max-width: 235px;

    color:
        #7b8487;

    font-size: 0.82rem;
    line-height: 1.75;
}


/* =========================================================
   18. CONFIANZA
   ========================================================= */

.trust-section {
    padding:
        135px 0;

    border-block:
        1px solid var(--color-border);

    background:
        #0b0e0f;
}

.trust-grid {
    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 110px;
}

.trust-heading {
    position: sticky;

    top: 130px;

    align-self: start;
}

.trust-heading h2 {
    max-width: 480px;

    font-size: clamp(
        2.45rem,
        3.8vw,
        3.7rem
    );
}

.trust-intro {
    margin-bottom: 44px;

    color:
        #a0a7a9;

    font-size: 1rem;
    line-height: 1.85;
}

.trust-items {
    border-top:
        1px solid var(--color-border);
}

.trust-item {
    display: grid;

    grid-template-columns:
        55px 1fr;

    gap: 22px;

    padding:
        30px 0;

    border-bottom:
        1px solid var(--color-border);
}

.trust-number {
    color:
        var(--color-primary);

    font-size: 0.65rem;
    font-weight: 700;
}

.trust-item h3 {
    margin-bottom: 9px;
}

.trust-item p {
    max-width: 480px;

    color:
        #7d8689;

    font-size: 0.84rem;
    line-height: 1.75;
}


/* =========================================================
   19. BITCOIN
   ========================================================= */

.bitcoin-section {
    padding:
        135px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #080a0b,
            #0c0f10
        );
}

.bitcoin-grid {
    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    align-items: center;

    gap: 105px;
}

.bitcoin-symbol {
    display: flex;

    align-items: center;
    justify-content: center;
}

.bitcoin-circle {
    position: relative;

    width: min(
        320px,
        80%
    );

    aspect-ratio: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(247, 147, 26, 0.2);

    border-radius: 50%;

    color:
        var(--color-primary);

    background:
        radial-gradient(
            circle,
            rgba(247, 147, 26, 0.11),
            rgba(247, 147, 26, 0.015) 55%,
            transparent 72%
        );

    font-size: clamp(
        6rem,
        11vw,
        10rem
    );

    font-weight: 500;

    box-shadow:
        inset 0 0 50px rgba(247, 147, 26, 0.025),
        0 0 100px rgba(247, 147, 26, 0.045);
}

.bitcoin-circle::before,
.bitcoin-circle::after {
    content: "";

    position: absolute;

    border:
        1px solid rgba(247, 147, 26, 0.09);

    border-radius: 50%;
}

.bitcoin-circle::before {
    inset: -27px;
}

.bitcoin-circle::after {
    inset: -57px;

    opacity: 0.55;
}

.bitcoin-content {
    max-width: 600px;
}

.bitcoin-content h2 {
    margin-bottom: 25px;
}

.bitcoin-content > p:not(.eyebrow) {
    margin-bottom: 27px;

    font-size: 0.96rem;
    line-height: 1.85;
}


/* =========================================================
   20. FAQ
   ========================================================= */

.faq-section {
    padding:
        135px 0;

    border-top:
        1px solid var(--color-border);

    background:
        #090c0d;
}

.faq-grid {
    display: grid;

    grid-template-columns:
        0.75fr 1.25fr;

    gap: 105px;
}

.faq-heading {
    max-width: 390px;
}

.faq-heading h2 {
    margin-bottom: 19px;

    font-size: clamp(
        2.4rem,
        3.8vw,
        3.55rem
    );
}

.faq-heading > p:last-child {
    color:
        #778084;

    font-size: 0.9rem;
}

.faq-list {
    border-top:
        1px solid var(--color-border);
}

.faq-item {
    border-bottom:
        1px solid var(--color-border);
}

.faq-question {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding:
        25px 0;

    border: 0;

    background:
        transparent;

    cursor: pointer;

    text-align: left;
}

.faq-question > span:first-child {
    color:
        #d5d9da;

    font-size: 0.93rem;
    font-weight: 600;

    transition:
        color var(--transition-fast);
}

.faq-question:hover > span:first-child,
.faq-question[aria-expanded="true"] > span:first-child {
    color:
        var(--color-white);
}

.faq-icon {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid var(--color-border);

    border-radius: 50%;

    color:
        var(--color-primary);

    font-size: 1rem;

    transition:
        transform var(--transition-normal),
        background var(--transition-normal);
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform:
        rotate(45deg);

    background:
        rgba(247, 147, 26, 0.05);
}

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows var(--transition-normal);
}

.faq-answer > p {
    overflow: hidden;

    max-width: 650px;

    margin: 0;

    color:
        #7c8588;

    font-size: 0.85rem;
    line-height: 1.8;
}

.faq-question[aria-expanded="true"] + .faq-answer {
    grid-template-rows:
        1fr;
}

.faq-question[aria-expanded="true"] + .faq-answer > p {
    padding-bottom: 25px;
}


/* =========================================================
   21. CTA VOLTEX
   ========================================================= */

.access-section {
    padding:
        120px 0;

    background:
        var(--color-bg);
}

.access-card {
    position: relative;

    display: grid;

    grid-template-columns:
        1.25fr 0.75fr;

    align-items: center;

    gap: 70px;

    overflow: hidden;

    padding:
        65px;

    border:
        1px solid rgba(247, 147, 26, 0.17);

    border-radius:
        var(--radius-large);

    background:
        linear-gradient(
            135deg,
            #111617,
            #0b0e0f
        );

    box-shadow:
        var(--shadow-medium);
}

.access-glow {
    position: absolute;

    top: -180px;
    right: -130px;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(247, 147, 26, 0.16),
            transparent 67%
        );

    pointer-events: none;
}

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

.access-content h2 {
    max-width: 650px;

    margin-bottom: 20px;

    font-size: clamp(
        2.45rem,
        4vw,
        3.8rem
    );
}

.access-content > p:not(.eyebrow) {
    max-width: 620px;

    color:
        #8e9699;

    font-size: 0.91rem;
    line-height: 1.8;
}

.access-action {
    position: relative;
    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
}

.access-action span {
    color:
        #5f686b;

    font-size: 0.68rem;
}


/* =========================================================
   22. NEXORA PROJECT
   ========================================================= */

.nexora-project {
    padding:
        100px 0;

    border-top:
        1px solid var(--color-border);

    background:
        #090b0c;
}

.nexora-project-inner {
    display: grid;

    grid-template-columns:
        1fr 0.8fr;

    align-items: end;

    gap: 80px;
}

.project-label {
    display: block;

    margin-bottom: 15px;

    color:
        var(--color-primary);

    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.nexora-project h2 {
    max-width: 620px;

    margin: 0;

    font-size: clamp(
        2rem,
        3.4vw,
        3.35rem
    );
}

.nexora-project-copy p {
    margin-bottom: 22px;

    color:
        #7d8689;

    font-size: 0.88rem;
    line-height: 1.8;
}


/* =========================================================
   23. FOOTER
   ========================================================= */

.footer {
    padding:
        70px 0 28px;

    border-top:
        1px solid var(--color-border);

    background:
        #060809;
}

.footer-inner {
    display: grid;

    grid-template-columns:
        1.2fr 0.7fr 0.8fr;

    gap: 70px;

    padding-bottom: 55px;
}

.footer-brand p {
    max-width: 310px;

    margin-top: 20px;

    color:
        #626b6e;

    font-size: 0.77rem;
    line-height: 1.75;
}

.footer-links {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;
}

.footer-links a {
    color:
        #798184;

    font-size: 0.78rem;

    transition:
        color var(--transition-fast);
}

.footer-links a:hover {
    color:
        var(--color-white);
}

.footer-nexora {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;
}

.footer-nexora span {
    color:
        #596164;

    font-size: 0.67rem;
}

.footer-nexora a {
    color:
        #b0b6b8;

    font-size: 0.82rem;
    font-weight: 700;

    transition:
        color var(--transition-fast);
}

.footer-nexora a:hover {
    color:
        var(--color-primary);
}

.footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-top: 25px;

    border-top:
        1px solid var(--color-border);
}

.footer-bottom p {
    color:
        #50585b;

    font-size: 0.64rem;
}


/* =========================================================
   24. FOCUS / ACCESIBILIDAD
   ========================================================= */

a:focus-visible,
button:focus-visible {
    outline:
        2px solid var(--color-primary);

    outline-offset:
        4px;
}


/* =========================================================
   25. SELECCIÓN DE TEXTO
   ========================================================= */

::selection {
    color:
        #111;

    background:
        var(--color-primary);
}


/* =========================================================
   26. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background:
        #07090a;
}

::-webkit-scrollbar-thumb {
    border:
        2px solid #07090a;

    border-radius:
        var(--radius-pill);

    background:
        #272d2f;
}

::-webkit-scrollbar-thumb:hover {
    background:
        #353c3f;
}


/* =========================================================
   27. ESTADO DURANTE RESIZE
   ========================================================= */

body.is-resizing *,
body.is-resizing *::before,
body.is-resizing *::after {
    transition: none !important;
}


/* =========================================================
   28. MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }
}