css
/* =========================================================
   GOT ENTERTAINMENT PERÚ
   DARK NEON EDITION
   Diseño original
========================================================= */

:root {
    --bg: #030509;
    --bg-2: #070b12;
    --surface: rgba(12, 18, 28, 0.88);
    --surface-2: rgba(18, 26, 39, 0.92);

    --cyan: #00e5ff;
    --blue: #168cff;
    --purple: #8b2cff;
    --pink: #ff2bd6;
    --gold: #ffd21f;

    --white: #ffffff;
    --text: #e7edf5;
    --muted: #9ba8b8;

    --border: rgba(0, 229, 255, 0.16);

    --radius: 18px;

    --shadow:
        0 20px 60px rgba(0, 0, 0, 0.55);
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
    background: var(--bg);
}


body {
    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    line-height: 1.7;

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(0, 229, 255, 0.12),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 20%,
            rgba(139, 44, 255, 0.13),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(255, 43, 214, 0.07),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #020408 0%,
            #050913 45%,
            #020307 100%
        );

    background-attachment: fixed;

    overflow-x: hidden;
}


/* =========================================================
   EFECTO DE PROFUNDIDAD DEL FONDO
========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -1;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

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


/* =========================================================
   ELEMENTOS GENERALES
========================================================= */

img {
    max-width: 100%;
    height: auto;
    display: block;
}


a {
    color: var(--cyan);
    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease,
        opacity .25s ease;
}


a:hover {
    color: var(--gold);
}


button,
input,
textarea {
    font-family: inherit;
}


h1,
h2,
h3 {
    line-height: 1.2;
}


p {
    color: #ffffff;
}


/* =========================================================
   HEADER ORIGINAL GOT ENTERTAINMENT PERÚ
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
}


.header-container {
    width: 100%;
    margin: 0 auto;

    display: flex;
    align-items: center;
}


/* =========================================================
   LOGO ORIGINAL
========================================================= */

.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}


.brand-logo {
    display: block;
    width: auto;
    max-width: 180px;
    max-height: 60px;
    object-fit: contain;
}


/* =========================================================
   BOTÓN: OCULTO EN ESCRITORIO
========================================================= */

.menu-toggle {
    display: none;
}


/* =========================================================
   MENÚ ORIGINAL DE ESCRITORIO
========================================================= */

.main-nav {
    display: flex;
    align-items: center;
}


/* =========================================================
   SOLO TABLET Y MÓVIL
   BOTÓN A LA IZQUIERDA
   LOGO A LA DERECHA
========================================================= */

@media screen and (max-width: 991px) {

    .header-container {
        min-height: 70px;

        padding:
            10px 15px;

        display: flex;
        align-items: center;

        justify-content: space-between;
    }


    /* BOTÓN A LA IZQUIERDA */

    .menu-toggle {
        display: flex;

        order: 1;

        width: 48px;
        height: 48px;

        margin: 0;
        padding: 0;

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

        border: 0;
        border-radius: 8px;

        cursor: pointer;

        font-size: 27px;
        line-height: 1;

        flex-shrink: 0;

        z-index: 10001;
    }


    /* LOGO A LA DERECHA */

    .brand {
        order: 2;

        margin-left: auto;
    }


    .brand-logo {
        max-width: 150px;
        max-height: 50px;
    }


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

    .main-nav {
        position: fixed !important;

        top: 70px !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 5px !important;

        margin: 0 !important;

        padding: 15px !important;

        background: #111111 !important;

        z-index: 99999 !important;

        transform: translateY(-150%) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease,
            visibility 0.3s ease !important;
    }


    .main-nav.menu-open {
        transform: translateY(0) !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    .main-nav a {
        display: flex !important;

        width: 100% !important;

        min-height: 50px !important;

        align-items: center !important;

        justify-content: flex-start !important;

        padding: 12px 18px !important;

        color: #ffffff !important;

        background: #222222 !important;

        border-radius: 7px !important;

        text-decoration: none !important;

        font-size: 16px !important;
    }

}


/* =========================================================
   CELULARES
========================================================= */

@media screen and (max-width: 600px) {

    .header-container {
        min-height: 65px;

        padding:
            8px 12px;
    }


    .menu-toggle {
        width: 44px;
        height: 44px;

        font-size: 25px;
    }


    .brand-logo {
        max-width: 130px;
        max-height: 48px;
    }


    .main-nav {
        top: 65px !important;

        max-height:
            calc(100vh - 65px) !important;

        overflow-y: auto !important;
    }

}

    /* =========================================================
   MENÚ RESPONSIVE GOT ENTERTAINMENT PERÚ
   VERSIÓN CORREGIDA
========================================================= */

@media screen and (max-width: 991px) {

    .main-nav {
        position: fixed !important;

        top: 70px !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 15px !important;

        background: #111111 !important;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.45) !important;

        z-index: 99999 !important;

        /* ESTADO CERRADO */
        transform: translateY(-150%) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease,
            visibility 0.3s ease !important;
    }


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

    .main-nav.menu-open {
        transform: translateY(0) !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* =====================================================
       ENLACES
    ===================================================== */

    .main-nav a {
        display: flex !important;

        width: 100% !important;

        min-height: 50px !important;

        align-items: center !important;

        justify-content: flex-start !important;

        padding: 12px 18px !important;

        background: #222222 !important;

        color: #ffffff !important;

        border-radius: 7px !important;

        text-decoration: none !important;

        font-size: 16px !important;

        font-weight: 600 !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    .main-nav a:hover {
        background: #ffffff !important;

        color: #111111 !important;
    }


    /* =====================================================
       BOTÓN
    ===================================================== */

    .menu-toggle {
        display: flex !important;

        position: relative !important;

        z-index: 100000 !important;
    }


    /* =====================================================
       BLOQUEAR SCROLL
    ===================================================== */

    body.menu-is-open {
        overflow: hidden;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media screen and (max-width: 600px) {

    .main-nav {
        top: 65px !important;

        max-height:
            calc(100vh - 65px) !important;

        overflow-y: auto !important;

        padding: 12px !important;
    }

}


/* =========================================================
   CELULARES
========================================================= */

@media screen and (max-width: 600px) {

    .header-container {
        min-height: 65px;

        padding:
            8px 12px;
    }


    .menu-toggle {
        width: 44px;
        height: 44px;

        font-size: 25px;
    }


    .brand-logo {
        max-width: 130px;
        max-height: 48px;
    }


    .main-nav {
        top: 65px;

        max-height:
            calc(100vh - 65px);
    }

}

/* =========================================================
   LOGO
========================================================= */

.brand {
    display: flex;
    align-items: center;
}


.brand-logo {

    width: 92px;

    max-height: 65px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 15px
            rgba(0,229,255,.20)
        );

    transition:
        transform .3s ease,
        filter .3s ease;
}


.brand:hover .brand-logo {

    transform:
        scale(1.06);

    filter:
        drop-shadow(
            0 0 25px
            rgba(0,229,255,.45)
        );
}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.main-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 5px;
}


.main-nav a {

    position: relative;

    padding:
        9px 13px;

    color:
        #d9e3ee;

    font-size:
        .82rem;

    font-weight:
        700;

    border-radius:
        9px;

    transition:
        all .25s ease;
}


.main-nav a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 3px;

    width: 0;

    height: 2px;

    transform:
        translateX(-50%);

    background:
        var(--cyan);

    box-shadow:
        0 0 8px var(--cyan);

    transition:
        width .25s ease;
}


.main-nav a:hover {

    color:
        var(--cyan);

    background:
        rgba(0,229,255,.06);
}


.main-nav a:hover::after {

    width: 55%;
}


.main-nav a.active {

    color:
        var(--cyan);
}


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

.menu-toggle {

    display: none;

    width: 45px;

    height: 45px;

    color: white;

    background:
        rgba(255,255,255,.04);

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

    border-radius:
        10px;

    font-size:
        1.4rem;
}


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

.hero {

    position: relative;

    min-height:
        calc(100vh - 78px);

    padding:
        90px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    overflow:
        hidden;
}


.hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    top: -250px;

    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(0,229,255,.08);

    filter:
        blur(90px);

    pointer-events:
        none;
}


.hero-content {

    position:
        relative;

    z-index:
        1;

    width:
        min(100%, 900px);

    margin:
        auto;
}


.hero-logo {

    width:
        190px;

    max-height:
        190px;

    object-fit:
        contain;

    margin:
        0 auto 30px;

    filter:
        drop-shadow(
            0 0 30px
            rgba(0,229,255,.30)
        );

    animation:
        logoGlow 4s ease-in-out infinite;
}


@keyframes logoGlow {

    0%,
    100% {
        filter:
            drop-shadow(
                0 0 20px
                rgba(0,229,255,.20)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 38px
                rgba(0,229,255,.50)
            );
    }
}


.hero h1 {

    font-size:
        clamp(
            2.2rem,
            6vw,
            4.7rem
        );

    font-weight:
        900;

    letter-spacing:
        -2px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            var(--cyan),
            #ffffff,
            var(--purple)
        );

    background-size:
        250% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    animation:
        titleFlow 6s linear infinite;
}


