/* ==========================================================
   REDUCCIÓN GLOBAL –20%
   ========================================================== */

html {
    font-size: 80%;
}

/* Contenedores más compactos */
.container { max-width:1200px!important; padding:0 20px!important; }

/* Header */
header { padding:12px 0!important; }
.logo-icon { width:40px!important; height:40px!important; }
.logo-main { font-size:22px!important; }
.logo-tagline { font-size:9px!important; }
.nav-link { font-size:14px!important; }

/* Botones */
.btn { padding:10px 22px!important; font-size:14px!important; }

/* Hero */
.hero { padding:140px 0 70px!important; }
.hero h1 { font-size:3.4rem!important; }
.hero p { font-size:1.1rem!important; }
.stat .number { font-size:2.4rem!important; }

/* Secciones */
.section { padding:90px 0!important; }
.section-title { font-size:2.8rem!important; margin-bottom:50px!important; }

/* Tarjetas, grids */
.feature-card { padding:30px 20px!important; }
.feature-icon { width:65px!important; height:65px!important; font-size:24px!important; }

/* Wallet */
.balance-amount { font-size:2.6rem!important; }
.asset-item { padding:14px!important; }
.asset-icon { width:40px!important; height:40px!important; font-size:1rem!important; }

/* Impacto */
.impact-header { padding:35px!important; }
.impact-stat .number { font-size:2rem!important; }

/* Steps */
.step { padding:25px 20px!important; }
.step-number { width:55px!important; height:55px!important; font-size:1.4rem!important; }

