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

   Archivo: css/responsive.css
   ========================================================= */


/* =========================================================
   01. PANTALLAS GRANDES / LAPTOP
   ========================================================= */

@media (max-width: 1180px) {

    .hero-grid {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(420px, 1.05fr);

        gap: 50px;
    }

    .main-nav {
        gap: 22px;
    }

    .main-nav > a {
        font-size: 0.78rem;
    }

    .experience-grid {
        gap: 65px;
    }

    .trust-grid,
    .faq-grid {
        gap: 75px;
    }

    .bitcoin-grid {
        gap: 75px;
    }

    .access-card {
        padding: 55px;
        gap: 45px;
    }

}


/* =========================================================
   02. TABLETS HORIZONTALES / LAPTOP PEQUEÑA
   ========================================================= */

@media (max-width: 1024px) {

    :root {
        --header-height: 76px;
    }

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


    /* =====================================================
       HERO
       ===================================================== */

    .hero {
        padding:
            140px 0 95px;
    }

    .hero-grid {
        grid-template-columns:
            1fr 0.95fr;

        gap: 42px;
    }

    .hero h1 {
        font-size: clamp(
            3rem,
            6vw,
            4.8rem
        );
    }

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

    .dashboard-content {
        padding: 20px;
    }

    .dashboard-stats {
        gap: 8px;
    }


    /* =====================================================
       BENEFICIOS
       ===================================================== */

    .benefits-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 16px;
    }

    .benefit-card {
        min-height: 250px;
    }

    .benefit-icon {
        margin-bottom: 42px;
    }


    /* =====================================================
       EXPERIENCIA
       ===================================================== */

    .experience-grid {
        grid-template-columns:
            0.9fr 1.1fr;

        gap: 50px;
    }


    /* =====================================================
       PROCESO
       ===================================================== */

    .process-grid {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 55px;
    }

    .process-step,
    .process-step:not(:first-child) {
        padding:
            0 30px 0 0;
    }

    .process-step:nth-child(2) .process-line,
    .process-step:last-child .process-line {
        display: none;
    }

    .process-step:nth-child(3) {
        padding-left: 0;
    }


    /* =====================================================
       CONFIANZA
       ===================================================== */

    .trust-grid {
        grid-template-columns:
            0.9fr 1.1fr;

        gap: 55px;
    }


    /* =====================================================
       BITCOIN
       ===================================================== */

    .bitcoin-grid {
        grid-template-columns:
            0.8fr 1.2fr;

        gap: 55px;
    }


    /* =====================================================
       FAQ
       ===================================================== */

    .faq-grid {
        grid-template-columns:
            0.8fr 1.2fr;

        gap: 55px;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .access-card {
        grid-template-columns:
            1.1fr 0.9fr;

        padding: 48px;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer-inner {
        gap: 45px;
    }

}


/* =========================================================
   03. TABLETS / MENÚ MÓVIL
   ========================================================= */

@media (max-width: 900px) {

    html {
        scroll-padding-top: 95px;
    }

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


    /* =====================================================
       HEADER
       ===================================================== */

    .header {
        height: 74px;
    }

    .header.header-scrolled {
        height: 70px;
    }

    .header-inner {
        gap: 20px;
    }


    /* =====================================================
       BOTÓN MENÚ
       ===================================================== */

    .menu-toggle {
        position: relative;
        z-index: 1002;

        display: block;
    }


    /* =====================================================
       MENÚ MÓVIL
       ===================================================== */

    .main-nav {
        position: fixed;

        z-index: 1001;

        top: 0;
        right: 0;

        width: min(
            380px,
            88vw
        );

        height: 100vh;
        height: 100dvh;

        display: flex;

        flex-direction: column;

        align-items: stretch;
        justify-content: flex-start;

        gap: 0;

        padding:
            105px 28px 40px;

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

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

        box-shadow:
            -30px 0 70px rgba(0, 0, 0, 0.35);

        backdrop-filter:
            blur(20px);

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

        transform:
            translateX(105%);

        visibility: hidden;

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

    .header.nav-open .main-nav {
        transform:
            translateX(0);

        visibility:
            visible;
    }

    .main-nav > a {
        width: 100%;

        padding:
            18px 4px;

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

        color:
            #aeb4b6;

        font-size: 0.92rem;
    }

    .main-nav > a:not(.nav-cta)::after {
        display: none;
    }

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

        margin-top: 26px;

        padding:
            0 20px;

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

        text-align: center;
    }


    /* =====================================================
       ICONO HAMBURGUESA ABIERTO
       ===================================================== */

    .header.nav-open .menu-toggle span:nth-child(1) {
        transform:
            translateY(6.5px)
            rotate(45deg);
    }

    .header.nav-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .header.nav-open .menu-toggle span:nth-child(3) {
        transform:
            translateY(-6.5px)
            rotate(-45deg);
    }


    /* =====================================================
       HERO
       ===================================================== */

    .hero {
        min-height: auto;

        padding:
            130px 0 100px;
    }

    .hero-grid {
        grid-template-columns:
            1fr;

        gap: 70px;
    }

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

    .hero h1 {
        max-width: 720px;

        font-size: clamp(
            3.25rem,
            9vw,
            5.4rem
        );
    }

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

    .hero-visual {
        max-width: 680px;

        margin-inline: auto;
    }

    .dashboard-shell {
        transform: none;
    }


    /* =====================================================
       INTRODUCCIÓN
       ===================================================== */

    .intro-section {
        padding:
            105px 0;
    }

    .intro-grid {
        grid-template-columns:
            1fr;
    }

    .intro-card {
        min-height: auto;
    }

    .card-number {
        margin-bottom: 38px;
    }


    /* =====================================================
       BENEFICIOS
       ===================================================== */

    .benefits-section {
        padding:
            105px 0;
    }

    .benefits-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* =====================================================
       EXPERIENCIA
       ===================================================== */

    .experience-section {
        padding:
            110px 0;
    }

    .experience-grid {
        grid-template-columns:
            1fr;

        gap: 65px;
    }

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

    .experience-panel {
        max-width: 720px;

        width: 100%;

        margin-inline: auto;
    }


    /* =====================================================
       PROCESO
       ===================================================== */

    .process-section {
        padding:
            110px 0;
    }


    /* =====================================================
       CONFIANZA
       ===================================================== */

    .trust-section {
        padding:
            110px 0;
    }

    .trust-grid {
        grid-template-columns:
            1fr;

        gap: 55px;
    }

    .trust-heading {
        position: static;
    }

    .trust-heading h2 {
        max-width: 650px;
    }

    .trust-content {
        max-width: 720px;
    }


    /* =====================================================
       BITCOIN
       ===================================================== */

    .bitcoin-section {
        padding:
            110px 0;
    }

    .bitcoin-grid {
        grid-template-columns:
            1fr;

        gap: 65px;
    }

    .bitcoin-symbol {
        order: 2;
    }

    .bitcoin-content {
        order: 1;

        max-width: 680px;
    }

    .bitcoin-circle {
        width: min(
            300px,
            65vw
        );
    }


    /* =====================================================
       FAQ
       ===================================================== */

    .faq-section {
        padding:
            110px 0;
    }

    .faq-grid {
        grid-template-columns:
            1fr;

        gap: 55px;
    }

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


    /* =====================================================
       CTA
       ===================================================== */

    .access-section {
        padding:
            100px 0;
    }

    .access-card {
        grid-template-columns:
            1fr;

        gap: 38px;

        padding:
            50px;
    }

    .access-action {
        align-items: flex-start;
    }


    /* =====================================================
       NEXORA PROJECT
       ===================================================== */

    .nexora-project-inner {
        grid-template-columns:
            1fr;

        gap: 40px;
    }

    .nexora-project-copy {
        max-width: 650px;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer-inner {
        grid-template-columns:
            1fr 1fr;

        gap:
            45px 60px;
    }

    .footer-brand {
        grid-column:
            1 / -1;
    }

}


/* =========================================================
   04. TABLETS VERTICALES / MÓVILES GRANDES
   ========================================================= */

@media (max-width: 768px) {

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


    /* =====================================================
       TIPOGRAFÍA
       ===================================================== */

    h2 {
        font-size: clamp(
            2.15rem,
            7vw,
            3.25rem
        );
    }

    .section-heading {
        margin-bottom: 50px;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .hero {
        padding:
            120px 0 90px;
    }

    .concept-label {
        max-width: 100%;

        margin-bottom: 30px;

        line-height: 1.45;
    }

    .hero h1 {
        font-size: clamp(
            3rem,
            11vw,
            4.7rem
        );

        margin-bottom: 23px;
    }

    .hero-description {
        font-size: 0.97rem;
    }

    .hero-actions {
        align-items: stretch;
    }

    .hero-actions .button {
        min-width: 190px;
    }

    .dashboard-content {
        padding: 18px;
    }

    .dashboard-stats {
        grid-template-columns:
            repeat(3, 1fr);
    }


    /* =====================================================
       INTRO
       ===================================================== */

    .intro-section {
        padding:
            90px 0;
    }

    .intro-card {
        padding:
            26px;
    }


    /* =====================================================
       BENEFICIOS
       ===================================================== */

    .benefits-section {
        padding:
            90px 0;
    }

    .benefits-grid {
        grid-template-columns:
            1fr;
    }

    .benefit-card {
        min-height: auto;

        padding:
            28px;
    }

    .benefit-icon {
        margin-bottom: 35px;
    }


    /* =====================================================
       EXPERIENCIA
       ===================================================== */

    .experience-section {
        padding:
            90px 0;
    }

    .experience-window {
        min-height: 390px;
    }

    .window-content {
        min-height: 340px;
    }

    .window-card-large {
        min-height: 180px;
    }


    /* =====================================================
       PROCESO
       ===================================================== */

    .process-section {
        padding:
            90px 0;
    }

    .process-grid {
        grid-template-columns:
            1fr;

        gap: 0;
    }

    .process-step,
    .process-step:not(:first-child),
    .process-step:nth-child(3) {
        position: relative;

        padding:
            0 0 48px 60px;
    }

    .process-step:last-child {
        padding-bottom: 0;
    }

    .process-number {
        position: absolute;

        top: 0;
        left: 0;

        margin: 0;
    }

    .process-line,
    .process-step:nth-child(2) .process-line {
        display: block;

        top: 42px;
        left: 18px;

        width: 1px;
        height:
            calc(100% - 48px);

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

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

    .process-step p {
        max-width: 500px;
    }


    /* =====================================================
       CONFIANZA
       ===================================================== */

    .trust-section {
        padding:
            90px 0;
    }

    .trust-item {
        grid-template-columns:
            45px 1fr;

        gap: 18px;
    }


    /* =====================================================
       BITCOIN
       ===================================================== */

    .bitcoin-section {
        padding:
            90px 0;
    }

    .bitcoin-circle {
        width: min(
            260px,
            62vw
        );
    }


    /* =====================================================
       FAQ
       ===================================================== */

    .faq-section {
        padding:
            90px 0;
    }

    .faq-question {
        padding:
            23px 0;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .access-section {
        padding:
            85px 0;
    }

    .access-card {
        padding:
            42px 34px;

        border-radius:
            22px;
    }


    /* =====================================================
       NEXORA
       ===================================================== */

    .nexora-project {
        padding:
            85px 0;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer {
        padding-top: 60px;
    }

    .footer-inner {
        grid-template-columns:
            1fr;

        gap: 38px;
    }

    .footer-brand {
        grid-column:
            auto;
    }

    .footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }

}


/* =========================================================
   05. MÓVILES
   ========================================================= */

@media (max-width: 600px) {

    .container {
        width:
            calc(100% - 28px);
    }


    /* =====================================================
       MARCA
       ===================================================== */

    .brand-symbol {
        width: 34px;
        height: 34px;
    }

    .brand-name {
        font-size: 0.98rem;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .hero {
        padding:
            110px 0 80px;
    }

    .hero-grid {
        gap: 55px;
    }

    .concept-label {
        display: flex;

        align-items: flex-start;

        padding:
            8px 11px;

        font-size: 0.62rem;
    }

    .concept-dot {
        margin-top: 5px;

        flex-shrink: 0;
    }

    .hero .eyebrow {
        font-size: 0.7rem;
    }

    .hero h1 {
        font-size: clamp(
            2.7rem,
            13vw,
            4rem
        );

        line-height: 1.02;
    }

    .hero-description {
        font-size: 0.92rem;
        line-height: 1.75;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-note p {
        font-size: 0.72rem;
    }


    /* =====================================================
       DASHBOARD
       ===================================================== */

    .dashboard-shell {
        border-radius:
            18px;
    }

    .dashboard-top {
        height: 54px;

        padding:
            0 15px;
    }

    .dashboard-content {
        padding:
            15px;
    }

    .dashboard-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }

    .balance-card {
        padding:
            19px;
    }

    .balance-value {
        font-size: 1.55rem;
    }

    .dashboard-stats {
        grid-template-columns:
            1fr;

        gap: 8px;
    }

    .dashboard-stat {
        display: flex;

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

        gap: 20px;

        padding:
            12px 14px;
    }

    .dashboard-stat span {
        margin: 0;
    }

    .chart-card {
        padding:
            15px;
    }

    .chart-visual {
        height: 105px;
    }


    /* =====================================================
       SECCIONES
       ===================================================== */

    .intro-section,
    .benefits-section,
    .experience-section,
    .process-section,
    .trust-section,
    .bitcoin-section,
    .faq-section {
        padding:
            78px 0;
    }


    /* =====================================================
       INTRO
       ===================================================== */

    .intro-card {
        padding:
            24px;
    }

    .card-number {
        margin-bottom: 30px;
    }


    /* =====================================================
       EXPERIENCIA
       ===================================================== */

    .experience-grid {
        gap: 50px;
    }

    .experience-list {
        gap: 12px;
    }

    .experience-list li {
        align-items: flex-start;

        font-size: 0.8rem;
    }


    /* =====================================================
       VENTANA DEMO
       ===================================================== */

    .experience-window {
        min-height: 340px;

        border-radius:
            17px;
    }

    .window-content {
        grid-template-columns:
            48px 1fr;

        min-height: 290px;
    }

    .window-sidebar {
        padding:
            14px 7px;
    }

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

        margin-bottom: 32px;
    }

    .sidebar-item {
        width: 22px;

        margin-bottom: 15px;
    }

    .window-main {
        padding:
            16px;
    }

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

        padding:
            18px;
    }

    .window-card-row {
        gap: 6px;
    }

    .window-card-small {
        height: 56px;
    }

    .demo-data strong {
        font-size: 1rem;
    }


    /* =====================================================
       CONFIANZA
       ===================================================== */

    .trust-grid {
        gap: 42px;
    }

    .trust-intro {
        font-size: 0.92rem;
    }

    .trust-item {
        grid-template-columns:
            1fr;

        gap: 10px;

        padding:
            25px 0;
    }


    /* =====================================================
       BITCOIN
       ===================================================== */

    .bitcoin-grid {
        gap: 55px;
    }

    .bitcoin-circle {
        width: min(
            225px,
            58vw
        );

        font-size: clamp(
            5rem,
            22vw,
            7rem
        );
    }

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

    .bitcoin-circle::after {
        inset: -40px;
    }


    /* =====================================================
       FAQ
       ===================================================== */

    .faq-grid {
        gap: 40px;
    }

    .faq-question {
        align-items: flex-start;

        gap: 16px;
    }

    .faq-question > span:first-child {
        font-size: 0.88rem;
        line-height: 1.55;
    }

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

        margin-top: 1px;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .access-section {
        padding:
            75px 0;
    }

    .access-card {
        padding:
            35px 24px;
    }

    .access-content h2 {
        font-size: clamp(
            2rem,
            9vw,
            3rem
        );
    }

    .access-action {
        align-items: stretch;
    }

    .access-action .button {
        width: 100%;

        text-align: center;
    }


    /* =====================================================
       NEXORA
       ===================================================== */

    .nexora-project {
        padding:
            75px 0;
    }

    .nexora-project-inner {
        gap: 32px;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer {
        padding:
            55px 0 25px;
    }

    .footer-inner {
        padding-bottom:
            40px;
    }

}


/* =========================================================
   06. MÓVILES PEQUEÑOS
   ========================================================= */

@media (max-width: 420px) {

    .container {
        width:
            calc(100% - 24px);
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .header-inner {
        gap: 12px;
    }

    .brand {
        gap: 8px;
    }

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

        border-radius:
            9px;
    }

    .brand-name {
        font-size: 0.9rem;

        letter-spacing:
            0.11em;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
    }


    /* =====================================================
       MENÚ
       ===================================================== */

    .main-nav {
        width: 100%;

        padding:
            100px 22px 35px;

        border-left: 0;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .hero {
        padding:
            105px 0 72px;
    }

    .hero h1 {
        font-size:
            clamp(
                2.45rem,
                13.5vw,
                3.4rem
            );
    }

    .hero-description {
        font-size: 0.88rem;
    }

    .button {
        min-height:
            52px;

        padding:
            0 21px;
    }


    /* =====================================================
       DASHBOARD
       ===================================================== */

    .dashboard-user {
        display: none;
    }

    .dashboard-badge {
        font-size: 0.52rem;
    }

    .balance-card::after {
        font-size: 7rem;
    }

    .chart-header {
        gap: 15px;
    }


    /* =====================================================
       TIPOGRAFÍA
       ===================================================== */

    h2 {
        font-size:
            clamp(
                1.95rem,
                9vw,
                2.65rem
            );
    }

    .eyebrow {
        font-size:
            0.68rem;

        letter-spacing:
            0.14em;
    }


    /* =====================================================
       SECCIONES
       ===================================================== */

    .intro-section,
    .benefits-section,
    .experience-section,
    .process-section,
    .trust-section,
    .bitcoin-section,
    .faq-section {
        padding:
            70px 0;
    }


    /* =====================================================
       EXPERIENCE WINDOW
       ===================================================== */

    .window-sidebar {
        display: none;
    }

    .window-content {
        grid-template-columns:
            1fr;
    }

    .window-main {
        padding:
            15px;
    }


    /* =====================================================
       PROCESS
       ===================================================== */

    .process-step,
    .process-step:not(:first-child),
    .process-step:nth-child(3) {
        padding-left:
            52px;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .access-card {
        padding:
            30px 20px;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer-brand p {
        max-width:
            100%;
    }

}


/* =========================================================
   07. DISPOSITIVOS SIN HOVER
   ========================================================= */

@media (hover: none) {

    .button:hover,
    .intro-card:hover,
    .benefit-card:hover {
        transform: none;
    }

    .text-link:hover span {
        transform: none;
    }

}


/* =========================================================
   08. MÓVILES EN HORIZONTAL
   ========================================================= */

@media (
    max-height: 550px
)
and
(
    max-width: 900px
) {

    .main-nav {
        overflow-y: auto;

        padding-top:
            85px;
    }

    .main-nav > a {
        padding:
            13px 4px;
    }

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

        margin-top:
            18px;
    }

}

/* =========================================================
   CORRECCIÓN FINAL — VOLTEX EN MÓVILES PEQUEÑOS
   Evita recortes y desbordamiento horizontal
========================================================= */

@media (max-width: 600px) {

    .hero-grid,
    .hero-content,
    .hero-visual,
    .dashboard-shell,
    .dashboard-content {
        min-width: 0;
        max-width: 100%;
    }


    /* Etiqueta Proyecto conceptual */

    .concept-label {
        width: 100%;
        max-width: 100%;

        align-items: flex-start;

        box-sizing: border-box;
    }

    .concept-copy {
        min-width: 0;

        line-height: 1.5;

        overflow-wrap: break-word;
    }


    /* Dashboard */

    .hero-visual {
        width: 100%;
    }

    .dashboard-shell {
        width: 100%;

        transform: none;
    }

    .dashboard-heading,
    .dashboard-heading > div {
        min-width: 0;
        max-width: 100%;
    }

    .dashboard-badge {
        max-width: 100%;
    }

}


/* =========================================================
   AJUSTE ESPECÍFICO — 420px O MENOS
========================================================= */

@media (max-width: 420px) {

    .hero h1 {
        max-width: 100%;

        font-size:
            clamp(
                2.2rem,
                10.5vw,
                2.8rem
            );

        line-height: 1.03;

        letter-spacing: -0.045em;
    }


    .hero h1 span {
        max-width: 100%;
    }


    .dashboard-content {
        padding: 13px;
    }


    .dashboard-heading h2 {
        font-size: 1.05rem;
    }

}