@keyframes titleFlow {

    to {
        background-position:
            250% center;
    }
}


.hero-description {

    max-width:
        720px;

    margin:
        20px auto 35px;

    font-size:
        clamp(
            1rem,
            2vw,
            1.2rem
        );
}


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

.content-section {

    position:
        relative;

    padding:
        100px 20px;

    border-top:
        1px solid
        rgba(255,255,255,.05);
}


.content-section:nth-child(even) {

    background:
        rgba(255,255,255,.012);
}


.section-container {

    width:
        min(
            100%,
            1200px
        );

    margin:
        auto;
}


.content-section h2 {

    position:
        relative;

    display:
        inline-block;

    margin-bottom:
        20px;

    font-size:
        clamp(
            2rem,
            5vw,
            3.3rem
        );

    font-weight:
        900;
}


.content-section h2::after {

    content: "";

    display:
        block;

    width:
        70px;

    height:
        4px;

    margin-top:
        14px;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--purple)
        );

    box-shadow:
        0 0 15px
        rgba(0,229,255,.45);
}


.content-section h3 {

    margin:
        40px 0 20px;

    color:
        #ffffff;
}


/* =========================================================
   TARJETAS
========================================================= */

.player-card {

    position:
        relative;

    margin:
        35px 0;

    padding:
        25px;

    background:
        linear-gradient(
            145deg,
            rgba(18,27,42,.92),
            rgba(5,9,16,.94)
        );

    border:
        1px solid
        rgba(0,229,255,.13);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    overflow:
        hidden;
}


.player-card::before {

    content: "";

    position:
        absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            var(--purple),
            transparent
        );
}


.player-card h2,
.player-card h3 {

    color:
        #ffffff;

    margin-top:
        0;
}


.player-container {

    position:
        relative;

    width:
        100%;

    height:
        250px;

    overflow:
        hidden;

    background:
        #000;

    border-radius:
        12px;

    box-shadow:
        inset 0 0 30px
        rgba(0,0,0,.8);
}


.player-container iframe {

    display:
        block;

    width:
        100%;

    height:
        250px;

    border:
        0;
}


.player-description {

    margin:
        15px 0 0;

    text-align:
        center;
}


/* =========================================================
   BOTONES
========================================================= */

.primary-button,
.secondary-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        12px 23px;

    border-radius:
        11px;

    font-weight:
        800;

    transition:
        all .3s ease;
}


.primary-button {

    color:
        #001014;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            #42f5ff
        );

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

    box-shadow:
        0 0 25px
        rgba(0,229,255,.20);
}


.primary-button:hover {

    color:
        #001014;

    transform:
        translateY(-3px);

    box-shadow:
        0 0 35px
        rgba(0,229,255,.45);
}


.secondary-button {

    color:
        #ffffff;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid
        rgba(255,255,255,.15);
}


.secondary-button:hover {

    color:
        #ffffff;

    border-color:
        var(--cyan);

    background:
        rgba(0,229,255,.07);

    transform:
        translateY(-3px);
}


/* =========================================================
   VIDEOS
========================================================= */

.video-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px,1fr)
        );

    gap:
        25px;

    margin:
        30px 0 40px;
}


.video-grid iframe {

    width:
        100%;

    aspect-ratio:
        16 / 9;

    height:
        auto;

    border:
        0;

    border-radius:
        14px;

    background:
        #000;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.5);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.video-grid iframe:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 50px
        rgba(0,229,255,.10);
}


/* =========================================================
   PUBLICIDAD
========================================================= */

.advertising {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px,1fr)
        );

    gap:
        25px;

    margin-top:
        40px;
}


.advertising a {

    display:
        block;

    overflow:
        hidden;

    background:
        #05080d;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        14px;

    transition:
        all .3s ease;
}