/* Footer */
footer { padding:60px 0 30px!important; }
.footer-links li { margin-bottom:12px!important; }
.social-link { width:40px!important; height:40px!important; }

        /* ==========================================================
           PALETA ECOLÓGICA/TROPICAL
           ========================================================== */
        :root {
            --jungle-green: #2A9D8F;
            --rainforest-teal: #1B998B;
            --tropical-turquoise: #38B2AC;
            --costa-rica-green: #48BB78;
            --banana-leaf: #9CCC65;
            --mango-yellow: #F4A261;
            --sunset-orange: #E76F51;
            --earth-brown: #8B4513;
            --canopy-dark: #1A535C;
            --forest-dark: #264653;
            --light-bamboo: #F0F7F4;
            --text-dark: #1F2937;
            --text-light: #F9FAFB;
        }
        
        /* TEMA CLARO */
        body[data-theme="light"] {
            --bg-primary: var(--light-bamboo);
            --bg-surface: #FFFFFF;
            --bg-card: #FFFFFF;
            --border-color: rgba(38, 70, 83, 0.1);
            --text-primary: var(--text-dark);
            --text-secondary: #4B5563;
        }

        /* TEMA OSCURO (predeterminado) */
        body[data-theme="dark"] {
            --bg-primary: var(--forest-dark);
            --bg-surface: var(--canopy-dark);
            --bg-card: rgba(26, 83, 92, 0.7);
            --border-color: rgba(42, 157, 143, 0.2);
            --text-primary: var(--text-light);
            --text-secondary: #D1D5DB;
        }

        /* RESET Y CONFIGURACIÓN BASE */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.7;
            overflow-x: hidden;
            position: relative;
            transition: background-color 0.5s ease;
        }

        

        a {
            color: inherit;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 30px;
        }

        /* ==========================================================
           HEADER CON ESTILO TROPICAL
           ========================================================== */
        header {
            padding: 20px 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            background: rgba(38, 70, 83, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 2px solid rgba(42, 157, 143, 0.3);
            transition: all 0.4s ease;
        }

        body[data-theme="light"] header {
            background: rgba(240, 247, 244, 0.95);
            border-bottom: 2px solid rgba(156, 204, 101, 0.3);
        }

        .header-scrolled {
            padding: 15px 0;
            box-shadow: 0 10px 30px rgba(26, 83, 92, 0.2);
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--jungle-green), var(--banana-leaf));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .logo-icon::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 70%);
        }

        .logo-icon i {
            color: white;
            font-size: 22px;
            z-index: 1;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo-main {
            font-family: 'Montserrat', sans-serif;
            font-size: 28px;
            font-weight: 900;
            color: var(--jungle-green);
            letter-spacing: -0.5px;
        }

        .logo-tagline {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--mango-yellow);
            font-weight: 600;
        }

        .nav-links {
            display: flex;
            gap: 35px;
        }

        .nav-link {
            position: relative;
            font-weight: 600;
            font-size: 16px;
            color: var(--text-secondary);
            padding: 8px 0;
            transition: color 0.3s ease;
            cursor: pointer;
        }

        .nav-link:hover {
            color: var(--jungle-green);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--jungle-green), var(--banana-leaf));
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .nav-actions {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        /* BOTONES CON ESTILO TROPICAL */
        .btn {
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            font-size: 16px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.7s ease;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--jungle-green), var(--tropical-turquoise));
            color: white;
            box-shadow: 0 10px 25px rgba(42, 157, 143, 0.4);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(42, 157, 143, 0.6);
        }

        .btn-secondary {
            background: transparent;
            color: var(--text-primary);
            border: 2px solid var(--jungle-green);
        }

        .btn-secondary:hover {
            background: rgba(42, 157, 143, 0.1);
            transform: translateY(-3px);
        }

        .theme-toggle {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: var(--bg-surface);
            color: var(--text-primary);
            transition: all 0.3s ease;
        }

        .theme-toggle:hover {
            border-color: var(--mango-yellow);
            transform: rotate(15deg);
        }

        .mobile-menu {
            display: none;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid var(--border-color);
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: var(--bg-surface);
            color: var(--text-primary);
            font-size: 20px;
        }

        /* MENÚ DESPLEGABLE */
        .dropdown {
            position: relative;
        }

        .dropdown .submenu {
            position: absolute;
            top: 45px;
            left: 0;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            padding: 12px 0;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            width: 220px;
            display: none;
            z-index: 999;
        }

        .dropdown .submenu a {
            display: block;
            padding: 10px 18px;
            font-size: 15px;
            color: var(--text-primary);
            text-decoration: none;
            transition: 0.15s;
        }

        .dropdown .submenu a:hover {
            background: var(--jungle-green);
            color: white;
        }

        /* Desktop hover */
        .dropdown:hover .submenu {
            display: block;
        }

        /* Mobile fix: submenu visible cuando el menú móvil está abierto */
        @media (max-width: 768px) {
            .dropdown .submenu {
                position: relative;
                top: 0;
                left: 0;
                width: 100%;
                box-shadow: none;
                border: none;
                background: transparent;
                padding: 0;
                display: none;
            }

            .dropdown.open .submenu {
                display: block;
            }

            .dropdown .submenu a {
                padding: 12px 0;
                border-bottom: 1px solid var(--border-color);
            }
        }

        /* ==========================================================
           HERO SECTION TROPICAL
           ========================================================== */
        .hero {
            padding: 180px 0 100px;
            position: relative;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(135deg, rgba(26, 83, 92, 0.8) 0%, transparent 100%),
                url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
            opacity: 0.1;
            z-index: -1;
        }

        .hero-content {
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
        }

        .hero h1 {
            font-family: 'Montserrat', sans-serif;
            font-size: 4.5rem;
            line-height: 1.1;
            margin-bottom: 30px;
            font-weight: 900;
            letter-spacing: -1px;
        }

        .hero-gradient {
            background: linear-gradient(135deg, var(--jungle-green), var(--banana-leaf), var(--mango-yellow));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: block;
            animation: gradientShift 8s ease infinite;
            background-size: 200% 200%;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .hero-content p {
            font-size: 1.4rem;
            color: var(--text-secondary);
            margin-bottom: 50px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-actions {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-bottom: 70px;
            flex-wrap: wrap;
        }

        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
            background: var(--bg-card);
            padding: 40px;
            border-radius: 25px;
            border: 2px solid var(--border-color);
            backdrop-filter: blur(10px);
            max-width: 800px;
            margin: 0 auto;
        }

        .stat {
            text-align: center;
            flex: 1;
            min-width: 150px;
        }

        .stat .number {
            font-family: 'Montserrat', sans-serif;
            font-size: 3rem;
            font-weight: 800;
            color: var(--jungle-green);
            display: block;
            line-height: 1;
            margin-bottom: 10px;
        }

        .stat .label {
            font-size: 1rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-weight: 600;
        }

        /* GRÁFICO HERO */
        .hero-chart {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 30px;
            border: 2px solid var(--border-color);
            box-shadow: 0 20px 50px rgba(26, 83, 92, 0.2);
            margin: 50px auto;
            backdrop-filter: blur(10px);
            max-width: 1000px;
        }

        /* ==========================================================
           SECCIONES
           ========================================================== */
        .section {
            padding: 120px 0;
        }

        .section-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 3.5rem;
            font-weight: 900;
            text-align: center;
            margin-bottom: 80px;
            position: relative;
            color: var(--jungle-green);
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 5px;
            background: linear-gradient(90deg, var(--jungle-green), var(--banana-leaf));
            border-radius: 5px;
        }

        /* FEATURES - TARJETAS CON HOJAS */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .feature-card {
            background: var(--bg-card);
            border-radius: 25px;
            padding: 40px 30px;
            border: 2px solid var(--border-color);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle at top right, rgba(156, 204, 101, 0.1), transparent);
        }

        .feature-card:hover {
            transform: translateY(-15px);
            border-color: var(--jungle-green);
            box-shadow: 0 25px 50px rgba(26, 83, 92, 0.3);
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            background: linear-gradient(135deg, var(--jungle-green), var(--tropical-turquoise));
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            color: white;
            font-size: 32px;
        }

        .feature-card h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.8rem;
            margin-bottom: 20px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .feature-card p {
            color: var(--text-secondary);
            font-size: 1.1rem;
            line-height: 1.8;
        }

        /* CARD DISPLAY - TARJETA CON DISEÑO DE HOJA */
        .card-display {
            background: linear-gradient(135deg, rgba(42, 157, 143, 0.1), rgba(156, 204, 101, 0.1));
            border-radius: 40px;
            padding: 80px 40px;
            position: relative;
            overflow: hidden;
        }

        .card-display::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(156, 204, 101, 0.2), transparent);
            border-radius: 50%;
        }

        .card-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .card-visual {
            perspective: 1000px;
        }

        .card-3d {
            width: 100%;
            height: 280px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            transform: rotateY(-15deg) rotateX(5deg);
        }

        .card-3d:hover {
            transform: rotateY(0) rotateX(0);
        }

        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 25px;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .card-front {
            background: linear-gradient(135deg, var(--forest-dark), var(--canopy-dark));
            padding: 35px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
        }

        .card-back {
            background: linear-gradient(135deg, var(--canopy-dark), var(--forest-dark));
            transform: rotateY(180deg);
            padding: 35px;
        }

        .card-logo {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-brand {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.8rem;
            font-weight: 900;
            background: linear-gradient(90deg, var(--jungle-green), var(--banana-leaf));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .card-chip {
            width: 60px;
            height: 45px;
            background: linear-gradient(135deg, #D4AF37, #FFD700);
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }

        .card-chip::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 5px,
                rgba(255, 255, 255, 0.1) 5px,
                rgba(255, 255, 255, 0.1) 10px
            );
        }

        .card-number {
            font-family: 'Courier New', monospace;
            font-size: 1.8rem;
            letter-spacing: 4px;
            margin: 30px 0;
            text-align: center;
            color: white;
        }

        .card-details {
            display: flex;
            justify-content: space-between;
            color: white;
        }

        .card-label {
            font-size: 0.8rem;
            opacity: 0.7;
            margin-bottom: 5px;
        }

        .card-magnetic {
            height: 40px;
            background: #000;
            margin-bottom: 20px;
        }

        .card-cvv {
            background: white;
            color: #000;
            padding: 10px;
            border-radius: 5px;
            text-align: right;
            font-family: 'Courier New', monospace;
        }

        .card-features h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.8rem;
            margin-bottom: 25px;
            font-weight: 900;
            color: var(--jungle-green);
        }

        .card-features ul {
            list-style: none;
            margin-bottom: 35px;
        }

        .card-features li {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 1.1rem;
        }

        .card-features i {
            color: var(--jungle-green);
            font-size: 1.2rem;
        }

        /* WALLET - DISEÑO CON HOJAS */
        .wallet-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .wallet-visual {
            background: var(--bg-card);
            border-radius: 30px;
            padding: 40px;
            border: 2px solid var(--border-color);
            box-shadow: 0 30px 60px rgba(26, 83, 92, 0.3);
            backdrop-filter: blur(10px);
        }

        .wallet-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 35px;
            padding-bottom: 20px;
            border-bottom: 2px solid var(--border-color);
        }

        .wallet-header h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--jungle-green);
        }

        .wallet-balance {
            text-align: center;
            margin-bottom: 40px;
        }

        .balance-amount {
            font-family: 'Montserrat', sans-serif;
            font-size: 3.5rem;
            font-weight: 900;
            color: var(--jungle-green);
            line-height: 1;
            margin-bottom: 10px;
        }

        .balance-label {
            color: var(--text-secondary);
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .assets-list {
            margin-bottom: 35px;
        }

        .asset-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-radius: 15px;
            background: rgba(42, 157, 143, 0.05);
            margin-bottom: 15px;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }

        .asset-item:hover {
            background: rgba(42, 157, 143, 0.1);
            border-color: var(--jungle-green);
            transform: translateX(10px);
        }

        .asset-info {
            display: flex;
            align-items: center;
            flex: 1;
        }

        .asset-icon {
            width: 55px;
            height: 55px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
        }

        .btc { background: linear-gradient(135deg, #F7931A, #FFB347); }
        .eth { background: linear-gradient(135deg, #627EEA, #8C9EFF); }
        .usdc { background: linear-gradient(135deg, #2775CA, #4A90E2); }
        .eco { background: linear-gradient(135deg, var(--jungle-green), var(--banana-leaf)); }

        .asset-name {
            flex: 1;
            margin-left: 20px;
        }

        .asset-symbol {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--text-primary);
            display: block;
        }

        .asset-full {
            font-size: 0.9rem;
            color: var(--text-secondary);
            display: block;
        }

        .wallet-buttons {
            display: flex;
            gap: 15px;
        }

        /* IMPACT DASHBOARD - DISEÑO DE SELVA */
        .impact-dashboard {
            background: var(--bg-card);
            border-radius: 30px;
            overflow: hidden;
            border: 2px solid var(--border-color);
            box-shadow: 0 40px 80px rgba(26, 83, 92, 0.4);
        }

        .impact-header {
            padding: 50px;
            background: linear-gradient(135deg, var(--jungle-green), var(--tropical-turquoise));
            text-align: center;
            color: white;
        }

        .impact-header h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.2rem;
            margin-bottom: 15px;
            font-weight: 900;
        }

        .impact-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            padding: 50px;
        }

        .impact-stat {
            text-align: center;
            padding: 35px 25px;
            background: rgba(42, 157, 143, 0.1);
            border-radius: 20px;
            border: 2px solid rgba(42, 157, 143, 0.3);
            transition: all 0.3s ease;
        }

        .impact-stat:hover {
            transform: translateY(-10px);
            background: rgba(42, 157, 143, 0.2);
            border-color: var(--jungle-green);
        }

        .impact-stat .number {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.8rem;
            font-weight: 900;
            color: var(--jungle-green);
            display: block;
            line-height: 1;
            margin-bottom: 15px;
        }

        .impact-stat .label {
            font-size: 1rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-weight: 600;
        }

        .impact-map {
            height: 400px;
            background: linear-gradient(135deg, var(--forest-dark), var(--canopy-dark));
            position: relative;
            overflow: hidden;
        }

        .impact-map::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
            opacity: 0.2;
        }

        .map-point {
            position: absolute;
            width: 25px;
            height: 25px;
            background: var(--jungle-green);
            border-radius: 50%;
            box-shadow: 0 0 30px var(--jungle-green);
            animation: pulse 2s infinite;
            z-index: 2;
        }

        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.7); }
            70% { transform: scale(1.1); box-shadow: 0 0 0 25px rgba(42, 157, 143, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42, 157, 143, 0); }
        }

        .point-1 { top: 30%; left: 25%; }
        .point-2 { top: 40%; left: 60%; }
        .point-3 { top: 70%; left: 40%; }
        .point-4 { top: 55%; left: 75%; }
        .point-5 { top: 65%; left: 30%; }

        .map-label {
            position: absolute;
            top: 30px;
            left: 30px;
            background: rgba(38, 70, 83, 0.9);
            padding: 15px 25px;
            border-radius: 15px;
            font-size: 1rem;
            border: 2px solid var(--jungle-green);
            color: white;
            z-index: 2;
        }

        /* HOW IT WORKS - PASOS CON HOJAS */
        .steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .step {
            text-align: center;
            padding: 40px 30px;
            background: var(--bg-card);
            border-radius: 25px;
            border: 2px solid var(--border-color);
            position: relative;
            transition: all 0.3s ease;
        }

        .step:hover {
            transform: translateY(-10px);
            border-color: var(--jungle-green);
        }

        .step-number {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--jungle-green), var(--tropical-turquoise));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: 900;
            color: white;
            margin: 0 auto 30px;
            position: relative;
        }

        .step-number::after {
            content: '';
            position: absolute;
            width: 90px;
            height: 90px;
            border: 3px solid rgba(42, 157, 143, 0.3);
            border-radius: 50%;
            animation: ripple 3s infinite;
        }

        @keyframes ripple {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.2); opacity: 0; }
        }

        .step h4 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.6rem;
            margin-bottom: 20px;
            font-weight: 800;
            color: var(--jungle-green);
        }

        /* CTA SECTION - LLAMADO A LA ACCIÓN TROPICAL */
        .cta-section {
            text-align: center;
            padding: 120px 0;
            background: linear-gradient(135deg, rgba(42, 157, 143, 0.15), rgba(156, 204, 101, 0.15));
            border-radius: 40px;
            margin: 60px 0;
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
            opacity: 0.1;
            z-index: -1;
        }

        .cta-section h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 3.5rem;
            margin-bottom: 30px;
            font-weight: 900;
            color: var(--jungle-green);
        }

        .cta-section p {
            font-size: 1.3rem;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto 50px;
        }

        /* FOOTER - DISEÑO DE SELVA */
        footer {
            background: linear-gradient(135deg, var(--forest-dark), var(--canopy-dark));
            padding: 80px 0 40px;
            border-top: 3px solid var(--jungle-green);
            position: relative;
            overflow: hidden;
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
            opacity: 0.1;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 60px;
            margin-bottom: 60px;
            position: relative;
            z-index: 1;
        }

        .footer-brand {
            max-width: 350px;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 18px;
        }

        .footer-links a {
            color: var(--text-secondary);
            transition: color 0.3s ease;
        }

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

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }

        .social-link {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background: rgba(42, 157, 143, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            border: 2px solid rgba(42, 157, 143, 0.4);
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: var(--jungle-green);
            transform: translateY(-5px);
            border-color: transparent;
        }

        .copyright {
            text-align: center;
            padding-top: 40px;
            border-top: 2px solid rgba(42, 157, 143, 0.3);
            color: var(--text-secondary);
            font-size: 1rem;
            position: relative;
            z-index: 1;
        }

        

        @keyframes fall {
            0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
            10% { opacity: 0.7; }
            90% { opacity: 0.7; }
            100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
        }

        /* ==========================================================
           RESPONSIVE
           ========================================================== */
        @media (max-width: 1200px) {
            .hero h1 { font-size: 3.8rem; }
            .section-title { font-size: 3rem; }
            .features-grid, .footer-grid { grid-template-columns: repeat(2, 1fr); }
            .steps, .card-container, .wallet-container { grid-template-columns: 1fr; gap: 60px; }
        }

        @media (max-width: 992px) {
            .hero { padding: 150px 0 80px; }
            .nav-links { display: none; }
            .mobile-menu { display: flex; }
            .impact-stats { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 768px) {
            .hero h1 { font-size: 3rem; }
            .section-title { font-size: 2.5rem; }
            .features-grid, .footer-grid { grid-template-columns: 1fr; }
            .cta-section h2 { font-size: 2.8rem; }
            .hero-actions { flex-direction: column; align-items: center; }
            .btn { width: 100%; max-width: 300px; }
            .nav-links.active {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: var(--bg-card);
                padding: 20px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            }
        }

        @media (max-width: 480px) {
            .hero h1 { font-size: 2.5rem; }
            .section-title { font-size: 2.2rem; }
            .impact-stats { grid-template-columns: 1fr; }
            .steps { grid-template-columns: 1fr; }
            .hero-stats { flex-direction: column; gap: 30px; }
            .container { padding: 0 20px; }
        }
        /* ==========================================================
   CRYPTO TOOLS
   ========================================================== */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.tool-card {
    background: var(--bg-card);
    border-radius: 25px;
    padding: 35px 25px;
    border: 2px solid var(--border-color);
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.tool-card:hover {
    transform: translateY(-10px);
    border-color: var(--jungle-green);
    box-shadow: 0 25px 45px rgba(0,0,0,0.25);
}

.tool-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--jungle-green), var(--banana-leaf));
    color: white;
    font-size: 30px;
}

