:root{--bg:#080810;--panel:#11111d;--purple:#bb32ff;--pink:#ef32ff;--text:#f5f5fb;--muted:#b7b4c5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
img{max-width:100%;display:block}a{text-decoration:none;color:inherit}.container{width:min(1180px,92%);margin:auto}
header{background:#05050b;border-bottom:1px solid #292438;position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:10px 0}.brand img{width:78px;height:78px;object-fit:contain}.nav-links{display:flex;flex-wrap:wrap;gap:18px;font-weight:bold}.nav-links a:hover{color:var(--pink)}.hero{padding:35px 0 10px;text-align:center}.hero img{width:100%;border-radius:22px;border:1px solid #7430a8;box-shadow:0 0 35px #7b159966}.hero h1{font-size:clamp(2rem,5vw,4.2rem);margin:28px 0 5px;background:linear-gradient(90deg,#fff,#d961ff);-webkit-background-clip:text;color:transparent}.hero p{color:var(--muted);font-size:1.15rem}section{padding:72px 0;border-top:1px solid #201b2d}.section-title{text-align:center;font-size:clamp(1.8rem,4vw,3rem);margin:0 0 12px}.section-sub{text-align:center;color:var(--muted);max-width:720px;margin:0 auto 35px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:var(--panel);border:1px solid #30273f;border-radius:16px;overflow:hidden;transition:.25s}.card:hover{transform:translateY(-6px);border-color:var(--purple);box-shadow:0 10px 30px #6b168833}.card img{width:100%;aspect-ratio:1.55;object-fit:cover}.caption{padding:12px;font-weight:bold}.actions{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin-top:28px}.btn{background:linear-gradient(90deg,var(--purple),var(--pink));color:white;padding:13px 23px;border-radius:30px;font-weight:bold;border:0;cursor:pointer}.btn.alt{background:#151520;border:1px solid #70328e}.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.video{background:#111;border-radius:14px;overflow:hidden;border:1px solid #30273f}.video iframe{width:100%;aspect-ratio:16/9;border:0}.slider{position:relative;overflow:hidden;border-radius:20px;border:1px solid #49335d}.slides{display:flex;transition:transform .5s ease}.slide{min-width:100%;position:relative}.slide img{width:100%;height:440px;object-fit:cover}.slide h3{position:absolute;left:25px;bottom:15px;margin:0;background:#080810cc;padding:12px 18px;border-radius:12px}.slider button{position:absolute;top:50%;transform:translateY(-50%);border:0;background:#000a;color:white;font-size:2rem;width:50px;height:55px;cursor:pointer}.prev{left:10px}.next{right:10px}.dots{text-align:center;margin:15px}.dot{width:10px;height:10px;border-radius:50%;border:0;margin:4px;cursor:pointer;background:#777}.dot.active{background:var(--pink)}.contact{max-width:760px;margin:auto;background:#11111c;padding:30px;border-radius:20px;border:1px solid #322540}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}input,textarea{width:100%;padding:14px;border-radius:10px;border:1px solid #40314e;background:#090911;color:white}textarea{min-height:140px;margin-top:15px}footer{background:#030306;padding:40px 0;text-align:center;color:var(--muted)}.footer-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:18px}.whatsapp{background:#25d366}#backToTop{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border:0;border-radius:50%;background:var(--purple);color:white;font-size:22px;display:none;z-index:30;cursor:pointer}.modal{position:fixed;inset:0;background:#000d;z-index:50;display:none;padding:5vh 4vw;overflow:auto}.modal.show{display:block}.modal-box{background:#10101b;padding:20px;border-radius:18px}.modal-head{display:flex;justify-content:space-between}.close{font-size:2rem;background:transparent;border:0;color:white;cursor:pointer}.gallery20{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.gallery20 img{width:100%;aspect-ratio:1.3;object-fit:cover;border-radius:10px}@media(max-width:900px){.grid,.video-grid{grid-template-columns:repeat(2,1fr)}.gallery20{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.nav{flex-direction:column}.nav-links{justify-content:center;font-size:.85rem}.grid,.video-grid,.gallery20{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.slide img{height:260px}section{padding:50px 0}}
```css
/* ==========================================
   REPRODUCTOR ZENO TOOLS - STICKY
   ========================================== */

.radio-sticky {
    position: sticky;

    /* Se queda pegado a esta distancia
       desde la parte superior */
    top: 100px;

    /* Ubicación */
    margin-left: 10px;

    /* Tamaño exacto */
    width: 150px;
    height: 100px;

    /* Siempre por encima de otros elementos */
    z-index: 9999;

    /* Diseño */
    background: #000000;
    border-radius: 8px;
    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.30);

    border: 1px solid rgba(0, 0, 0, 0.15);
}

.radio-sticky iframe {
    display: block;

    width: 350px;
    height: 100px;

    border: none;
}
```
/* =====================================================
   GOT ENTERTAINMENT PERÚ
   VIDEOS PUBLICITARIOS + VIDEOCLIPS
   GRID 4 x 2
   ===================================================== */

.got-media-section {
    width: 100% !important;
    max-width: 1400px !important;

    margin: 0 auto !important;
    padding: 70px 30px !important;

    box-sizing: border-box !important;

    clear: both !important;
}


/* =====================================================
   ENCABEZADO
   ===================================================== */

.got-media-header {
    width: 100% !important;

    text-align: center !important;

    margin: 0 auto 40px !important;

    box-sizing: border-box !important;
}

.got-media-header span {
    display: block !important;

    margin-bottom: 10px !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    letter-spacing: 2px !important;

    text-transform: uppercase !important;
}

.got-media-header h2 {
    margin: 0 0 15px !important;

    font-size: 42px !important;

    line-height: 1.2 !important;

    font-weight: 800 !important;
}

.got-media-header p {
    max-width: 700px !important;

    margin: 0 auto !important;

    font-size: 17px !important;

    line-height: 1.6 !important;
}


/* =====================================================
   GRID PRINCIPAL
   4 COLUMNAS
   ===================================================== */

.got-media-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    grid-auto-rows: auto !important;

    gap: 25px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    float: none !important;
}


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

.got-media-item {
    display: block !important;

    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    float: none !important;

    position: relative !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    border-radius: 14px !important;

    background: #000 !important;
}


/* =====================================================
   CONTENEDOR DEL VIDEO
   ===================================================== */

.got-media-video {
    position: relative !important;

    width: 100% !important;

    height: 0 !important;

    padding-bottom: 56.25% !important;

    margin: 0 !important;

    overflow: hidden !important;

    background: #000 !important;
}


/* =====================================================
   IFRAME YOUTUBE
   ===================================================== */

.got-media-video iframe {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

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

    border: 0 !important;

    display: block !important;
}


/* =====================================================
   EFECTO
   ===================================================== */

.got-media-item {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}

.got-media-item:hover {
    transform: translateY(-5px) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.30) !important;
}


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

.got-media-button {
    width: 100% !important;

    text-align: center !important;

    margin-top: 40px !important;
}

.got-media-button a {
    display: inline-block !important;

    padding: 14px 28px !important;

    border-radius: 50px !important;

    background: #111 !important;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    transition: all 0.3s ease !important;
}

.got-media-button a:hover {
    transform: translateY(-3px) !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.25) !important;
}


/* =====================================================
   TABLET
   2 COLUMNAS
   ===================================================== */

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

    .got-media-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =====================================================
   CELULAR
   1 COLUMNA
   ===================================================== */

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

    .got-media-section {
        padding: 50px 15px !important;
    }

    .got-media-grid {
        grid-template-columns: 1fr !important;

        gap: 20px !important;
    }

    .got-media-header h2 {
        font-size: 30px !important;
    }

    .got-media-header p {
        font-size: 15px !important;
    }

}