/* ==========================================================================
           1. VARIABLES Y CONFIGURACIÓN GENERAL (Fácil de modificar para principiantes)
           ========================================================================== */
        :root {
            --bg-principal: #0a0a0c;       /* Fondo oscuro casi negro */
            --bg-tarjetas: #141416;         /* Fondo gris oscuro para contenedores */
            --gta-verde: #39ff14;           /* Verde neón icónico de GTA V */
            --gta-dorado: #dfb31d;          /* Dorado/amarillo de los detalles */
            --texto-claro: #f5f5f7;         /* Texto principal */
            --texto-mutado: #a1a1a6;        /* Texto secundario/descripciones */
            --borde-tarjeta: rgba(57, 255, 20, 0.15); /* Borde verde sutil */
        }

        /* Restablecemos márgenes y paddings por defecto */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
        }

        body {
            background-color: var(--bg-principal);
            color: var(--texto-claro);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Contenedor global para limitar el ancho en pantallas gigantes */
        .contenedor {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* ==========================================================================
           2. ENCABEZADO (Header & Navegación)
           ========================================================================== */
        header {
            background-color: rgba(10, 10, 12, 0.95);
            border-bottom: 2px solid var(--gta-verde);
            position: sticky;
            top: 0;
            z-index: 1000;
            backdrop-filter: blur(10px);
        }

        .nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        /* Efecto de logo al estilo GTA */
        .logo {
            font-size: 1.8rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -1px;
            color: var(--texto-claro);
            text-decoration: none;
        }

        .logo span {
            color: var(--gta-verde);
            font-style: italic;
            text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
        }

        /* Enlaces de navegación */
        .menu-navegacion {
            display: flex;
            list-style: none;
            gap: 25px;
        }

        .menu-navegacion a {
            color: var(--texto-claro);
            text-decoration: none;
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            transition: color 0.3s ease, border-bottom 0.3s ease;
            padding: 5px 0;
            border-bottom: 2px solid transparent;
        }

        .menu-navegacion a:hover {
            color: var(--gta-verde);
            border-bottom: 2px solid var(--gta-verde);
        }

        /* ==========================================================================
           3. SECCIÓN HERO (Presentación Principal)
           ========================================================================== */
        .hero {
            padding: 80px 0;
            text-align: center;
            background: radial-gradient(circle at center, rgba(57, 255, 20, 0.08) 0%, rgba(10, 10, 12, 1) 70%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .hero h1 {
            font-size: 3.5rem;
            font-weight: 900;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .hero h1 span {
            color: var(--gta-verde);
        }

        .hero p {
            font-size: 1.2rem;
            color: var(--texto-mutado);
            max-width: 800px;
            margin: 0 auto 30px auto;
        }

        /* Botón de acción destacado */
        .btn-gta {
            display: inline-block;
            background-color: var(--gta-verde);
            color: #000;
            font-weight: 800;
            text-transform: uppercase;
            padding: 12px 30px;
            border-radius: 4px;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(57, 255, 20, 0.4);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .btn-gta:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(57, 255, 20, 0.6);
        }

        /* ==========================================================================
           4. SECCIÓN PERSONAJES (Tarjetas interactivas)
           ========================================================================== */
        .personajes-seccion {
            padding: 80px 0;
        }

        .titulo-seccion {
            text-align: center;
            font-size: 2.2rem;
            margin-bottom: 50px;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
        }

        .titulo-seccion::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background-color: var(--gta-verde);
            margin: 10px auto 0 auto;
            border-radius: 2px;
        }

        /* Grid de personajes */
        .grid-personajes {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .tarjeta-personaje {
            background-color: var(--bg-tarjetas);
            border: 1px solid var(--borde-tarjeta);
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .tarjeta-personaje:hover {
            transform: translateY(-8px);
            border-color: var(--gta-verde);
            box-shadow: 0 10px 20px rgba(57, 255, 20, 0.1);
        }

        /* Cabecera visual de la tarjeta */
        .banner-personaje {
            height: 12px;
            width: 100%;
        }

        /* Colores específicos de la interfaz de cada personaje en el juego */
        .banner-michael { background-color: #3b82f6; } /* Azul */
        .banner-franklin { background-color: #22c55e; } /* Verde */
        .banner-trevor { background-color: #f97316; }   /* Naranja */

        .tarjeta-contenido {
            padding: 25px;
        }

        .nombre-personaje {
            font-size: 1.6rem;
            font-weight: 800;
            margin-bottom: 10px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* Insignia con el color del personaje */
        .insignia {
            font-size: 0.75rem;
            padding: 3px 8px;
            border-radius: 4px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .insignia-michael { background-color: rgba(59, 130, 246, 0.2); color: #60a5fa; }
        .insignia-franklin { background-color: rgba(34, 197, 94, 0.2); color: #4ade80; }
        .insignia-trevor { background-color: rgba(249, 115, 22, 0.2); color: #fb923c; }

        .descripcion-personaje {
            color: var(--texto-mutado);
            font-size: 0.95rem;
            margin-bottom: 15px;
        }

        .habilidad-titulo {
            font-weight: bold;
            color: var(--gta-dorado);
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .habilidad-desc {
            font-size: 0.9rem;
            color: var(--texto-claro);
        }

        /* ==========================================================================
           5. SECCIÓN CARACTERÍSTICAS
           ========================================================================== */
        .caracteristicas-seccion {
            background-color: var(--bg-tarjetas);
            padding: 80px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .grid-caracteristicas {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            align-items: center;
        }

        .info-carac h3 {
            font-size: 1.8rem;
            color: var(--gta-dorado);
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        .info-carac p {
            color: var(--texto-mutado);
            margin-bottom: 25px;
        }

        .lista-carac {
            list-style: none;
        }

        .lista-carac li {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        /* Icono de check personalizado usando CSS */
        .lista-carac li::before {
            content: '✓';
            color: var(--gta-verde);
            font-weight: bold;
            font-size: 1.1rem;
        }

        /* ==========================================================================
           6. PIE DE PÁGINA (Footer)
           ========================================================================== */
        footer {
            background-color: #050506;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding: 40px 0;
            text-align: center;
        }

        footer p {
            color: var(--texto-mutated, #6b7280);
            font-size: 0.9rem;
        }

        footer .gta-brand {
            color: var(--gta-verde);
            font-weight: bold;
            letter-spacing: 1px;
            margin-top: 10px;
            display: inline-block;
        }

        /* ==========================================================================
           7. DISEÑO RESPONSIVO (Media Queries)
           ========================================================================== */
        @media (max-width: 992px) {
            .grid-personajes {
                grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
            }
            .grid-caracteristicas {
                grid-template-columns: 1fr; /* Una sola columna en tablets */
                gap: 30px;
            }
        }

        @media (max-width: 768px) {
            .nav-bar {
                flex-direction: column;
                gap: 15px;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .grid-personajes {
                grid-template-columns: 1fr; /* 1 columna en móviles */
            }
        }