.tool-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
}

.tool-card p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 25px;
    line-height: 1.6;
}
footer {
    background: var(--bg-surface);
    padding: 80px 0 40px;
    border-top: 1px solid var(--border-color);
    margin-top: 80px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: .2s;
}

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

.social-links {
    display: flex;
    gap: 14px;
}

.social-link {
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    color: var(--text-dark);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .2s;
}

.social-link:hover {
    background: var(--jungle-green);
    color: #fff;
}
/* Self-Custody Section */
#self-custody {
    background: linear-gradient(135deg, 
        rgba(11, 22, 35, 0.95) 0%,
        rgba(19, 78, 74, 0.1) 100%);
    position: relative;
    overflow: hidden;
}

#self-custody::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(67, 220, 134, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(32, 201, 151, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Header */
.custody-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.custody-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(67, 220, 134, 0.1);
    border: 1px solid rgba(67, 220, 134, 0.3);
    color: var(--jungle-green);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.custody-badge i {
    font-size: 1.2rem;
}

.custody-header .section-title {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 20px;
}

.danger-text {
    color: #ff6b6b;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}

.success-text {
    color: var(--jungle-green);
    text-shadow: 0 0 10px rgba(67, 220, 134, 0.3);
}

/* Grid Principal */
.custody-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

@media (max-width: 1024px) {
    .custody-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Columnas */
.custody-column {
    display: flex;
    flex-direction: column;
}

.column-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.column-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.problem-column .column-icon {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.benefits-column .column-icon {
    background: rgba(67, 220, 134, 0.1);
    color: var(--jungle-green);
    border: 1px solid rgba(67, 220, 134, 0.3);
}

.column-header h3 {
    font-size: 1.8rem;
    margin: 0;
}

/* Items */
.custody-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custody-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    border-radius: 16px;
    transition: all 0.3s ease;
    align-items: flex-start;
}

.custody-item:hover {
    transform: translateX(5px);
}

.danger-item {
    background: rgba(255, 107, 107, 0.05);
    border: 1px solid rgba(255, 107, 107, 0.1);
}

.benefit-item {
    background: rgba(67, 220, 134, 0.05);
    border: 1px solid rgba(67, 220, 134, 0.1);
}

.item-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.danger-item .item-icon {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
}

.benefit-item .item-icon {
    background: rgba(67, 220, 134, 0.1);
    color: var(--jungle-green);
}

.item-content h4 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.item-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.benefit-tag {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    background: rgba(67, 220, 134, 0.1);
    color: var(--jungle-green);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Tarjeta de Advertencia */
.warning-card {
    margin-top: 30px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 107, 107, 0.05));
    border: 1px solid rgba(255, 107, 107, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.warning-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 12px;
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.warning-content h4 {
    margin: 0 0 5px 0;
    color: #ff6b6b;
}

.warning-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Visual Column - Key Chain */
.visual-column {
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.key-visual {
    width: 100%;
    max-width: 400px;
}

.key-chain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
}

.key-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.key-shape {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.user-key .key-shape {
    background: linear-gradient(135deg, var(--jungle-green), var(--tropical-teal));
    color: white;
    box-shadow: 0 10px 30px rgba(67, 220, 134, 0.3);
}

.bridge .key-shape {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.crypto-vault .key-shape {
    background: linear-gradient(135deg, #f7931a, #ffd166);
    color: white;
    box-shadow: 0 10px 30px rgba(247, 147, 26, 0.3);
}

.key-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    text-align: center;
}

.bridge-sub {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 5px;
}

.connection-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--jungle-green),
        rgba(255, 255, 255, 0.3),
        #f7931a);
    position: relative;
    margin: 0 10px;
}

.connection-line::after {
    content: '→';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--dark-bg);
    color: var(--text-primary);
    padding: 0 5px;
    font-size: 1.2rem;
}

.visual-quote {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 25px;
    text-align: center;
}

.quote-icon {
    font-size: 3rem;
    color: var(--jungle-green);
    font-family: serif;
    line-height: 1;
    margin-bottom: 10px;
}

.quote-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-primary);
    font-style: italic;
    margin: 0;
}

