:root {
                    --bisque: #ffe4c4;
                    --bisque-dim: rgba(255, 228, 196, 0.65);
                    --blue-deep: #020c1b;
                    --blue-mid: #0a1f3d;
                    --blue-accent: #4e9fff;
                    --red-accent: #ff3355;
                    --black: #000;
                    --card-bg: #080e18;
                }

                .div-global-seccion {
                    scroll-behavior: smooth;
                }

                .div-global-seccion {
                    background: var(--black);
                    color: var(--bisque);
                    font-family: 'Cormorant Garamond', Georgia, serif;
                    min-height: 100vh;
                    overflow-x: hidden;
                }

                /* ════════════════════════════════════════════
       NAVBAR SIMPLE
    ════════════════════════════════════════════ */
                .ak-nav-logo:hover {
                    text-decoration: none;
                }

                .gvp-nav {

                    top: 0;
                    left: 0;
                    right: 0;
                    z-index: 100;
                    background: rgba(2, 12, 27, 0.92);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid rgba(255, 228, 196, 0.15);
                    padding: 14px 30px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .gvp-nav-logo {
                    font-family: 'Lilita One', cursive;
                    font-size: 1.1rem;
                    color: var(--bisque);
                    text-decoration: none;
                    letter-spacing: 1px;
                }

                .gvp-nav-logo span {
                    color: var(--blue-accent);
                }

                .gvp-nav-back {
                    font-family: 'Lilita One', cursive;
                    font-size: 0.8rem;
                    color: var(--bisque-dim);
                    text-decoration: none;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    transition: color 0.3s;
                    display: flex;
                    align-items: center;
                    gap: 6px;
                }

                .gvp-nav-back:hover {
                    color: var(--bisque);
                }

                /* ════════════════════════════════════════════
       HERO BANNER
    ════════════════════════════════════════════ */
                .gvp-hero {
                    position: relative;
                    min-height: 100vh;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    padding: 120px 20px 80px;
                    overflow: hidden;
                    background: linear-gradient(160deg,
                            #020c1b 0%,
                            #071830 30%,
                            #0d2a52 60%,
                            #041020 100%);
                }

                /* Grid de líneas de fondo */
                .gvp-hero::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background-image:
                        linear-gradient(rgba(78, 159, 255, 0.05) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(78, 159, 255, 0.05) 1px, transparent 1px);
                    background-size: 60px 60px;
                    pointer-events: none;
                }

                /* Orbes de luz */
                .gvp-orb {
                    position: absolute;
                    border-radius: 50%;
                    filter: blur(80px);
                    pointer-events: none;
                    animation: gvpOrbPulse ease-in-out infinite alternate;
                }

                .gvp-orb-1 {
                    width: 500px;
                    height: 500px;
                    top: -100px;
                    left: -100px;
                    background: rgba(78, 159, 255, 0.18);
                    animation-duration: 9s;
                }

                .gvp-orb-2 {
                    width: 400px;
                    height: 400px;
                    bottom: -80px;
                    right: -80px;
                    background: rgba(255, 228, 196, 0.12);
                    animation-duration: 12s;
                }

                .gvp-orb-3 {
                    width: 300px;
                    height: 300px;
                    top: 40%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: rgba(255, 51, 85, 0.08);
                    animation-duration: 7s;
                }

                @keyframes gvpOrbPulse {
                    0% {
                        transform: scale(1);
                        opacity: 0.7;
                    }

                    100% {
                        transform: scale(1.25);
                        opacity: 1;
                    }
                }

                /* Partículas JS */
                .gvp-particle {
                    position: absolute;
                    border-radius: 50%;
                    opacity: 0;
                    animation: gvpFloat linear infinite;
                    pointer-events: none;
                }

                @keyframes gvpFloat {
                    0% {
                        transform: translateY(0) scale(0);
                        opacity: 0;
                    }

                    15% {
                        opacity: 1;
                    }

                    85% {
                        opacity: 0.4;
                    }

                    100% {
                        transform: translateY(-150px) scale(2);
                        opacity: 0;
                    }
                }

                /* Contenido del hero */
                .gvp-hero-content {
                    position: relative;
                    z-index: 2;
                    max-width: 900px;
                }

                .gvp-tag {
                    display: inline-block;
                    font-family: 'Lilita One', cursive;
                    font-size: 0.7rem;
                    letter-spacing: 4px;
                    text-transform: uppercase;
                    color: var(--blue-accent);
                    border: 1px solid rgba(78, 159, 255, 0.4);
                    padding: 6px 20px;
                    border-radius: 2px;
                    margin-bottom: 30px;
                    backdrop-filter: blur(6px);
                }

                .gvp-hero-title {
                    font-family: 'Luckiest Guy', cursive;
                    font-size: clamp(2.5rem, 7vw, 6rem);
                    line-height: 1;
                    letter-spacing: 3px;
                    margin-bottom: 12px;
                    background: linear-gradient(90deg,
                            #ffe4c4 0%,
                            #4e9fff 20%,
                            #ff3355 40%,
                            #ffffff 55%,
                            #4e9fff 70%,
                            #ffe4c4 100%);
                    background-size: 300% auto;
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                    animation: gvpTitleFlow 6s linear infinite;
                    text-shadow: none;
                }

                @keyframes gvpTitleFlow {
                    0% {
                        background-position: 0% center;
                    }

                    100% {
                        background-position: 300% center;
                    }
                }

                .gvp-hero-sub1 {
                    font-family: 'Lilita One', cursive;
                    font-size: clamp(1.1rem, 3vw, 2rem);
                    color: var(--bisque);
                    font-style: italic;
                    margin-bottom: 6px;
                    opacity: 0.9;
                }

                .gvp-hero-sub2 {
                    font-family: 'Cormorant Garamond', serif;
                    font-size: clamp(0.95rem, 2vw, 1.3rem);
                    color: var(--bisque-dim);
                    font-style: italic;
                    margin-bottom: 40px;
                }

                /* Divisor ornamental */
                .gvp-ornament {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 16px;
                    margin: 0 auto 40px;
                }

                .gvp-ornament-line {
                    width: 100px;
                    height: 1px;
                    background: linear-gradient(90deg, transparent, var(--bisque), transparent);
                }

                .gvp-ornament-dot {
                    color: var(--bisque);
                    font-size: 1.4rem;
                }

                /* Scroll indicator */
                .gvp-scroll {
                    position: absolute;
                    bottom: 30px;
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 8px;
                    z-index: 2;
                    animation: gvpScrollBounce 2s ease-in-out infinite;
                }

                .gvp-scroll span {
                    font-family: 'Lilita One', cursive;
                    font-size: 0.65rem;
                    letter-spacing: 3px;
                    color: var(--bisque-dim);
                    text-transform: uppercase;
                }

                .gvp-scroll-arrow {
                    width: 20px;
                    height: 20px;
                    border-right: 2px solid var(--bisque-dim);
                    border-bottom: 2px solid var(--bisque-dim);
                    transform: rotate(45deg);
                }

                @keyframes gvpScrollBounce {

                    0%,
                    100% {
                        transform: translateX(-50%) translateY(0);
                    }

                    50% {
                        transform: translateX(-50%) translateY(8px);
                    }
                }

                /* ════════════════════════════════════════════
       SEPARADOR BISQUE con glow
    ════════════════════════════════════════════ */
                .gvp-divider {
                    width: 100%;
                    height: 1px;
                    border: none;
                    /* Asegura que la etiqueta hr no tenga borde default */
                    background: linear-gradient(90deg,
                            transparent 0%,
                            rgba(255, 228, 196, 0.1) 5%,
                            var(--bisque) 30%,
                            var(--bisque) 70%,
                            rgba(255, 228, 196, 0.1) 95%,
                            transparent 100%);
                    animation: gvpDivGlow 3s ease-in-out infinite alternate;
                    margin: 0;
                }

                @keyframes gvpDivGlow {
                    0% {
                        box-shadow: 0 0 5px rgba(255, 228, 196, 0.2);
                    }

                    100% {
                        box-shadow: 0 0 20px rgba(255, 228, 196, 0.7), 0 0 40px rgba(255, 228, 196, 0.3);
                    }
                }

                /* ════════════════════════════════════════════
       TARJETAS DE PERSONAJES (página completa)
    ════════════════════════════════════════════ */
                .gvp-section {
                    background: var(--black);
                }

                .gvp-card {
                    display: flex;
                    align-items: stretch;
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 70px 40px;
                    gap: 60px;
                    opacity: 0;
                    transform: translateY(40px);
                    transition: opacity 0.8s ease, transform 0.8s ease;
                }

                .gvp-card.gvp-visible {
                    opacity: 1;
                    transform: translateY(0);
                }

                /* Alternar: usamos nth-of-type en vez de nth-child para que no cuente las etiquetas hr */
                .gvp-card:nth-of-type(even) {
                    flex-direction: row-reverse;
                }

                /* Imagen */
                .gvp-img-col {
                    flex: 0 0 420px;
                    position: relative;
                }

                .gvp-img-frame {
                    position: relative;
                    border-radius: 8px;
                    overflow: hidden;
                    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
                    transition: box-shadow 0.4s ease, transform 0.4s ease;
                }

                .gvp-img-frame:hover {
                    transform: translateY(-8px);
                    box-shadow:
                        0 0 30px rgba(255, 228, 196, 0.5),
                        0 0 65px rgba(255, 228, 196, 0.25),
                        0 25px 50px rgba(0, 0, 0, 0.9);
                }

                .gvp-img-frame img {
                    width: 100%;
                    height: 520px;
                    object-fit: cover;
                    object-position: top center;
                    display: block;
                    filter: brightness(0.9) contrast(1.05) saturate(1.1);
                    transition: transform 0.7s ease, filter 0.4s ease;
                }

                .gvp-img-frame:hover img {
                    transform: scale(1.04);
                    filter: brightness(1.0) contrast(1.08) saturate(1.15);
                }

                /* Overlay de gradiente en la imagen */
                .gvp-img-frame::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(to bottom,
                            transparent 55%,
                            rgba(0, 0, 0, 0.6) 100%);
                    pointer-events: none;
                }

                /* Número flotante */
                .gvp-num {
                    position: absolute;
                    top: 18px;
                    left: 18px;
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    background: rgba(0, 0, 0, 0.75);
                    border: 2px solid var(--bisque);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: 'Lilita One', cursive;
                    font-size: 1.1rem;
                    color: var(--bisque);
                    z-index: 3;
                    backdrop-filter: blur(6px);
                    box-shadow: 0 0 12px rgba(255, 228, 196, 0.4);
                }

                /* Texto */
                .gvp-text-col {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding: 10px 0;
                }

                .gvp-role {
                    font-family: 'Lilita One', cursive;
                    font-size: 0.72rem;
                    letter-spacing: 3px;
                    text-transform: uppercase;
                    color: var(--blue-accent);
                    margin-bottom: 12px;
                    opacity: 0.9;
                }

                .gvp-name {
                    font-family: 'Luckiest Guy', cursive;
                    font-size: clamp(2.2rem, 4vw, 3.8rem);
                    color: var(--bisque);
                    line-height: 1;
                    margin-bottom: 20px;
                    letter-spacing: 1px;
                    text-shadow:
                        0 2px 20px rgba(255, 228, 196, 0.2),
                        0 0 40px rgba(255, 228, 196, 0.1);
                }

                /* Línea decorativa bajo el nombre */
                .gvp-name-line {
                    width: 60px;
                    height: 3px;
                    background: linear-gradient(90deg, var(--bisque), transparent);
                    margin-bottom: 24px;
                    border-radius: 2px;
                }

                .gvp-desc {
                    font-family: 'Cormorant Garamond', serif;
                    font-size: 1.2rem;
                    line-height: 1.85;
                    color: rgba(255, 228, 196, 0.78);
                    font-weight: 300;
                    font-style: italic;
                    margin-bottom: 32px;
                }

                /* Quote decorativo */
                .gvp-quote-mark {
                    font-family: Georgia, serif;
                    font-size: 5rem;
                    line-height: 0.6;
                    color: rgba(78, 159, 255, 0.2);
                    display: block;
                    margin-bottom: 8px;
                    user-select: none;
                }

                /* Botón Read More */
                .gvp-btn {
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    padding: 12px 32px;
                    border: 1.5px solid var(--bisque);
                    color: var(--bisque);
                    font-family: 'Lilita One', cursive;
                    font-size: 0.82rem;
                    letter-spacing: 2.5px;
                    text-transform: uppercase;
                    text-decoration: none;
                    border-radius: 3px;
                    position: relative;
                    overflow: hidden;
                    transition: color 0.35s ease, box-shadow 0.35s ease;
                    width: fit-content;
                }

                .gvp-btn::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: var(--bisque);
                    transform: translateX(-101%);
                    transition: transform 0.35s ease;
                    z-index: 0;
                }

                .gvp-btn span,
                .gvp-btn i {
                    position: relative;
                    z-index: 1;
                }

                .gvp-btn:hover {
                    color: #000;
                    box-shadow: 0 0 25px rgba(255, 228, 196, 0.55);
                }

                .gvp-btn:hover::before {
                    transform: translateX(0);
                }

                /* ════════════════════════════════════════════
       FOOTER DE LA PÁGINA
    ════════════════════════════════════════════ */
                .gvp-footer {
                    background: var(--blue-deep);
                    border-top: 1px solid rgba(255, 228, 196, 0.12);
                    padding: 50px 30px;
                    text-align: center;
                }

                .gvp-footer p {
                    font-family: 'Lilita One', cursive;
                    font-size: 0.75rem;
                    letter-spacing: 2px;
                    color: var(--bisque-dim);
                    text-transform: uppercase;
                }

                .gvp-footer a {
                    color: var(--bisque);
                    text-decoration: none;
                    transition: opacity 0.3s;
                }

                .gvp-footer a:hover {
                    opacity: 0.7;
                }

                /* ════════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════════ */
                @media (max-width: 900px) {

                    .gvp-card,
                    .gvp-card:nth-of-type(even) {
                        flex-direction: column !important;
                        padding: 50px 20px;
                        gap: 36px;
                    }

                    .gvp-img-col {
                        flex: none;
                        width: 100%;
                    }

                    .gvp-img-frame img {
                        height: 320px;
                    }

                    .gvp-name {
                        font-size: 2.2rem;
                    }
                }

                @media (max-width: 480px) {
                    .gvp-hero-title {
                        font-size: 2.4rem;
                    }

                    .gvp-img-frame img {
                        height: 260px;
                    }
                }