.advertising a:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(0,229,255,.35);

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


.advertising img {

    width:
        100%;

    height:
        auto;
}


/* =========================================================
   FORMULARIO
========================================================= */

.contact-section {

    background:
        radial-gradient(
            circle at center,
            rgba(0,229,255,.05),
            transparent 45%
        );
}


.contact-form {

    max-width:
        800px;

    margin:
        40px auto 0;

    padding:
        30px;

    background:
        rgba(8,14,23,.88);

    border:
        1px solid
        rgba(0,229,255,.12);

    border-radius:
        var(--radius);

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


.form-group {

    margin-bottom:
        22px;
}


.form-group label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #ffffff;

    font-weight:
        700;
}


.form-group input,
.form-group textarea {

    width:
        100%;

    color:
        #ffffff;

    background:
        rgba(0,0,0,.45);

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        10px;

    outline:
        none;

    padding:
        13px 15px;

    transition:
        all .25s ease;
}


.form-group input {

    min-height:
        48px;
}


.form-group textarea {

    min-height:
        150px;

    resize:
        vertical;
}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color:
        #687789;
}


.form-group input:focus,
.form-group textarea:focus {

    border-color:
        var(--cyan);

    box-shadow:
        0 0 0 3px
        rgba(0,229,255,.08),

        0 0 20px
        rgba(0,229,255,.05);
}


.form-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        25px;
}


/* =========================================================
   REDES
========================================================= */

.social-links {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        35px;
}


.social-links a {

    padding:
        10px 17px;

    color:
        #ffffff;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        10px;
}


.social-links a:hover {

    color:
        var(--cyan);

    border-color:
        var(--cyan);

    background:
        rgba(0,229,255,.06);

    text-decoration-color: ffffff ;
}


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

.site-footer {

    padding:
        55px 20px;

    text-align:
        center;

    background:
        #010204;

    border-top:
        1px solid
        rgba(0,229,255,.10);
}


.site-footer p {

    margin-bottom:
        8px;

    color:
        #667486;

    font-size:
        .9rem;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-button {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        2000;

    width:
        62px;

    height:
        62px;

    padding:
        8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #25d366;

    border:
        2px solid
        rgba(255,255,255,.18);

    border-radius:
        50%;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.6);

    animation:
        whatsappPulse 3s infinite;
}


.whatsapp-button img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


@keyframes whatsappPulse {

    0%,
    100% {
        box-shadow:
            0 8px 30px
            rgba(0,0,0,.6);
    }

    50% {
        box-shadow:
            0 8px 35px
            rgba(37,211,102,.35);
    }
}


/* =========================================================
   ANIMACIÓN DE ENTRADA
========================================================= */