/* Security Meter */
.security-meter {
    margin-top: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.meter-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

.meter-value {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(90deg, var(--jungle-green), var(--tropical-teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.meter-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.meter-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--jungle-green), var(--tropical-teal));
    border-radius: 5px;
    animation: meterFill 2s ease-out;
}

@keyframes meterFill {
    from { width: 0%; }
    to { width: 100%; }
}

.meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Comparison Section */
.comparison-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: var(--text-primary);
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
}

.comparison-card {
    padding: 30px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.custodial-card {
    background: rgba(255, 107, 107, 0.05);
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.selfcustody-card {
    background: rgba(67, 220, 134, 0.05);
    border: 1px solid rgba(67, 220, 134, 0.2);
}

.comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.comparison-header h4 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-primary);
}

.comparison-badge {
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.comparison-badge.bad {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.comparison-badge.good {
    background: rgba(67, 220, 134, 0.2);
    color: var(--jungle-green);
}

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.comparison-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 1rem;
    color: var(--text-secondary);
}

.comparison-list i {
    font-size: 1.2rem;
}

.custodial-card .comparison-list i {
    color: #ff6b6b;
}

.selfcustody-card .comparison-list i {
    color: var(--jungle-green);
}

.comparison-footer {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.risk-level, .security-level {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.risk-level {
    color: #ff6b6b;
}

.security-level {
    color: var(--jungle-green);
}

/* Final Message */
.final-message {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background: linear-gradient(135deg, 
        rgba(67, 220, 134, 0.1) 0%,
        rgba(32, 201, 151, 0.05) 100%);
    border: 1px solid rgba(67, 220, 134, 0.2);
    border-radius: 20px;
    margin-top: 40px;
}

.message-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--jungle-green), var(--tropical-teal));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.message-content h4 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    color: var(--text-primary);
}

.message-content p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.message-content strong {
    color: var(--jungle-green);
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.user-key .key-shape {
    animation: float 3s ease-in-out infinite;
}

.crypto-vault .key-shape {
    animation: float 3s ease-in-out infinite 0.5s;
}
    
    
    
/* Crypto Modern Section */
.section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Grid Moderno */
.crypto-modern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

/* Cards Modernos */
.crypto-modern-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.crypto-modern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 20px 20px 0 0;
}

/* Colores específicos para cada card */
.btc-card::before { background: linear-gradient(90deg, #F7931A, #FFD166); }
.eth-card::before { background: linear-gradient(90deg, #627EEA, #8C8CFF); }
.usdt-card::before { background: linear-gradient(90deg, #26A17B, #50D890); }
.usdc-card::before { background: linear-gradient(90deg, #2775CA, #5AA9E6); }
.bnb-card::before { background: linear-gradient(90deg, #F0B90B, #FFE66D); }
.sol-card::before { background: linear-gradient(90deg, #00FFA3, #03CEA4); }

.crypto-modern-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Header del Card */
.crypto-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.crypto-icon-wrapper {
    position: relative;
}

.crypto-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
}

.crypto-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.crypto-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--jungle-green);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.crypto-badge.auditado {
    background: linear-gradient(90deg, #2775CA, #5AA9E6);
}

.crypto-badge.rapido {
    background: linear-gradient(90deg, #00FFA3, #03CEA4);
}

.crypto-ticker {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(90deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Body del Card */
.crypto-card-body {
    margin-bottom: 25px;
}

.crypto-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.crypto-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.crypto-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.crypto-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Footer del Card */
.crypto-card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.buy-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(90deg, var(--jungle-green), var(--tropical-teal));
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.buy-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(67, 220, 134, 0.4);
}

.buy-btn i {
    font-size: 1.1rem;
}

/* Acciones finales */
.crypto-actions {
    text-align: center;
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.crypto-note {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.crypto-note i {
    color: var(--jungle-green);
}

/* Responsive */
@media (max-width: 768px) {
    .crypto-modern-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .crypto-modern-card {
        padding: 20px;
    }
    
    .crypto-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (min-width: 1200px) {
    .crypto-modern-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Animación de entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.crypto-modern-card {
    animation: fadeInUp 0.6s ease forwards;
}



.crypto-modern-card:nth-child(2) { animation-delay: 0.1s; }
.crypto-modern-card:nth-child(3) { animation-delay: 0.2s; }
.crypto-modern-card:nth-child(4) { animation-delay: 0.3s; }
.crypto-modern-card:nth-child(5) { animation-delay: 0.4s; }
.crypto-modern-card:nth-child(6) { animation-delay: 0.5s; }


/* FIX DE CONTRASTE – Self-Custody + Secciones Suaves */
#self-custody {
    background: linear-gradient(135deg, 
        rgba(11, 22, 35, 0.90) 0%,
        rgba(19, 78, 74, 0.30) 100%) !important;
}

.custody-item,
.visual-quote,
.security-meter,
.comparison-card {
    backdrop-filter: blur(10px) !important;
    background: rgba(255,255,255,0.12) !important; /* antes 0.05 */
    border-color: rgba(255,255,255,0.18) !important;
}

.final-message {
    background: linear-gradient(135deg,
        rgba(67, 220, 134, 0.18),
        rgba(32, 201, 151, 0.10)) !important;
}

.section {
    background-color: rgba(255,255,255,0.02) !important;
}

body[data-theme="dark"] {
    --bg-primary: #1b2a2e !important;
    --bg-surface: #203336 !important;
}
/* ==========================================================
   FIX GLOBAL — BOTÓN CLARO/OSCURO SIEMPRE REDONDO
========================================================== */

#themeToggle,
.theme-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;

    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid var(--border, #242629) !important;
    cursor: pointer !important;

    font-size: 1rem !important;
    box-sizing: border-box !important;

    transition: background .25s, border-color .25s;
}

/* MODO OSCURO */
body[data-theme="dark"] #themeToggle,
body[data-theme="dark"] .theme-toggle {
    background: #181a1d !important;
    color: var(--white, #f1f3f5) !important;
    border-color: #2d3033 !important;
}

/* MODO CLARO */
body[data-theme="light"] #themeToggle,
body[data-theme="light"] .theme-toggle {
    background: #ffffff !important;
    color: #111 !important;
    border-color: #e5e7eb !important;
}
/* CONTENEDORES */
#self-custody {
    padding: 120px 0;
    background: linear-gradient(135deg, rgba(11,22,35,.90), rgba(19,78,74,.35));
    color: var(--text-light);
}

.custody-header {
    text-align: center;
    margin-bottom: 60px;
}

/* BADGE */
.custody-badge {
    display: inline-flex;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(67,220,134,0.1);
    border: 1px solid rgba(67,220,134,0.3);
    color: var(--jungle-green);
    margin-bottom: 20px;
}

/* Títulos */
.section-title {
    font-size: 3rem;
    font-weight: 900;
    color: var(--jungle-green);
    margin-bottom: 15px;
}

.section-subtitle {
    color: var(--text-secondary);
}

/* ESTRUCTURA */
.custody-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

/* COLUMNAS */
.column-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    margin-bottom: 25px;
}

.column-header.danger .column-icon { color:#ff6b6b; }
.column-header.success .column-icon { color:var(--jungle-green); }

/* ITEMS */
.custody-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custody-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    border-radius: 15px;
    background: rgba(255,255,255,0.08);
}

.danger-item { border-left: 4px solid #ff6b6b; }
.benefit-item { border-left: 4px solid var(--jungle-green); }

.item-icon {
    font-size: 1.4rem;
}

/* ADVERTENCIA */
.warning-card {
    margin-top: 25px;
    display: flex;
    gap: 15px;
    padding: 20px;
    border-radius: 15px;
    background: rgba(255,107,107,0.15);
    border: 1px solid rgba(255,107,107,0.3);
}

/* VISUAL KEY CHAIN */
.key-chain {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.key-shape {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2rem;
}

.user-key { background:linear-gradient(135deg,var(--jungle-green),#40e5a0); }
.bridge { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); }
.crypto-vault { background:linear-gradient(135deg,#f7931a,#ffd166); }

.connection-line {
    flex:1;
    height:2px;
    margin:0 15px;
    background:linear-gradient(90deg,var(--jungle-green),rgba(255,255,255,0.4),#f7931a);
}

/* QUOTE */
.visual-quote {
    margin-top: 30px;
    padding: 25px;
    border-radius: 20px;
    background: rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.15);
    text-align:center;
}

/* SECURITY METER */
.security-meter {
    margin-top: 30px;
    background: rgba(255,255,255,0.08);
    padding: 20px;
    border-radius: 15px;
}

.meter-bar {
    background: rgba(255,255,255,0.08);
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin: 10px 0;
}

.meter-fill {
    width: 100%;
    background: linear-gradient(90deg,var(--jungle-green),#40e5a0);
    height:100%;
    animation: meterFill 2s ease-out;
}

@keyframes meterFill {
    from { width:0; }
    to { width:100%; }
}

/* COMPARACIÓN */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top:60px;
}

.comparison-card {
    padding: 30px;
    border-radius:20px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.15);
}

/* BADGES */
.badge.bad {
    background: rgba(255,107,107,0.25);
    color:#ff6b6b;
    padding:6px 12px;
    border-radius:15px;
}

.badge.good {
    background: rgba(67,220,134,0.25);
    color:var(--jungle-green);
    padding:6px 12px;
    border-radius:15px;
}

/* FINAL MESSAGE */
.final-message {
    margin-top: 40px;
    padding: 25px;
    background: rgba(67,220,134,0.15);
    border-radius: 20px;
    display: flex;
    gap: 20px;
    border: 1px solid rgba(67,220,134,0.25);
}

/* MODO OSCURO */
body[data-theme="dark"] #self-custody {
    background: linear-gradient(135deg, rgba(11,22,35,.90), rgba(19,78,74,.35));
    color: var(--text-light);
}

/* MODO CLARO */
body[data-theme="light"] #self-custody {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(230,241,237,0.7));
    color: var(--text-dark);
}
/* ============================
   SELF-CUSTODY FIX DEFINITIVO
   ============================ */

#self-custody {
    background: unset !important;
}

/* MODO CLARO */
body[data-theme="light"] #self-custody {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(230,241,237,0.7)) !important;
    color: var(--text-dark) !important;
}

/* MODO OSCURO */
body[data-theme="dark"] #self-custody {
    background: linear-gradient(135deg, rgba(11,22,35,.90), rgba(19,78,74,.35)) !important;
    color: var(--text-light) !important;
}
/* ============================================================
   SOLUCIÓN WIDGETS Y TARJETAS — MERCADOS (Guido Fix)
============================================================ */

/* TARJETAS PRINCIPALES */
.market-card {
    padding: 18px;
    border-radius: var(--m-radius);
    border: 1px solid var(--m-border);
    background: var(--m-card);
    transition: .25s ease;
}
.market-card:hover {
    transform: translateY(-4px);
    border-color: var(--m-green);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.coin-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--m-green);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-price {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 10px 0;
    color: var(--m-text1);
}

.card-change {
    font-size: 0.95rem;
    font-weight: 600;
}
.card-change.change-positive {
    color: #10b981;
}
.card-change.change-negative {
    color: #ef4444;
}

/* ============================================================
   FEAR & GREED
============================================================ */
.fear-greed-value {
    font-size: 3rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 20px;
}

.meter {
    position: relative;
    height: 10px;
    background: #ccc;
    border-radius: 50px;
    margin-bottom: 12px;
}
body[data-theme="dark"] .meter {
    background: #444;
}

.meter-indicator {
    position: absolute;
    top: -7px;
    width: 20px;
    height: 20px;
    background: var(--m-green);
    border-radius: 50%;
}

/* ============================================================
   TOP GAINERS / LOSERS
============================================================ */
.gainer-item,
.loser-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--m-border);
}

.gainer-info,
.loser-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.coin-icon-small {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--m-green);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.gainer-change {
    color: #10b981;
    font-weight: 700;
}

.loser-change {
    color: #ef4444;
    font-weight: 700;
}

/* ============================================================
   TABLA — FIX
============================================================ */
.text-success { color: #10b981; }
.text-danger { color: #ef4444; }

.action-btn {
    background: var(--m-card);
    border: 1px solid var(--m-border);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}
/* =====================================================
   COMPRA EN 3 PASOS — TARJETAS PREMIUM
   ===================================================== */

.three-steps {
    padding: 80px 0;
}

.steps-3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    margin-top: 40px;
}

.step-3-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 35px 25px;
    border-radius: 18px;
    text-align: center;
    transition: .3s ease;
    position: relative;
    overflow: hidden;
}

.step-3-card:hover {
    transform: translateY(-8px);
    border-color: var(--jungle-green);
    box-shadow: 0 18px 35px rgba(0,0,0,0.12);
}

/* Número grande */
.step-3-number {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 3.5rem;
    font-weight: 900;
    opacity: 0.07;
    color: var(--text-dark);
    pointer-events: none;
}

/* Icono circular */
.step-3-icon {
    width: 70px;
    height: 70px;
    background: var(--jungle-green);
    color: #fff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px auto;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* Títulos */
.step-3-card h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    font-weight: 700;
    color: var(--text1);
}

/* Texto */
.step-3-card p {
    font-size: 1rem;
    color: var(--text2);
}

/* Modo claro */
body[data-theme="light"] .step-3-number {
    color: #000;
}
body[data-theme="light"] .step-3-card:hover {
    box-shadow: 0 25px 40px rgba(0,0,0,0.1);
}

/* Móvil */
@media(max-width: 900px) {
    .steps-3-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   COMPRA EN 3 PASOS — DISEÑO PREMIUM BUYBITCOIN
============================================================ */

.buy-steps-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 40px 0 60px 0;
}

.buy-step-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 35px 25px;
    text-align: center;
    position: relative;
    transition: .35s ease;
    overflow: hidden;
}

.buy-step-card:hover {
    transform: translateY(-8px);
    border-color: var(--jungle-green);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

/* NUMERO GRANDE */
.buy-step-number {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 3.7rem;
    font-weight: 900;
    opacity: 0.06;
    color: var(--white);
    pointer-events: none;
}

/* ICONO */
.buy-step-icon {
    width: 75px;
    height: 75px;
    background: var(--jungle-green);
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    margin: 0 auto 18px auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}

/* TITULO */
.buy-step-card h3 {
    font-size: 1.3rem;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text1);
}

/* TEXTO */
.buy-step-card p {
    color: var(--text2);
    font-size: 1rem;
}

/* TEXTO AL COSTADO */
.buy-extra-info {
    max-width: 700px;
    margin: auto;
    text-align: center;
}

.buy-extra-info ul {
    list-style: none;
    padding: 0;
    margin-top: 25px;
    text-align: left;
    display: inline-block;
}

.buy-extra-info li {
    margin-bottom: 10px;
    font-size: 1rem;
    color: var(--text2);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.buy-extra-info i {
    color: var(--jungle-green);
    margin-top: 3px;
}

/* BOTÓN */
.buy-start-btn {
    margin-top: 30px;
    padding: 15px 40px;
    font-size: 1.1rem;
    border-radius: 14px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .buy-steps-wrapper {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   EXTENSIÓN PARA PANELES (USUARIO + ADMIN)
   Usa el MISMO tema, colores y modo claro/oscuro del sitio
========================================================== */

.panel-wrapper {
    max-width: 1300px;
    margin: 40px auto;
    padding: 0 25px;
}

.panel-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 10px;
}

.panel-subtitle {
    font-size: 1rem;
    color: var(--gray);
    margin-bottom: 25px;
}

/* Tarjetas */
.panel-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    margin-bottom: 25px;
    transition: .25s;
}

.panel-card:hover {
    transform: translateY(-3px);
}

/* Grid para balances */
.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 20px;
}

.panel-crypto-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    transition: .25s;
}

.panel-crypto-card:hover {
    border-color: var(--primary);
}

.panel-crypto-card h4 {
    font-size: 1.2rem;
    font-weight: 700;
}

.panel-crypto-card p {
    font-size: 1.7rem;
    font-weight: 900;
    margin-top: 10px;
    color: var(--primary);
}

/* Tablas admin */
.panel-table {
    width: 100%;
    border-collapse: collapse;
}

.panel-table th {
    padding: 14px;
    border-bottom: 2px solid var(--border);
    background: var(--card);
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--gray);
}

.panel-table td {
    padding: 14px;
    border-bottom: 1px solid var(--border);
}

.panel-table tr:hover td {
    background: rgba(255,255,255,0.04);
}

/* Formularios del panel */
.panel-form {
    max-width: 460px;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 35px;
    border-radius: 18px;
    margin: 40px auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.panel-form label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.panel-form input {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    background: var(--card);
    color: var(--white);
}

.panel-form input:focus {
    border-color: var(--primary);
}

/* Sidebar Admin */
.admin-sidebar {
    position: fixed;
    width: 250px;
    height: 100vh;
    background: var(--card);
    border-right: 1px solid var(--border);
    padding: 25px;
    top: 0;
    left: 0;
}

.admin-sidebar h3 {
    font-size: 1.2rem;
    margin-bottom: 25px;
}

.admin-sidebar a {
    display: block;
    padding: 12px 0;
    color: var(--white);
    font-weight: 600;
    transition: .25s;
}

.admin-sidebar a:hover {
    color: var(--primary);
    transform: translateX(6px);
}

/* Topbar */
.admin-topbar {
    margin-left: 250px;
    padding: 20px 30px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
}