@keyframes gotAppear {

    from {

        opacity:
            0;

        transform:
            translateY(25px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


.hero-content {

    animation:
        gotAppear .9s ease both;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .header-container {

        width:
            calc(100% - 30px);
    }


    .main-nav a {

        padding:
            7px 9px;

        font-size:
            .76rem;
    }


    .content-section {

        padding:
            80px 18px;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    .header-container {

        min-height:
            65px;
    }


    .brand-logo {

        width:
            72px;

        max-height:
            52px;
    }


    .menu-toggle {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;
    }


    .main-nav {

        position:
            absolute;

        top:
            65px;

        left:
            0;

        right:
            0;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        padding:
            10px 15px 15px;

        background:
            rgba(2,5,9,.98);

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

        box-shadow:
            0 20px 40px
            rgba(0,0,0,.6);
    }


    .main-nav.is-open {

        display:
            flex;
    }


    .main-nav a {

        width:
            100%;

        padding:
            13px 15px;

        font-size:
            .95rem;

        justify-content:
            flex-start;
    }


    .hero {

        min-height:
            auto;

        padding:
            75px 18px;
    }


    .hero-logo {

        width:
            145px;
    }


    .hero h1 {

        font-size:
            2.25rem;
    }


    .content-section {

        padding:
            65px 16px;
    }


    .player-card {

        padding:
            15px;
    }


    .video-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .advertising {

        grid-template-columns:
            1fr;
    }


    .contact-form {

        padding:
            20px;
    }


    .form-actions {

        flex-direction:
            column;
    }


    .form-actions .primary-button,
    .form-actions .secondary-button {

        width:
            100%;
    }


    .social-links {

        flex-direction:
            column;
    }


    .social-links a {

        width:
            100%;

        text-align:
            center;
    }


    .whatsapp-button {

        width:
            56px;

        height:
            56px;

        right:
            15px;

        bottom:
            15px;
    }

}


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

@media (max-width: 400px) {

    .hero {

        padding:
            60px 14px;
    }


    .hero-logo {

        width:
            120px;
    }


    .hero h1 {

        font-size:
            2rem;
    }


    .content-section {

        padding:
            55px 13px;
    }


    .player-card {

        padding:
            12px;
    }


    .player-container,
    .player-container iframe {

        height:
            240px;
    }


    .primary-button,
    .secondary-button {

        width:
            100%;
    }

}


/* =========================================================
   REDUCIR ANIMACIONES
========================================================= */

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

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}


/* =========================================================
   IMPRESIÓN
========================================================= */

@media print {

    .site-header,
    .menu-toggle,
    .whatsapp-button {

        display:
            none !important;
    }


    body {

        background:
            #ffffff;

        color:
            #000000;
    }

    ```css id="2n5d3a"
/* =========================================================
   CORRECCIÓN DE VISIBILIDAD DEL TEXTO
   GOT ENTERTAINMENT PERÚ
========================================================= */

/* Texto general */
body,
main,
section,
article,
div {
    color: #e7edf5;
}


/* =========================================================
   TÍTULOS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff !important;
}


/* Título principal */
.hero h1 {
    color: #ffffff;
}


/* Títulos de las secciones */
.content-section h2 {
    color: #ffffff !important;

    text-shadow:
        0 0 12px rgba(0, 229, 255, 0.18);
}


/* Subtítulos */
.content-section h3,
.player-card h2,
.player-card h3 {
    color: #00e5ff !important;
}


/* =========================================================
   PÁRRAFOS
========================================================= */

p {
    color: #d5dee9 !important;
}


/* Texto principal del Hero */
.hero-description {
    color: #dce6f0 !important;
}


/* Descripción del reproductor */
.player-description {
    color: #c7d3df !important;
}


/* =========================================================
   ENLACES
========================================================= */

a {
    color: #00e5ff;
}


a:hover {
    color: #ffd21f;
}


/* Enlaces de navegación */
.main-nav a {
    color: #f1f5f9 !important;
}


.main-nav a:hover,
.main-nav a.active {
    color: #00e5ff !important;
}


/* =========================================================
   BOTONES
========================================================= */

.primary-button {
    color: #001014 !important;
}


.primary-button:hover {
    color: #001014 !important;
}


.secondary-button {
    color: #ffffff !important;
}


/* =========================================================
   FORMULARIO
========================================================= */

.form-group label {
    color: #ffffff !important;
}


.form-group input,
.form-group textarea {
    color: #ffffff !important;

    background:
        rgba(0, 0, 0, 0.55) !important;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #8291a3 !important;
}


/* =========================================================
   REDES SOCIALES
========================================================= */

.social-links a {
    color: #dce6f0 !important;
}


.social-links a:hover {
    color: #00e5ff !important;
}


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

.site-footer {
    color: #d5dee9;
}


.site-footer p {
    color: #9eacbb !important;
}


.site-footer a {
    color: #00e5ff !important;
}


/* =========================================================
   TEXTO DENTRO DE TARJETAS
========================================================= */

.player-card {
    color: #e7edf5;
}


.player-card p {
    color: #cbd6e2 !important;
}


/* =========================================================
   PUBLICIDAD
========================================================= */

.advertising a {
    color: #ffffff;
}


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

.content-section,
.content-section p,
.section-container {
    color: #e7edf5;
}


/* =========================================================
   ACCESIBILIDAD / SELECCIÓN
========================================================= */

::selection {
    background: #00e5ff;
    color: #001014;
}



}

/* =========================================================
   TEXTOS DESTACADOS — AZUL NEÓN GOT
========================================================= */

/* Títulos de todas las secciones */
.content-section h2,
.content-section h2.major,
section h2,
article h2 {
    color: #00eaff !important;

    text-shadow:
        0 0 5px rgba(0, 234, 255, 0.75),
        0 0 12px rgba(0, 234, 255, 0.55),
        0 0 25px rgba(0, 234, 255, 0.35);
}


/* Título del formulario */
.contact-section h2,
.contact-form h2,
#contact h2 {
    color: #00eaff !important;

    text-shadow:
        0 0 5px rgba(0, 234, 255, 0.85),
        0 0 12px rgba(0, 234, 255, 0.65),
        0 0 28px rgba(0, 234, 255, 0.45);
}


/* =========================================================
   TEXTO DEL HERO
   "Radio online, música, podcasts..."
========================================================= */

.hero-description {
    color: #00eaff !important;

    font-weight: 600;

    text-shadow:
        0 0 5px rgba(0, 234, 255, 0.55),
        0 0 12px rgba(0, 234, 255, 0.30);
}


/* =========================================================
   TEXTO DE CONTACTO
   "¿Quieres comunicarte con GOT Entertainment Perú?"
========================================================= */

.contact-section > .section-container > p,
#contact > p,
.contact-intro {
    color: #00eaff !important;

    font-weight: 600;

    text-shadow:
        0 0 5px rgba(0, 234, 255, 0.55),
        0 0 12px rgba(0, 234, 255, 0.30);
}


/* =========================================================
   EFECTO AL PASAR EL RATÓN SOBRE LOS TÍTULOS
========================================================= */

.content-section h2:hover,
#contact h2:hover {
    text-shadow:
        0 0 5px rgba(0, 234, 255, 1),
        0 0 15px rgba(0, 234, 255, 0.9),
        0 0 35px rgba(0, 234, 255, 0.7);
}


/* =========================================================
   TEXTO NORMAL DEL FORMULARIO
========================================================= */

.contact-form label {
    color: #ffffff !important;
}


.contact-form input,
.contact-form textarea {
    color: #ffffff !important;

    background: rgba(0, 10, 18, 0.85) !important;

    border: 1px solid rgba(0, 234, 255, 0.35) !important;
}


.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #00eaff !important;

    box-shadow:
        0 0 5px rgba(0, 234, 255, 0.6),
        0 0 18px rgba(0, 234, 255, 0.25) !important;
}

        /* =========================================================
   BOTONES — TEXTO BLANCO GOT ENTERTAINMENT PERÚ
========================================================= */

button,
button a,
input[type="submit"],
input[type="reset"],
.primary-button,
.secondary-button,
.form-actions a,
.form-actions button {
    color: #ffffff !important;
}


/* Mantener letras blancas al pasar el mouse */
button:hover,
button a:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.primary-button:hover,
.secondary-button:hover,
.form-actions a:hover,
.form-actions button:hover {
    color: #ffffff !important;
}


/* Botones con fondo neón */
.primary-button {
    background: linear-gradient(
        135deg,
        #0077ff,
        #00eaff
    ) !important;

    border-color: #00eaff !important;

    text-shadow:
        0 0 5px rgba(0, 0, 0, 0.5);
}


/* Botón secundario */
.secondary-button {
    background: rgba(0, 15, 25, 0.85) !important;

    border: 1px solid #00eaff !important;
}


/* Efecto hover */
.primary-button:hover,
.secondary-button:hover {
    box-shadow:
        0 0 10px rgba(0, 234, 255, 0.7),
        0 0 25px rgba(0, 234, 255, 0.35);

    transform: translateY(-2px);
}

/* =========================================================
   BOTÓN PODCAST — DEBAJO DE RADIO RAP
========================================================= */

.podcast-button,
a[href*="stream.zeno.fm"] {
    display: inline-block !important;

    margin-top: 18px;

    padding: 12px 22px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #006eff,
            #00dfff
        ) !important;

    border:
        1px solid #00eaff !important;

    border-radius:
        10px;

    font-weight:
        700;

    text-decoration:
        none !important;

    text-shadow:
        0 0 5px rgba(0, 0, 0, 0.6);

    box-shadow:
        0 0 10px rgba(0, 234, 255, 0.35);

    transition:
        all 0.3s ease;
}


/* Al pasar el mouse */

.podcast-button:hover,
a[href*="stream.zeno.fm"]:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #00dfff,
            #0077ff
        ) !important;

    box-shadow:
        0 0 12px rgba(0, 234, 255, 0.8),
        0 0 30px rgba(0, 234, 255, 0.4);

    transform:
        translateY(-2px);
}

/* =========================================================
   BOTÓN SUBIR — GOT ENTERTAINMENT PERÚ
========================================================= */

.got-back-top {
    position: fixed;

    left: 22px;
    bottom: 22px;

    width: 55px;
    height: 55px;

    display: flex;

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

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #006eff,
            #00eaff
        );

    border: 1px solid #00eaff;

    border-radius: 50%;

    font-size: 28px;
    font-wei.got-back-top
/* =========================================================
   ACERCAR LOGO CENTRAL AL TÍTULO
========================================================= */

.hero-logo {
    margin-bottom: 10px !important;
}


.hero h1 {
    margin-top: 0 !important;
}


/* Acercar también el texto descriptivo al título */
.hero-description {
    margin-top: 12px !important;
}


/* En móviles */
@media (max-width: 700px) {

    .hero-logo {
        margin-bottom: 7px !important;
    }

    .hero-description {
        margin-top: 10px !important;
    }

    /* =========================================================
   HERO — LOGO Y TEXTO PLATEADO NEÓN
   GOT ENTERTAINMENT PERÚ
========================================================= */

/* Logo más cerca del título */
.hero-logo {
    margin-bottom: 0 !important;
}


/* Título inmediatamente debajo del logo */
.hero h1 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}


/* Texto descriptivo en PLATEADO NEÓN */
.hero-description {
    margin-top: 2px !important;

    color: #f2f5f7 !important;

    font-weight: 600;

    text-shadow:
        0 0 3px rgba(255, 255, 255, 0.95),
        0 0 8px rgba(210, 220, 230, 0.75),
        0 0 18px rgba(180, 195, 210, 0.45);

    letter-spacing: 0.2px;
}


/* =========================================================
   VERSIÓN MÓVIL
========================================================= */

@media (max-width: 700px) {

    .hero-logo {
        margin-bottom: 0 !important;
    }

    .hero h1 {
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }

    .hero-description {
        margin-top: 2px !important;
    }

}

/* =========================================================
   HERO COMPACTO — MOSTRAR ZENO AL CARGAR
   GOT ENTERTAINMENT PERÚ
========================================================= */

.hero {
    min-height: auto !important;

    padding-top: 25px !important;
    padding-bottom: 30px !important;
}


/* Logo */
.hero-logo {
    width: 150px !important;

    margin-top: 0 !important;
    margin-bottom: -5px !important;
}


/* Título */
.hero h1 {
    margin-top: 0 !important;
    margin-bottom: 5px !important;

    line-height: 1.1 !important;
}


/* Descripción */
.hero-description {
    margin-top: 3px !important;
    margin-bottom: 12px !important;

    line-height: 1.4 !important;
}


/* Contenedor del reproductor */
.hero .player-card {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}


/* Zeno */
.hero .player-container,
.hero .player-container iframe {
    height: 220px !important;
}


/* =========================================================
   ESCRITORIO
========================================================= */

@media (min-width: 901px) {

    .hero {
        padding-top: 18px !important;
        padding-bottom: 25px !important;
    }

    .hero-logo {
        width: 125px !important;
    }

    .hero h1 {
        font-size: 3rem !important;
    }

    .hero-description {
        margin-bottom: 8px !important;
    }

    .hero .player-container,
    .hero .player-container iframe {
        height: 210px !important;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .hero {
        padding-top: 20px !important;
        padding-bottom: 25px !important;
    }

    .hero-logo {
        width: 130px !important;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    .hero {
        padding-top: 12px !important;
        padding-bottom: 20px !important;
    }

    .hero-logo {
        width: 105px !important;
        margin-bottom: -3px !important;
    }

    .hero h1 {
        font-size: 2rem !important;
        margin-bottom: 4px !important;
    }

    .hero-description {
        margin-top: 2px !important;
        margin-bottom: 8px !important;
        font-size: .9rem !important;
        line-height: 1.3 !important;
    }

    .hero .player-container,
    .hero .player-container iframe {
        height: 200px !important;
    }

}

}

/* =========================================================
   HERO — TEXTO IZQUIERDA / ZENO DERECHA
   GOT ENTERTAINMENT PERÚ
========================================================= */

.hero {
    min-height: auto !important;

    padding:
        35px 20px 40px !important;

    display: flex;

    align-items: center;
}


.hero-content {

    width:
        min(1150px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 45px;

    text-align: left;
}


/* =========================================================
   INFORMACIÓN
========================================================= */

.hero-info {

    padding:
        10px 0;
}


.hero-info h1 {

    margin:
        0 0 15px !important;

    font-size:
        clamp(2.4rem, 5vw, 4.5rem) !important;

    line-height:
        1.05 !important;
}


.hero-description {

    max-width:
        650px;

    margin:
        0 0 25px !important;

    color:
        #f2f5f7 !important;

    font-size:
        1.1rem;

    line-height:
        1.6;

    text-shadow:
        0 0 4px rgba(255,255,255,.8),
        0 0 12px rgba(190,205,220,.45);
}


/* =========================================================
   REPRODUCTOR ZENO
========================================================= */

.hero-player {

    width:
        100%;

    padding:
        10px;
}


.hero-player .player-container {

    width:
        100%;

    height:
        250px;

    overflow:
        hidden;

    background:
        #000;

    border:
        1px solid
        rgba(0,234,255,.35);

    border-radius:
        16px;

    box-shadow:

        0 0 10px
        rgba(0,234,255,.25),

        0 0 30px
        rgba(0,234,255,.10);
}


.hero-player iframe {

    display:
        block;

    width:
        100%;

    height:
        250px;

    border:
        0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .hero-content {

        grid-template-columns:
            1fr 1fr;

        gap:
            25px;
    }


    .hero-info h1 {

        font-size:
            2.7rem !important;
    }


    .hero-description {

        font-size:
            1rem;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    .hero {

        padding:
            30px 15px !important;
    }


    .hero-content {

        display:
            flex;

        flex-direction:
            column;

        gap:
            25px;

        text-align:
            center;
    }


    .hero-info {

        width:
            100%;
    }


    .hero-info h1 {

        font-size:
            2.2rem !important;
    }


    .hero-description {

        margin:
            0 auto 20px !important;

        font-size:
            .95rem;
    }


    .hero-player {

        width:
            100%;

        padding:
            0;
    }


    .hero-player .player-container,
    .hero-player iframe {

        height:
            210px;
    }

}
/* =========================================================
   ZENO A LA MISMA ALTURA DEL ANTIGUO LOGO
   GOT ENTERTAINMENT PERÚ
========================================================= */

.hero-content {
    display: grid !important;

    grid-template-columns:
        1fr 1fr !important;

    align-items:
        start !important;

    gap:
        45px !important;
}


/* Bloque izquierdo */
.hero-info {
    padding-top:
        15px !important;
}


/* Reproductor derecho */
.hero-player {
    display:
        flex !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    padding-top:
        15px !important;
}


/* Reproductor Zeno */
.hero-player .player-container {

    width:
        100% !important;

    height:
        250px !important;

    margin:
        0 !important;
}


.hero-player iframe {

    width:
        100% !important;

    height:
        250px !important;

    display:
        block !important;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    .hero-content {

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        gap:
            25px !important;
    }


    .hero-info {

        padding-top:
            0 !important;
    }


    .hero-player {

        width:
            100% !important;

        padding-top:
            0 !important;
    }

}
/* =========================================================
   HERO FINAL
   TEXTO IZQUIERDA + ZENO DERECHA
========================================================= */

.hero {
    min-height: auto !important;

    padding:
        30px 20px 35px !important;

    display: flex;

    align-items: center;
}


.hero-content {

    width:
        min(1150px, 100%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        start;

    gap:
        50px;

    text-align:
        left;
}


/* =========================================================
   IZQUIERDA
========================================================= */

.hero-info {

    padding-top:
        0 !important;
}


.hero-info h1 {

    margin:
        0 0 15px !important;

    line-height:
        1.05 !important;
}


.hero-description {

    margin:
        0 0 22px !important;

    max-width:
        600px;

    color:
        #f2f5f7 !important;

    font-size:
        1.15rem;

    line-height:
        1.55;

    text-shadow:
        0 0 4px rgba(255,255,255,.8),
        0 0 12px rgba(190,205,220,.45);
}


/* =========================================================
   ZENO — MISMA ALTURA DEL TÍTULO
========================================================= */

.hero-player {

    width:
        100%;

    padding:
        0 !important;

    margin:
        0 !important;

    display:
        flex;

    align-items:
        flex-start;
}


.hero-player .player-container {

    width:
        100%;

    height:
        250px;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden;

    background:
        #000;

    border:
        1px solid
        rgba(0,234,255,.4);

    border-radius:
        16px;

    box-shadow:
        0 0 12px
        rgba(0,234,255,.25),

        0 0 30px
        rgba(0,234,255,.10);
}


.hero-player iframe {

    display:
        block;

    width:
        100%;

    height:
        250px;

    margin:
        0;

    border:
        0;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    .hero {

        padding:
            25px 15px 30px !important;
    }


    .hero-content {

        display:
            flex;

        flex-direction:
            column;

        gap:
            25px;

        text-align:
            center;
    }


    .hero-description {

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            1rem;
    }


    .hero-player {

        width:
            100%;
    }


    .hero-player .player-container,
    .hero-player iframe {

        height:
            210px;
    }

}

}
/* =========================================================
   ZENO A LA MISMA ALTURA DEL ANTIGUO LOGO
   GOT ENTERTAINMENT PERÚ
========================================================= */

.hero-content {
    display: grid !important;

    grid-template-columns:
        1fr 1fr !important;

    align-items:
        start !important;

    gap:
        45px !important;
}


/* Bloque izquierdo */
.hero-info {
    padding-top:
        15px !important;
}


/* Reproductor derecho */
.hero-player {
    display:
        flex !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    padding-top:
        15px !important;
}


/* Reproductor Zeno */
.hero-player .player-container {

    width:
        100% !important;

    height:
        250px !important;

    margin:
        0 !important;
}


.hero-player iframe {

    width:
        100% !important;

    height:
        250px !important;

    display:
        block !important;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    .hero-content {

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        gap:
            25px !important;
    }


    .hero-info {

        padding-top:
            0 !important;
    }


    .hero-player {

        width:
            100% !important;

        padding-top:
            0 !important;
    }

}
/* =========================================================
   HERO FINAL
   TEXTO IZQUIERDA + ZENO DERECHA
========================================================= */

.hero {
    min-height: auto !important;

    padding:
        30px 20px 35px !important;

    display: flex;

    align-items: center;
}


.hero-content {

    width:
        min(1150px, 100%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        start;

    gap:
        50px;

    text-align:
        left;
}


/* =========================================================
   IZQUIERDA
========================================================= */

.hero-info {

    padding-top:
        0 !important;
}


.hero-info h1 {

    margin:
        0 0 15px !important;

    line-height:
        1.05 !important;
}


.hero-description {

    margin:
        0 0 22px !important;

    max-width:
        600px;

    color:
        #f2f5f7 !important;

    font-size:
        1.15rem;

    line-height:
        1.55;

    text-shadow:
        0 0 4px rgba(255,255,255,.8),
        0 0 12px rgba(190,205,220,.45);
}


/* =========================================================
   ZENO — MISMA ALTURA DEL TÍTULO
========================================================= */

.hero-player {

    width:
        100%;

    padding:
        0 !important;

    margin:
        0 !important;

    display:
        flex;

    align-items:
        flex-start;
}


.hero-player .player-container {

    width:
        100%;

    height:
        250px;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden;

    background:
        #000;

    border:
        1px solid
        rgba(0,234,255,.4);

    border-radius:
        16px;

    box-shadow:
        0 0 12px
        rgba(0,234,255,.25),

        0 0 30px
        rgba(0,234,255,.10);
}


.hero-player iframe {

    display:
        block;

    width:
        100%;

    height:
        250px;

    margin:
        0;

    border:
        0;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    .hero {

        padding:
            25px 15px 30px !important;
    }


    .hero-content {

        display:
            flex;

        flex-direction:
            column;

        gap:
            25px;

        text-align:
            center;
    }


    .hero-description {

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            1rem;
    }


    .hero-player {

        width:
            100%;
    }


    .hero-player .player-container,
    .hero-player iframe {

        height:
            210px;
    }

    /* =========================================================
   HERO DEFINITIVO
   LOGO + TEXTO | ZENO
   GOT ENTERTAINMENT PERÚ
========================================================= */

.hero {
    width: 100%;
    min-height: auto !important;

    padding: 25px 20px 35px !important;

    display: flex;
    align-items: center;

    background: transparent !important;
}


.hero-content {

    width: min(1150px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: start;

    gap: 45px;

    text-align: left;
}


/* =========================================================
   IZQUIERDA — LOGO + TÍTULO + DESCRIPCIÓN
========================================================= */

.hero-info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding: 0;

    margin: 0;
}


/* LOGO */

.hero-logo {

    display: block !important;

    width: 125px !important;

    height: auto !important;

    margin: 0 0 5px 0 !important;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 15px
            rgba(0,234,255,.30)
        );
}


/* TÍTULO */

.hero-info h1 {

    margin: 0 0 10px 0 !important;

    padding: 0;

    font-size:
        clamp(2.2rem, 4vw, 3.8rem) !important;

    line-height: 1.05 !important;

    color: #ffffff !important;
}


/* DESCRIPCIÓN PLATEADA */

.hero-description {

    max-width: 600px;

    margin: 0 0 20px 0 !important;

    padding: 0;

    color: #f2f5f7 !important;

    font-size: 1.05rem;

    line-height: 1.5;

    text-shadow:
        0 0 4px rgba(255,255,255,.8),
        0 0 12px rgba(190,205,220,.45);
}


/* =========================================================
   PODCAST
========================================================= */

.podcast-button {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    width: auto;

    padding: 11px 20px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #006eff,
            #00eaff
        ) !important;

    border:
        1px solid #00eaff;

    border-radius: 10px;

    font-weight: 700;

    text-decoration: none !important;

    box-shadow:
        0 0 12px
        rgba(0,234,255,.3);
}


/* =========================================================
   DERECHA — ZENO
========================================================= */

.hero-player {

    width: 100%;

    margin: 0 !important;

    padding: 0 !important;

    display: flex;

    align-items: flex-start;
}


/* CONTENEDOR ZENO */

.hero-player .player-container {

    width: 100%;

    height: 250px;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden;

    background: #000000;

    border:
        1px solid
        rgba(0,234,255,.4);

    border-radius: 16px;

    box-shadow:
        0 0 12px
        rgba(0,234,255,.25),

        0 0 30px
        rgba(0,234,255,.10);
}


/* IFRAME ZENO */

.hero-player .player-container iframe {

    display: block;

    width: 100%;

    height: 250px;

    margin: 0;

    padding: 0;

    border: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .hero-content {

        grid-template-columns:
            1fr 1fr;

        gap: 25px;
    }

    .hero-logo {

        width: 105px !important;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    .hero {

        padding:
            20px 15px 30px !important;
    }


    .hero-content {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 25px;

        text-align: center;
    }


    .hero-info {

        align-items: center;
    }


    .hero-logo {

        width: 100px !important;

        margin-bottom: 5px !important;
    }


    .hero-info h1 {

        font-size:
            2.1rem !important;
    }


    .hero-description {

        font-size:
            .95rem;

        margin-bottom:
            18px !important;
    }


    .hero-player {

        width: 100%;
    }


    .hero-player .player-container,
    .hero-player .player-container iframe {

        height: 210px;
    }

}

/* =========================================================
   AJUSTE FINAL — TEXTO Y PODCAST JUNTO AL LOGO
========================================================= */

.hero-info {
    margin-top: -5px !important;
}


/* Logo */
.hero-logo {
    margin-bottom: 0 !important;
}


/* Título inmediatamente debajo del logo */
.hero-info h1 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}


/* Texto descriptivo más arriba */
.hero-description {
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}


/* Botón Podcast */
.podcast-button {
    margin-top: 0 !important;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    .hero-info {
        margin-top: 0 !important;
    }

    .hero-logo {
        margin-bottom: 0 !important;
    }

    .hero-info h1 {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
    }

    .hero-description {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

}
/* =========================================================
   BOTÓN SUBIR — BLANCO Y VISIBLE
========================================================= */

.got-back-top {
    color: #ffffff !important;
    background: #111820 !important;

    border: 2px solid #ffffff !important;

    text-decoration: none !important;

    box-shadow:
        0 0 8px rgba(255,255,255,0.7),
        0 0 20px rgba(0,234,255,0.35) !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* Flecha */
.got-back-top::before {
    color: #ffffff !important;
}


/* Hover */
.got-back-top:hover {
    color: #ffffff !important;

    background: #00a9c7 !important;

    border-color: #ffffff !important;

    box-shadow:
        0 0 12px rgba(255,255,255,0.9),
        0 0 30px rgba(0,234,255,0.7) !important;
}


/* Móvil */
@media (max-width: 700px) {

    .got-back-top {
        color: #ffffff !important;

        background: #111820 !important;

        border: 2px solid #ffffff !important;
    }

}




/* =========================================================
   BOTÓN SUBIR — SIEMPRE VISIBLE
========================================================= */

#gotBackTop,
.got-back-top {
    position: fixed !important;

    left: 20px !important;
    bottom: 20px !important;

    width: 52px !important;
    height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 999999 !important;

    color: #ffffff !important;
    background: #111820 !important;

    border: 2px solid #ffffff !important;
    border-radius: 50% !important;

    font-size: 28px !important;
    font-weight: bold !important;

    text-decoration: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-shadow:
        0 0 10px rgba(255,255,255,.8),
        0 0 25px rgba(0,234,255,.5) !important;

    transform: none !important;
}


/* Flecha */
#gotBackTop {
    line-height: 52px !important;
}


/* Hover */
#gotBackTop:hover,
.got-back-top:hover {
    color: #ffffff !important;

    background: #006eff !important;

    border-color: #ffffff !important;

    transform: translateY(-3px) !important;

    box-shadow:
        0 0 15px rgba(255,255,255,.9),
        0 0 30px rgba(0,234,255,.8) !important;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    #gotBackTop,
    .got-back-top {
        left: 12px !important;
        bottom: 12px !important;

        width: 46px !important;
        height: 46px !important;

        font-size: 24px !important;
    }

}

/* =========================================================
   FOOTER — BOTONES Y ENLACES EN BLANCO
   GOT ENTERTAINMENT PERÚ
========================================================= */

/* Todos los enlaces del footer */
#footer a,
.site-footer a,
.footer a {
    color: #ffffff !important;

    opacity: 1 !important;

    text-decoration: none !important;
}


/* Texto dentro de los botones sociales */
#footer a span,
#footer a .label,
.site-footer a span,
.site-footer a .label,
.footer a span,
.footer a .label {
    color: #ffffff !important;

    opacity: 1 !important;
}

/* =========================================================
   REDES SOCIALES Y APP
   GOT ENTERTAINMENT PERÚ
========================================================= */

.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}


/* Botones */
.social-links a {
    display: inline-block;

    color: #ffffff !important;

    background: rgba(10, 20, 30, 0.90);

    border: 1px solid #ffffff;

    border-radius: 8px;

    padding: 10px 18px;

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

    text-decoration: none !important;

    opacity: 1 !important;

    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.35);

    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.15);

    transition: all 0.3s ease;
}


/* Texto blanco incluso si otro CSS intenta cambiarlo */
.social-links a,
.social-links a:visited,
.social-links a:active,
.social-links a:focus {
    color: #ffffff !important;
}


/* Al pasar el mouse */
.social-links a:hover {
    color: #ffffff !important;

    background: #006eff;

    border-color: #00eaff;

    box-shadow:
        0 0 10px rgba(0, 234, 255, 0.7),
        0 0 25px rgba(0, 234, 255, 0.35);

    transform: translateY(-2px);
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    .social-links {
        flex-direction: column;
        gap: 10px;
    }

    .social-links a {
        width: 90%;
        text-align: center;
    }

}


/* Facebook */
#footer a[href*="facebook.com"] {
    color: #ffffff !important;
}


/* Descargar App */
#footer a[href*=".apk"] {
    color: #ffffff !important;
}


/* Hover */
#footer a:hover,
#footer a:hover span,
#footer a:hover .label {
    color: #00eaff !important;

    opacity: 1 !important;
}
/* =========================================================
   BOTÓN SUBIR — GOT ENTERTAINMENT PERÚ
========================================================= */

#gotBackTop.got-back-top {

    position: fixed !important;

    left: 20px !important;
    bottom: 20px !important;

    width: 52px !important;
    height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* FLECHA */
    color: #ffffff !important;

    font-family: Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    text-align: center !important;

    text-decoration: none !important;

    /* CÍRCULO */
    background: #101820 !important;

    border: 2px solid #00eaff !important;

    border-radius: 50% !important;

    /* BRILLO */
    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #00eaff !important;

    box-shadow:
        0 0 8px rgba(0, 234, 255, 0.8),
        0 0 20px rgba(0, 234, 255, 0.4) !important;

    z-index: 999999 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transition:
        all 0.3s ease !important;
}


/* =========================================================
   EVITAR QUE OTROS CSS OCULTEN LA FLECHA
========================================================= */

#gotBackTop.got-back-top::before,
#gotBackTop.got-back-top::after {
    display: none !important;
}


/* =========================================================
   EFECTO AL PASAR EL MOUSE
========================================================= */

#gotBackTop.got-back-top:hover {

    color: #ffffff !important;

    background: #006eff !important;

    border-color: #ffffff !important;

    transform: translateY(-4px) !important;

    text-shadow:
        0 0 6px #ffffff,
        0 0 15px #00eaff !important;

    box-shadow:
        0 0 12px rgba(255,255,255,0.9),
        0 0 30px rgba(0,234,255,0.8) !important;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    #gotBackTop.got-back-top {

        left: 12px !important;
        bottom: 12px !important;

        width: 46px !important;
        height: 46px !important;

        font-size: 28px !important;
    }

}

/* =========================================================
   GOT ENTERTAINMENT PERÚ
   BOTONES SOCIALES DEL FOOTER
========================================================= */

.social-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 25px 0 !important;
}


/* Cada botón */
.social-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 180px !important;

    padding: 12px 20px !important;

    background: #101820 !important;

    border: 2px solid #00eaff !important;

    border-radius: 8px !important;

    color: #ffffff !important;

    font-family: Arial, sans-serif !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

    text-align: center !important;

    text-decoration: none !important;

    opacity: 1 !important;

    visibility: visible !important;

    text-shadow:
        0 0 5px rgba(255,255,255,.7) !important;

    box-shadow:
        0 0 8px rgba(0,234,255,.35) !important;

    transition: all .3s ease !important;
}


/* Estados */
.social-links a:link,
.social-links a:visited,
.social-links a:active {
    color: #ffffff !important;
}


/* Hover */
.social-links a:hover {
    color: #ffffff !important;

    background: #006eff !important;

    border-color: #ffffff !important;

    box-shadow:
        0 0 12px rgba(255,255,255,.8),
        0 0 25px rgba(0,234,255,.6) !important;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    .social-links {
        flex-direction: column !important;
    }

    .social-links a {
        width: 90% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   BOTÓN SUBIR
   INDEPENDIENTE DE DIMENSION
========================================================= */

#gotBackTop {
    position: fixed !important;

    left: 20px !important;
    bottom: 20px !important;

    width: 55px !important;
    height: 55px !important;

    display: flex !important;

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

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #101820 !important;

    border: 2px solid #00eaff !important;

    border-radius: 50% !important;

    color: #ffffff !important;

    font-family: Arial, sans-serif !important;

    font-size: 32px !important;

    font-weight: 900 !important;

    line-height: 55px !important;

    text-align: center !important;

    text-decoration: none !important;

    opacity: 1 !important;

    visibility: visible !important;

    z-index: 2147483647 !important;

    text-shadow:
        0 0 5px #ffffff,
        0 0 12px #00eaff !important;

    box-shadow:
        0 0 10px rgba(0,234,255,.8),
        0 0 25px rgba(0,234,255,.4) !important;
}


/* ELIMINAR CUALQUIER ICONO DE DIMENSION */

#gotBackTop::before,
#gotBackTop::after {
    content: none !important;

    display: none !important;
}


/* Mantener la flecha blanca */

#gotBackTop,
#gotBackTop:link,
#gotBackTop:visited,
#gotBackTop:active {
    color: #ffffff !important;
}


/* Hover */

#gotBackTop:hover {
    color: #ffffff !important;

    background: #006eff !important;

    border-color: #ffffff !important;

    transform: translateY(-4px) !important;

    box-shadow:
        0 0 15px rgba(255,255,255,.9),
        0 0 30px rgba(0,234,255,.8) !important;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    #gotBackTop {

        left: 12px !important;
        bottom: 12px !important;

        width: 48px !important;
        height: 48px !important;

        font-size: 28px !important;

        line-height: 48px !important;
    }
}

}

/* =========================================================
   HERO - ACERCAR DESCRIPCIÓN Y BOTÓN PODCAST AL LOGO
========================================================= */

.hero-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* Logo */

.hero-logo {
    margin-bottom: 4px !important;
}


/* Título */

.hero-info h1 {
    margin-top: 0px !important;
    margin-bottom: 8px !important;
}


/* Texto descriptivo */

.hero-description {
    margin-top: 0 !important;
    margin-bottom: 10px !important;

    line-height: 1.4;
}


/* Botón Podcast */

.podcast-button {
    margin-top: 0 !important;
}