/* ===== Body o fondo===== */
    /* RESET GENERAL */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
    /* TIPOGRAFÍA */
    @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');
/* =========================
   BODY – PARED NEGRA
========================= */
body{
    font-family: Arial, Helvetica, sans-serif;
    background:#000;                 /* pared negra */
    color:#f2f2f2;
    line-height:1.7;
    position:relative;
    overflow-x:hidden;
}

/* =========================
   PINTURA BLANCA – CAPA 1
========================= */
body::before{
    content:"";
    position:fixed;
    top:-20%;
    left:0;
    width:100%;
    height:140%;
    pointer-events:none;
    z-index:0;

    background:
            linear-gradient(
                    to bottom,
                    rgba(255,255,255,0.95) 0%,
                    rgba(255,255,255,0.85) 8%,
                    rgba(255,255,255,0.6) 16%,
                    rgba(255,255,255,0.25) 28%,
                    rgba(255,255,255,0.1) 40%,
                    rgba(255,255,255,0) 55%
            );

    animation: dripSlow 30s linear infinite;
}

/* =========================
   GOTEO ORGÁNICO – CAPA 2
========================= */
body::after{
    content:"";
    position:fixed;
    top:-30%;
    left:0;
    width:100%;
    height:160%;
    pointer-events:none;
    z-index:0;

    background:
            radial-gradient(circle at 10% 0%, rgba(255,255,255,.8) 0 12px, transparent 14px),
            radial-gradient(circle at 25% 0%, rgba(255,255,255,.7) 0 18px, transparent 20px),
            radial-gradient(circle at 45% 0%, rgba(255,255,255,.85) 0 14px, transparent 16px),
            radial-gradient(circle at 65% 0%, rgba(255,255,255,.75) 0 20px, transparent 22px),
            radial-gradient(circle at 85% 0%, rgba(255,255,255,.8) 0 10px, transparent 12px);

    animation: dripFast 18s linear infinite;
}


/* ===== vibracion de las placas===== */
@keyframes metal-vibe{
    0%{ transform:translateY(-2px) rotate(0deg); }
    25%{ transform:translateY(-2px) rotate(0.4deg); }
    50%{ transform:translateY(-2px) rotate(-0.4deg); }
    75%{ transform:translateY(-2px) rotate(0.3deg); }
    100%{ transform:translateY(-2px) rotate(0deg); }
}

/* ===== DISCografia: control de tamaño de carátulas ===== */

.album img {
    border: 3px solid #2a2a2a;
    background: linear-gradient(145deg, #111, #1f1f1f);
    box-shadow:
            inset 0 0 0 1px #3a3a3a,
            0 10px 25px rgba(0,0,0,0.8);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
}
/* ===== CARÁTULAS METÁLICAS + ZOOM REAL ===== */

.album-cover {
    width: 280px;
    height: auto;
    border: 3px solid #2a2a2a;
    background: linear-gradient(145deg, #111, #1f1f1f);
    box-shadow:
            inset 0 0 0 1px #3a3a3a,
            0 10px 25px rgba(0,0,0,0.8);
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* hover leve */
.album-cover:hover {
    transform: scale(1.04);
}
/* estado activo (CLICK) */
.album-cover.zoomed {
    transform: scale(1.5); /* 🔥 +50% REAL */
    box-shadow:
            inset 0 0 0 1px #666,
            0 28px 65px rgba(0,0,0,0.98);
    z-index: 30;
}

#Discografia img {
    width: 280px;        /* tamaño real de carátula */
    max-width: 280px;
    height: auto;
    object-fit: cover;
}
/* ===== DISCografia layout ===== */
#Discografia .album {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
}
/* texto a la derecha */
#Discografia .album-info {
    max-width: 600px;
}
/* título más grande */
#Discografia .album-title {
    font-size: 26px;
    margin-bottom: 12px;
    font-weight: bold;
}
/* lista de canciones */
#Discografia .tracklist {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
}
#Discografia .tracklist li {
    line-height: 1.6;
    font-size: 15px;
}
/* botón FULL ALBUM */
#Discografia .full-album-btn {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid #fff;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}
#Discografia .full-album-btn:hover {
    background: #fff;
    color: #000;
}
.full-album-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 22px;
    border: 1px solid #777;
    color: #eaeaea;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    background: linear-gradient(145deg, #1a1a1a, #0c0c0c);
    box-shadow:
            inset 0 0 0 1px #2b2b2b,
            0 4px 12px rgba(0,0,0,0.6);
    transition: all 0.35s ease;
}
/* hover */
.full-album-btn:hover {
    color: #fff;
    border-color: #aaa;
    transform: translateY(-2px);
    box-shadow:
            inset 0 0 0 1px #444,
            0 8px 20px rgba(0,0,0,0.9);
}
/* click */
.full-album-btn:active {
    transform: translateY(0);
    box-shadow:
            inset 0 0 0 1px #222,
            0 3px 8px rgba(0,0,0,0.8);
}


a{text-decoration:none;color:inherit}

/* HEADER */
.site-header{border-bottom:1px solid #222}
.header-container{
    max-width:1000px;
    margin:0 auto;
    padding:10px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
/* ================= LOGO  ================= */

.site-logo{
    position: relative;
    display: inline-block;
    --x:50%;
    --y:50%;
}

/* ================= IMAGEN ================= */
.site-logo img{
    max-height:200px;
    width:auto;
}

/* ================= HOVER IMAGEN ================= */
.site-logo:hover img{
    filter: brightness(1.08) contrast(1.05);

    -webkit-mask-image:
            radial-gradient(ellipse at center, rgba(0,0,0,1) 52%, rgba(0,0,0,0) 100%),
            linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%),
            linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
}

/* ================= HALO ================= */
.site-logo::after{
    content:"";
    position:absolute;
    inset:-14px;
    pointer-events:none;
    opacity:0;
    background: radial-gradient(circle at var(--x) var(--y),
    rgba(255,80,30,0.45),
    rgba(200,40,20,0.25),
    rgba(120,20,10,0.15),
    transparent 65%);
    filter: blur(24px);
    transition: opacity .6s ease;
}

.site-logo:hover::after{
    opacity:1;
}

/* ================= VARIANTES RAYO (SAFE) ================= */
/* ================= RAYO BASE ================= */
/* ================= RAYO REALISTA ================= */
.site-logo::before{
    content:"";
    position:absolute;
    inset:-10px;
    pointer-events:none;
    opacity:0;
    mix-blend-mode: screen;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    filter:
            drop-shadow(0 0 6px rgba(180,220,255,.9))
            drop-shadow(0 0 14px rgba(120,180,255,.7))
            drop-shadow(0 0 28px rgba(80,140,255,.5));
}

/* ================= VARIANTE 1 ================= */
.site-logo[data-light="1"]::before{
    background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48cGF0aCBkPSJN MTAwIDAgTDk1IDQwIEwxMTAgNzAgTDkwIDExMCBMMTEwIDE2MCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyLjYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJN MTAwIDAgTDk1IDQwIEwxMTAgNzAgTDkwIDExMCBMMTEwIDE2MCIgc3Ryb2tlPSIjOWZkNmZmIiBzdHJva2Utd2lkdGg9IjYuNSIgb3BhY2l0eT0iLjM1IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTExMCA3MCBMMTQwIDEwMCIgc3Ryb2tlPSIjZWZmZmZmIiBzdHJva2Utd2lkdGg9IjEuMiIvPjxwYXRoIGQ9Ik05MCAxMTAgTDYwIDE0MCIgc3Ryb2tlPSIjZWZmZmZmIiBzdHJva2Utd2lkdGg9IjEuMiIvPjxwYXRoIGQ9Ik05NSAzMCBMNjUgNjAiIHN0cm9rZT0iI2VmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+");
}


/* ================= VARIANTE 2 ================= */
.site-logo[data-light="2"]::before{
    background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48cGF0aCBkPSJN MTIwIDAgTDEwMCA1MCBMMTMwIDkwIEw5NSAxMzAgTDExNSAxOTAiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMi41IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEyMCAwIEwxMDAgNTAgTDEzMCA5MCBMOTUgMTMwIEwxMTUgMTkwIiBzdHJva2U9IiNhOGRjZmYiIHN0cm9rZS13aWR0aD0iNi4yIiBvcGFjaXR5PSIuMzUiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJN MTMwIDkwIEwxNjAgMTIwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMSIvPjxwYXRoIGQ9Ik05NSAxMzAgTDY1IDE2MCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuMSIvPjxwYXRoIGQ9Ik0xMDAgNTAgTDcwIDgwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg==");
}


/* ================= VARIANTE 3 ================= */
.site-logo[data-light="3"]::before{
    background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48cGF0aCBkPSJNIDgwIDAgTDk1IDYwIEw3MCAxMDUgTDEwNSAxNTAgTDkwIDIwMCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyLjYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNIDgwIDAgTDk1IDYwIEw3MCAxMDUgTDEwNSAxNTAgTDkwIDIwMCIgc3Ryb2tlPSIjYmZlOWZmIiBzdHJva2Utd2lkdGg9IjYuOCIgb3BhY2l0eT0iLjM1IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTk1IDYwIEw1NSA4MCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuMiIvPjxwYXRoIGQ9Ik0xMDUgMTUwIEwxNTAgMTcwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMSIvPjxwYXRoIGQ9Ik05MCAxOTAgTDYwIDE2MCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=");
}



/* ================= ACTIVACIÓN ================= */
.site-logo.lightning::before{
    opacity:1;
    animation: lightningFlash .55s ease-out;
}

/* ================= ANIMACIÓN ================= */
@keyframes lightningFlash{
    0%{opacity:0}
    15%{opacity:1}
    55%{opacity:.7}
    100%{opacity:0}
}

/* Fin de logo */

/* Menu de navegacion */

nav{
    border-top:1px solid #222;
    padding-top:2px;
    width:100%;
}

.nav-list{
    list-style:none;
    display:flex;
    justify-content:center;
    gap:30px;
}

nav .nav-list a{
    font-family: 'Cinzel', serif;   /* 👈 tipografía Cinzel */
    font-size:15.6px;               /* +9% aprox */
    letter-spacing:4.8px;           /* más ancho */
    text-transform:uppercase;
    cursor:pointer;
    position:relative;
    color:#eaeaea;

    font-weight:700;                /* Cinzel se ve mejor en 700 */
    line-height:1.2;
    text-shadow:none;

    transition:
            color .35s ease,
            text-shadow .35s ease;
}

/* línea inferior (NO se pierde) */
nav .nav-list a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:1px;
    background:#fff;
    opacity:0;
    transition: opacity .4s ease;
}

/* HOVER: brillo real */
nav .nav-list a:hover{
    color:#ffffff;
    text-shadow:
            0 0 6px rgba(255,255,255,0.55),
            0 0 14px rgba(255,255,255,0.45),
            0 0 28px rgba(180,80,120,0.55),
            0 0 46px rgba(180,80,120,0.35);
}


nav .nav-list a:hover::after{
    opacity:1;
}


/* HERO */
.hero{
    text-align:center;
    padding:10px 10px;
    border-bottom:1px solid #222;
}
.social-grid{
    display:flex;
    flex-direction:column;
    gap:10px;               /* ⬅️ menos espacio vertical */
    align-items:center;
}
.social-main{
    padding:10px 20px;      /* ⬅️ más compacto */
    border:2px solid #888;
    background:#111;
    font-size:14px;
    letter-spacing:1px;
}
.social-row{
    display:flex;
    gap:8px;                /* ⬅️ casi pegados */
    flex-wrap:wrap;
    justify-content:center;
}
.social-card{
    padding:8px 14px;       /* ⬅️ mucho más pequeñas */
    font-size:13px;
    letter-spacing:1px;
    border-radius:4px;
    position:relative;
    overflow:hidden;
    transition:all 0.35s ease;
}
.social-card span{
    position:relative;
    z-index:2;
}
.social-card:hover{
    background:linear-gradient(145deg,#f2f2f2,#bdbdbd);
    color:#000;
    border:1px solid #999;
    box-shadow:
            inset 0 0 0 1px #fff,
            inset 0 -2px 6px rgba(0,0,0,0.2),
            0 6px 18px rgba(0,0,0,0.8);
    transform:translateY(-2px);
}
.social-card:hover{
    animation: metal-vibe 0.25s linear infinite;
}

/* tornillos base */
.social-card::before,
.social-card::after,
.social-card span::before,
.social-card span::after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:
            radial-gradient(circle at 30% 30%,
            #eee 0%,
            #bbb 30%,
            #777 55%,
            #333 80%,
            #111 100%);
    box-shadow:
            inset -1px -1px 2px rgba(255,255,255,0.6),
            inset 1px 1px 2px rgba(0,0,0,0.8);
    opacity:0;
    transition:opacity 0.3s ease;
}

/* posiciones */
.social-card::before{ top:5px; left:5px; }
.social-card::after{ top:5px; right:5px; }
.social-card span::before{ bottom:5px; left:5px; }
.social-card span::after{ bottom:5px; right:5px; }

/* mostrar tornillos al hover */
.social-card:hover::before,
.social-card:hover::after,
.social-card:hover span::before,
.social-card:hover span::after{
    opacity:1;
}
/*para ajustar la placa de streammusic*/
.stream-img{
    width:100%;              /* ocupa el ancho del cuadro */
    max-width:335px;         /* límite visual */
    height:auto;
    display:block;
    margin:0 auto;

    transform: scale(1.25);  /* ⬅️ agranda SOLO la imagen */
    transform-origin:center;
}


/* EXCEPCIÓN: botón Plataformas con imagen */
.social-main{
    background:#111;
}

.social-main:hover{
    background:#000;          /* ⬅️ negro real */
    border-color:#666;
    animation:none;
}

/* la imagen NO se altera */
.social-main:hover .stream-img{
    filter:none;
}



.facebook{background:#0051ff}
.instagram{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)}
.tiktok{background:#000;border:1px solid #333}
.youtube{background:#ff0000}

/* SECTIONS */
section{display:none;opacity:0;transition:.4s}
section.active{display:block;opacity:1}
.content-section{max-width:1100px;margin:0 auto;padding:25px 20px}
.content-section{
    margin-top: 20px; /* ajusta entre -20 y -40 si quieres */
}

.section-title{
    margin-bottom:1px;
    text-transform:uppercase;
    font-family:"Times New Roman", serif;
    font-weight:bold;
    letter-spacing:2px;
}

/* HOME (SIN CAMBIOS) */
.home-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:60px;
}
/* ===== VIDEO CARD – MARCO METÁLICO EXTREMO ===== */

.video-card {
    position: relative;
    padding: 14px; /* ↓ tamaño */
    transform: scale(0.8); /* ↓ ~20% */
    transform-origin: top center;

    background:
            radial-gradient(circle at 15% 25%, rgba(255,90,30,0.35), transparent 45%),
            radial-gradient(circle at 80% 70%, rgba(160,40,10,0.3), transparent 50%),
            linear-gradient(145deg, #3d3d3d, #0a0a0a);

    border: 2px solid #4a4a4a;

    box-shadow:
            inset 0 0 0 1px #777,
            inset 0 0 50px rgba(0,0,0,0.95),
            inset 0 0 14px rgba(120,40,10,0.9),
            inset 0 0 10px rgba(120,0,40,0.35), /* reflejo magenta */
            0 18px 40px rgba(0,0,0,0.95);

    overflow: visible;

}

    /* Placa interior */
    .video-card::before {
        content:"";
        position:absolute;
        inset:5px;
        border:1px solid rgba(0,0,0,0.9);
        box-shadow:
                inset 0 0 35px rgba(0,0,0,0.95),
                inset 0 0 10px rgba(140,50,20,0.8);
        pointer-events:none;
        z-index: 1;
    }


/* Remaches */
.video-card::after {
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(circle at 10px 10px, #888 0 5px, transparent 6px),
            radial-gradient(circle at calc(100% - 10px) 10px, #888 0 5px, transparent 6px),
            radial-gradient(circle at 10px calc(100% - 10px), #888 0 5px, transparent 6px),
            radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #888 0 5px, transparent 6px);
    pointer-events:none;
}
    .video-card {
        position: relative;
        z-index: 1;
    }

    .video-more {
        position: relative;
        z-index: 10;
    }

/* Imagen */
.video-card a {
    position: relative;
    display: block;
    overflow: hidden;
}

    .video-more:hover {
        background: #fff;
        color: #000;
    }

.video-card img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

/* DESTELLO + REFLEJO */
.video-card a::before {
    content:"";
    position:absolute;
    top:-120%;
    left:-120%;
    width:200%;
    height:200%;
    background:linear-gradient(
            120deg,
            transparent 40%,
            rgba(255,255,255,0.25) 50%,
            transparent 60%
    );
    opacity:0;
    transition: all 0.6s ease;
}

/* BOTÓN PLAY */
.video-card a::after {
    content:"▶";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    color:#fff;
    opacity:0;
    text-shadow:
            0 0 10px rgba(255,255,255,0.6),
            0 0 20px rgba(255,0,120,0.6);
    transition: opacity 0.3s ease 0.35s;
}

/* HOVER SECUENCIA */
.video-card:hover img {
    transform: scale(1.05);
}

.video-card:hover a::before {
    top:120%;
    left:120%;
    opacity:1;
}

.video-card:hover a::after {
    opacity:1;
}

/* LUZ SUTIL SOBRE EL METAL */
.video-card:hover {
    box-shadow:
            inset 0 0 0 1px #999,
            inset 0 0 60px rgba(0,0,0,0.95),
            inset 0 0 18px rgba(160,60,20,1),
            inset 0 0 18px rgba(180,0,120,0.6),
            0 22px 45px rgba(0,0,0,1);

}

/* Título destacado */
    .video-title {
        display: block;
        text-align: center;          /* 🔥 centrado real */
        font-size: 20px;             /* 🔥 más jerarquía */
        letter-spacing: 3px;
        margin: 12px 0 10px;
        color: #ffffff;
        font-weight: 700;

        text-shadow:
                0 0 8px rgba(255,255,255,0.6),
                0 0 18px rgba(180,0,120,0.5),
                0 0 30px rgba(0,0,0,0.9);
    }

/* La imagen debe ocupar visualmente el bloque */
.video-card a {
    margin: 0;
}

/* Asegurar que no haya bandas internas */
.video-card img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
    .home-banner{
    width:100%;
    margin:5px auto 0 auto;
    overflow:visible; /* 👈 CLAVE: evita que se corten */
}


.home-banner-track{
    display:flex;
    gap:40px;
    align-items:center;
    transition:transform 0.8s ease;
}

.home-banner img{
    width:280px;
    height:auto;
    object-fit:contain;     /* 👈 nunca corta */
    display:block;
    opacity:0.4;
    transform:scale(1);
    transition:opacity .5s ease, transform .5s ease;
    cursor:pointer;
}

.home-banner img.active{
    opacity:1;              /* imagen principal */
    transform:scale(1.3); /* +30% de zoom */
}
/* SOLO la portada tiene más zoom cuando es activa */
.home-banner img[src*="Portada INP 2025 Final"].active{
    transform:scale(2);
}

.home-banner img.super-active{
    transform:scale(1.45); /* más grande que la active */
    z-index:3;
}
/* AISLAR LA PORTADA PRINCIPAL PARA EVITAR CRUCE DE OPACIDAD */
.home-banner img.active{
    opacity:1;
    z-index:5;
}

/* SOLO las NO activas mantienen opacidad baja */
.home-banner img:not(.active){
    opacity:0.4;
}

    /* ===============================
       NOTICIAS
    ================================ */

    #noticias .news-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:26px;
    }

    .news-card{
        padding:22px;
        background:linear-gradient(145deg,#0d0d0d,#151515);
        border:1px solid #2a2a2a;
        border-radius:14px;
        cursor:pointer;
        transition:all .3s ease;
        box-shadow:0 12px 30px rgba(0,0,0,.7);
    }

    .news-card:hover{
        transform:translateY(-4px);
        box-shadow:0 18px 45px rgba(0,0,0,.9);
    }

    .news-source{
        font-size:11px;
        letter-spacing:2px;
        color:#888;
    }

    .news-title{
        margin:10px 0;
        font-size:15px;
        color:#f0f0f0;
    }

    .news-date{
        font-size:12px;
        color:#666;
    }
    .news-modal{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.85);
        display:none;
        justify-content:center;
        align-items:center;
        z-index:9999;
    }

    .news-modal-content{
        background:#0b0b0b;
        padding:30px;
        max-width:620px;
        max-height:80vh;
        overflow-y:auto;
        border-radius:16px;
        box-shadow:0 0 40px rgba(0,0,0,1);
        color:#eaeaea;
    }

    .news-close{
        position:absolute;
        top:20px;
        right:26px;
        font-size:28px;
        cursor:pointer;
        color:#aaa;
    }




/* VIDEOS (SIN CAMBIOS) */
/* ================= GRID GENERAL (VIDEOS Y DISCOGRAFÍA) ================= */
.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
}
/* ===== FIX LETTERBOXING REAL – VIDEOS ===== */
#videos .video-thumb{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

/* Zoom controlado para “comerse” las bandas negras */
#videos .video-thumb img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* 🔥 CLAVE: zoom leve para borrar bandas */
    transform: scale(1.18);
}


/*🎬 VIDEO ITEM BASE*/
/*====================================================== *!*/
.video-item{
    position:relative;
    cursor:pointer;
    transition:transform .45s cubic-bezier(.25,.8,.25,1);
}

/* ======================================================
   🖼️ THUMBNAIL (BLANCO Y NEGRO INACTIVO)
   ====================================================== */
.video-item img{
    width:100%;
    display:block;
    filter:grayscale(100%);
    transform:scale(0.9);
    transition:
            transform .6s cubic-bezier(.25,.8,.25,1),
            filter .5s ease;
}

/* Hover solo cuando NO está activo */
#videos .video-item:not(.active):hover img{
    filter:grayscale(0);
    transform:scale(1.05);
}

/* ======================================================
   ▶ ICONO PLAY
   ====================================================== */
.video-item::after{
    content:"▶";
    position:absolute;
    top:45%;
    left:50%;
    transform:translate(-50%,-50%) scale(.85);
    font-size:44px;
    color:#fff;
    opacity:0;
    pointer-events:none;
    text-shadow:
            0 0 12px rgba(255,255,255,.8),
            0 0 28px rgba(180,80,120,.9);
    transition:opacity .35s ease, transform .35s ease;
}

.video-item:not(.active):hover::after{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

/* ======================================================
   📺 VIDEO ACTIVO (REPRODUCCIÓN)
   ====================================================== */
    .video-item.active{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 🔥 SIN SCALE */
        z-index: 30;

        width: 50vw;
        max-width: 650px;   /* 🔥 tamaño del video */


        aspect-ratio:16/9;

        box-shadow:
                0 40px 90px rgba(0,0,0,.85),
                0 0 40px rgba(255,255,255,.15);

        overflow:hidden;
        border-radius:4px;
    }


    /* ======================================================
       🎞️ IFRAME (OCULTO POR DEFECTO)
       ====================================================== */
.video-item iframe{
    position:absolute;
    inset:0;
    width:110%;
    height:110%;
    top:-5%;
    left:-5%;
    border:0;
    opacity:0;
    pointer-events:none;
}

/* Mostrar iframe SOLO cuando está activo */
.video-item.active iframe{
    opacity:1;
    pointer-events:auto;
    animation:videoOpen .6s cubic-bezier(.25,.8,.25,1);
}

/* Animación ritual de apertura */
@keyframes videoOpen{
    from{ transform:scale(.9); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}

/* ======================================================
   🌫️ ATENUAR LOS DEMÁS CUANDO HAY UNO ACTIVO
   ====================================================== */
.video-grid.has-active .video-item:not(.active){
    opacity:.3;
    filter:blur(1px);
    transform:scale(.9);
}

/* ======================================================
   📝 TÍTULO DEL VIDEO
   ====================================================== */
.video-name{
    display:block;
    margin-top:6px;
    font-family:'Cinzel', serif;
    font-size:16px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    text-align:center;
    color:#cfcfcf;
    transition:color .4s ease, text-shadow .4s ease, transform .4s ease;
}

.video-item:hover .video-name{
    color:#fff;
    text-shadow:
            0 0 8px rgba(255,255,255,.9),
            0 0 18px rgba(200,120,140,.9);
    transform:translateY(-1px);
}

/* ================= DISCografÍA (INDEPENDIENTE) ================= */

/* grid base (no toca Videos) */
#Discografia
.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
}

/* estado normal carátulas */
#Discografia
.video-grid img{
    width:100%;
    transform: scale(1);
    transition: transform .35s ease;
    cursor:pointer;
}

/* hover suave (opcional) */
#Discografia .video-grid a:hover img{
    transform: scale(1.15);
}

/* 🔥 CLICK REAL: queda escalada */
#Discografia
.video-grid a:focus-visible img{
    transform: scale(1.5); /* +50% EXACTO */
    z-index:10;
}

/* evita borde azul feo del focus */
#Discografia
.video-grid a{
    outline:none;
}
/* ===== DISCografÍa: estado clic ===== */
#Discografia
.video-grid a.clicked img{
    transform: scale(1.5);   /* +50% */
    z-index: 10;
}

/* transición suave */
#Discografia
.video-grid img{
    transition: transform .4s ease;
}

/* BIOGRAFIA */
.bio-image{
    float: left;
    width: 340px;
    margin: 0 40px 25px 0;
    border: 3px solid #333;
    overflow: hidden;
}
/* CONTENEDOR CENTRAL BIOGRAFÍA */
.bio-profile{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

/* TEXTO SUPERIOR (ROLES) */
.bio-caption{
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin-bottom: 18px;
    text-align: center;
    color: #eaeaea;
}

.bio-caption span{
    display: block;
    line-height: 1.6;
}

/* IMAGEN CENTRADA Y MÁS GRANDE */
.bio-profile .bio-image{
    float: none;
    width: 520px;               /* 🔥 MÁS GRANDE */
    margin: 0 auto;
    border: 4px solid #444;
    box-shadow:
            0 0 0 1px #111,
            0 20px 50px rgba(0,0,0,0.9);
}

/* HOVER SUAVE */
.bio-profile .bio-image:hover img{
    transform: scale(1.06);
}

.bio-image img{
    width: 100%;
    display: block;
    transform: scale(1);
    transition: transform 0.6s ease;
}

/* 🔥 ZOOM SUAVE AL HOVER (lo que faltaba) */
.bio-image:hover img{
    transform: scale(1.08);
}
.bio-profile .bio-image{
    width: 100%;
}


.bio-text{
    font-family: 'Cinzel', serif;
    font-size: 15.5px;
    font-weight: 700;
    text-align: justify;
    line-height: 2;
    max-width: 850px;
    margin: 0 auto;
    letter-spacing: 0.02em;
}

.bio-text br + br{
    display: block;
    margin-bottom: 24px;
}

@media(max-width:900px){
    .home-grid{grid-template-columns:1fr}
    .nav-list{flex-wrap:wrap}

    .bio-image{
        float: none;
        width: 100%;
        margin: 0 0 30px 0;
    }
}

/* ===============================
   FEEDS INICIO
================================ */

.social-feed,
.spotify-box{
    max-width:520px;
    margin:40px auto;
    padding:20px;
    background:rgba(0,0,0,.55);
    border-radius:14px;
    box-shadow:
            0 0 30px rgba(0,0,0,.8),
            0 0 20px rgba(255,255,255,.05);
}

.feed-title{
    font-family:'Cinzel', serif;
    text-align:center;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:18px;
    font-size:18px;
    color:#eee;
    text-shadow:
            0 0 10px rgba(255,255,255,.3);
}

/* ===============================
INICIO – FEEDS GRID (FACEBOOK + SPOTIFY)
================================ */

    /* CONTENEDOR – se deja limpio */
    /* HOME – layout base */
    #home .inicio-feeds{
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 0;
        max-width: 1000px;
        margin: 40px auto 30px;
        align-items: start;
        padding: 0;
    }

    /* HOME – forzar cercanía SOLO visual */
    #home .inicio-feeds > .video-card{
        position: relative;
        left: -30px;
    }





    /* CAJA ESTÉTICA BASE */
    .feed-box{
        position:relative;
        padding:0;              /* 🔥 no impone tamaño */
        background:transparent; /* 🔥 elimina la caja negra */
        box-shadow:none;        /* 🔥 elimina volumen sobrante */
    }


/* TÍTULOS */
.feed-title{
    font-family:'Cinzel', serif;
    text-align:center;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:14px;
    font-size:16px;
    color:#f0f0f0;
    text-shadow:0 0 10px rgba(255,255,255,.35);
}

/* ===============================
FACEBOOK + SPOTIFY – cajas contenedoras
================================ */

    .feed-box.facebook-box{
        width:100%;
        max-width:355px;        /* tamaño correcto */
        margin:0 auto;

        padding:6px;
        background:
                linear-gradient(
                        to bottom,
                        rgba(0,0,0,.65),
                        rgba(0,0,0,.85)
                );                   /* 🔥 profundidad oscura */
        border-radius:10px;

        overflow:hidden;

        box-shadow:
                inset 0 0 0 1px rgba(255,255,255,.04),
                inset 0 6px 14px rgba(0,0,0,.9),   /* sombra interna */
                0 12px 26px rgba(0,0,0,.85);       /* sombra externa */
    }

    /* -------------------------------
       FACEBOOK – FEED
    -------------------------------- */
    .feed-box.spotify-box{
        padding:20px;
        background:rgba(0,0,0,.55);
        border-radius:18px;

        box-shadow:
                inset 0 0 0 1px rgba(255,255,255,.08),
                0 0 28px rgba(0,0,0,.7),
                0 0 50px rgba(255,255,255,.03);
    }

    /* Contenedor Facebook */
    .facebook-box .fb-page{
        margin:0;
        width:100%;
        overflow:hidden;

        opacity:0;
        transition:opacity .1s ease;
    }

    /* Cuando Facebook carga */
    .facebook-box .fb-page.fb_iframe_widget{
        opacity:1;
    }

    /* Wrapper interno forzado */
    .facebook-box .fb-page > span{
        width:100% !important;
        display:block;
    }
    /* Iframe Facebook */
    .facebook-box iframe{
        border-radius:14px;
        box-shadow:
                0 0 18px rgba(0,0,0,.6),
                0 0 35px rgba(255,255,255,.06);
    }
    /* -------------------------------
       SPOTIFY (NO TOCAR)
    -------------------------------- */
.spotify-box iframe{
    width:100%;
    height:380px;
    border-radius:12px;
}

/* -------------------------------
   RESPONSIVE
-------------------------------- */
@media(max-width:900px){
    .inicio-feeds{
        grid-template-columns:1fr;
    }
}

/*!*<!-- ======*!*/
/*   INICIO*!*/
/*!*============== -->*!*/


footer{text-align:center;border-top:1px solid #222;padding:40px 20px;font-size:12px;color:#aaa}

    /*<!-- ===============================
    FONDO – CENIZA ANIMADA
    ================================ -->
     */
     .ash-layer {
         position: fixed;
         inset: 0;
         pointer-events: none;
         z-index: 0;
     }

    .ash{
        position: absolute;
        top: -10px;
        background: rgba(40,40,40,.65);
        filter: blur(.6px);
        animation: fall linear infinite, sway ease-in-out infinite;
        will-change: transform;
    }

    /* brasas */
    .ash.ember{
        background: rgba(180,40,20,.8);
        box-shadow: 0 0 6px rgba(255,80,40,.6);
        filter: blur(.3px);
    }

    /* caída vertical */
    @keyframes fall{
        to{
            transform: translateY(110vh);
        }
    }

    /* movimiento lateral (viento) */
    @keyframes sway{
        0%   { margin-left: -8px; }
        50%  { margin-left:  8px; }
        100% { margin-left: -8px; }
    }



    @keyframes fall {
        to { transform: translateY(110vh); }
    }

         /* Estado base */
     #fechas .glow-letters{
         text-shadow:none;
     }

    /* Activación al entrar a la pestaña */
    #fechas.active .glow-letters{
        animation: letter-glow 1.8s ease forwards;
    }

    @keyframes letter-glow{
        0%{
            color:#9a9a9a;
            text-shadow:none;
        }
        40%{
            color:#ffffff;
            text-shadow:
                    0 0 6px rgba(255,255,255,0.4),
                    0 0 14px rgba(255,255,255,0.6),
                    0 0 30px rgba(255,255,255,0.4);
        }
        100%{
            color:#eaeaea;
            text-shadow:
                    0 0 3px rgba(255,255,255,0.2),
                    0 0 8px rgba(255,255,255,0.25);
        }
    }


     /* ===============================
       HOME – TÍTULO PUBLICACIONES
    ================================ */
    #home .section-title {
        font-size: 20px;
        letter-spacing: 3px;
        opacity: 0.7;
        text-align: center;
        margin-bottom: 40px;
    }

    /* ===============================
       RESPONSIVE – HOME
    ================================ */
    @media (max-width: 900px) {
        .home-grid {
            grid-template-columns: 1fr;
        }

        .inicio-feeds {
            grid-template-columns: 1fr;
        }
    }

    /* ===============================
       MOBILE – BASE GENERAL
    ================================ */
    @media (max-width: 768px) {

        /* ===============================
           HOME – MOBILE (FIX DEFINITIVO)
        ================================ */

        /* Grid base: todo en una columna */
        #home .content-section {
            display: grid;
            grid-template-columns: 1fr;
            row-gap: 20px;
        }

        /* Mantener estructura original */
        #home .home-grid,
        #home .inicio-feeds {
            display: contents;
        }

        /* Elementos HOME – ancho controlado */
        #home .video-card,
        #home .inicio-feeds .facebook-box,
        #home .inicio-feeds .spotify-box,
        #home .home-banner {
            grid-column: 1 / -1;
            margin-left: auto;
            margin-right: auto;
            max-width: 520px;
        }

        /* Título */
        #home .section-title {
            text-align: center;
        }

        /* ===============================
           CAJAS METÁLICAS – POSICIÓN + ESCALA
           (primera caja)
        ================================ */
        #home .video-card {
            margin-inline: 0;
            aspect-ratio: 1;
            transform: translate(-65px, -140px) scale(0.78);
            transform-origin: top center;
        }

        /* ===============================
           SEGUNDA CAJA – MÁS CERCA DE LA PRIMERA
           (selector real, sí funciona)
        ================================ */
        #home .video-card + .video-card {
            transform: translate(-65px, -230px) scale(0.78);
            transform-origin: top center;
        }

        /* ===============================
           SPOTIFY – AJUSTE COHERENTE
        ================================ */
        #home .inicio-feeds .spotify-box {
            transform: translateX(-65px) scale(0.78);
            transform-origin: top center;
        }

    }

    /* ===============================
   HOME – MOBILE (SUBIR TODO SIN AFECTAR)
================================ */
    @media (max-width: 768px) {
        #home.active .content-section {
            transform: translateY(-120px);
        }
    }


    /* ===============================
       HOME – CARRUSEL (AJUSTE VISUAL)
    =============================== */
    @media (max-width: 768px) {

        /* HOME – CARRUSEL (AJUSTE REAL MOBILE) */
        #home .home-banner {
            position: relative;
            transform: translate(-60px, -240px); /* ⬆️ subido más */
            transform-origin: top center;
        }

    }

    /* ===============================
       MOBILE – VIDEOS
    ================================ */
    @media (max-width: 768px) {

        .video-grid {
            grid-template-columns: 1fr;
            gap: 26px;
        }

        .video-item {
            max-width: 100%;
            aspect-ratio: 16 / 9;
        }

        .video-thumb img,
        .video-item iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-name {
            font-size: 13px;
            letter-spacing: 1px;
            margin-top: 8px;
        }
    }

    /* ==================================
       HOME – VERION MOBILE
    ================================== */

    @media (min-width: 769px) {

        #home .content-section{
            display:grid;
            grid-template-columns:1fr 1fr;
            grid-template-rows:auto auto auto auto;
            column-gap: 6px;
            row-gap: 22px;
        }

        #home .section-title{
            grid-column:1 / -1;
        }

        #home .home-grid .video-card:nth-child(1){
            grid-column:1;
            grid-row:2;
        }

        #home .inicio-feeds .facebook-box{
            grid-column:2;
            grid-row:2;
        }

        #home .home-grid .video-card:nth-child(2){
            grid-column:1;
            grid-row:3;
        }

        #home .inicio-feeds .spotify-box{
            grid-column:2;
            grid-row:3;
        }

        #home .home-banner{
            grid-column:1 / -1;
            grid-row:4;
        }

        #home .home-grid,
        #home .inicio-feeds{
            display:contents;
        }
    }

    @media (max-width: 768px) {

        /* HOME – centrado estético mobile */
        #home .content-section {
            justify-items: center;
            text-align: center;
        }

        #home .video-card,
        #home .inicio-feeds .facebook-box,
        #home .inicio-feeds .spotify-box,
        #home .home-banner {
            width: 100%;
            max-width: 520px;   /* controla estética, no agranda */
            margin-inline: auto;
        }




    }
    @media (max-width: 768px) {

        /* CENTRADO REAL HOME – MOBILE */
        #home .home-grid,
        #home .inicio-feeds {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        #home .video-card,
        #home .inicio-feeds .facebook-box,
        #home .inicio-feeds .spotify-box {
            width: 100%;
            max-width: 520px;
            margin-left: auto;
            margin-right: auto;
        }

        #home .home-banner {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
    }


    /*==================================================
      NOTICIAS – ESTÉTICA METÁLICA / CINZEL
    ==================================================*/
    /*==================================================
      GRID DE NOTICIAS
    ==================================================*/
    .news-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 26px;
    }

    .news-card {
        position: relative;
        padding: 22px 20px;
        cursor: pointer;

        font-family: 'Cinzel', serif;
        color: #e0e0e0;

        background: linear-gradient(145deg, #161616, #0b0b0b);
        border: 1px solid rgba(255,255,255,0.15);

        box-shadow:
                inset 0 0 20px rgba(0,0,0,0.8),
                0 10px 25px rgba(0,0,0,0.8);

        transition: all 0.35s ease;
    }

    .news-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border: 1px solid rgba(255,255,255,0.05);
        pointer-events: none;
    }

    .news-card:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow:
                inset 0 0 25px rgba(0,0,0,0.9),
                0 20px 45px rgba(0,0,0,0.95);
    }

    /* Fuente */
    .news-source {
        font-size: 11px;
        letter-spacing: 2px;
        opacity: 0.65;
        display: block;
        margin-bottom: 8px;
    }

    .news-title {
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 1px;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .news-date {
        font-size: 12px;
        opacity: 0.6;
    }

    /*==================================================
      OVERLAY
    ==================================================*/
    .news-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.9);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
        z-index: 999;
    }
    .news-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    /*==================================================
      VISOR PRINCIPAL (REDUCIDO Y ELEGANTE)
    ==================================================*/
    .news-panel {
        position: fixed;
        top: 50%;
        left: 50%;

        width: 92vmin;
        height: 92vmin;
        max-width: 980px;
        max-height: 980px;

        transform: translate(-50%, -50%) scale(0.96);

        background: linear-gradient(145deg, #141414, #0a0a0a);
        color: #e0e0e0;
        font-family: 'Cinzel', serif;

        border: 1px solid rgba(255,255,255,0.15);
        box-shadow:
                0 0 0 1px rgba(255,255,255,0.05),
                0 30px 90px rgba(0,0,0,0.9);

        padding: 24px;
        z-index: 1000;

        display: flex;
        flex-direction: column;
        align-items: center;

        opacity: 0;
        pointer-events: none;
        transition: all 0.35s ease;
    }
    .news-panel.active {
        opacity: 1;
        pointer-events: all;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Cerrar */
    .panel-close {
        position: absolute;
        top: 16px;
        right: 20px;
        font-size: 28px;
        cursor: pointer;
        color: #aaa;
        transition: color 0.2s ease, transform 0.2s ease;
    }
    .panel-close:hover {
        color: #fff;
        transform: scale(1.15);
    }

    /* Texto */
    .panel-title {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 2px;
        text-align: center;
        margin-bottom: 6px;
    }
    .panel-meta {
        font-size: 13px;
        letter-spacing: 1px;
        opacity: 0.6;
        margin-bottom: 14px;
        text-align: center;
    }

    /*==================================================
      IFRAME
    ==================================================*/
    .panel-iframe-wrapper {
        position: relative;
        width: 95%;
        height: 95%;
        margin: auto;
    }

    .panel-iframe {
        width: 100%;
        height: 100%;
        border: 1px solid rgba(255,255,255,0.15);
        background: #000;
        box-shadow:
                inset 0 0 30px rgba(0,0,0,0.9),
                0 0 50px rgba(0,0,0,0.7);
    }

    /*==================================================
      FALLBACK
    ==================================================*/
    .iframe-fallback {
        position: absolute;
        inset: 0;
        display: none;
        background: #000;
        color: #ccc;
        text-align: center;
        padding: 40px;
        font-family: 'Cinzel', serif;
    }
    .iframe-fallback p {
        margin-bottom: 20px;
        letter-spacing: 1px;
    }

    /* Link metálico */
    .panel-link {
        display: inline-block;
        padding: 10px 20px;
        border: 1px solid rgba(255,255,255,0.25);
        color: #fff;
        text-decoration: none;
        font-size: 13px;
        letter-spacing: 1px;
        transition: all 0.25s ease;
    }
    .panel-link:hover {
        background: #fff;
        color: #000;
    }

    /*==================================================
      RESPONSIVE
    ==================================================*/
    @media (max-width: 768px) {
        .news-panel {
            width: 94vmin;
            height: 94vmin;
            padding: 16px;
        }
        .panel-title {
            font-size: 20px;
        }
    }

/*  !* ==============================*/
/*   CAJAS DEL INICIO  / VER MENOS – HOME (FIX)*/
/*   TODO DE AQUI PARA ABAJO*/
/*============================== *!*/

    .video-info {
        max-height: 160px;
        overflow: hidden;
        position: relative;
        padding-bottom: 0;          /* 🔥 elimina el vacío */
        transition: max-height 0.45s ease;
        z-index: 3;
    }

    .video-info::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        pointer-events: none;
        background: linear-gradient(
                to bottom,
                rgba(0,0,0,0),
                rgba(0,0,0,0.9)
        );
    }

    .video-info.expanded {
        max-height: 2000px;
        overflow: visible;
        padding-bottom: 20px;
    }

    .video-info.expanded::after {
        display: none;
    }

    .video-more {
        position: absolute;
        bottom: 22px; /* ← AJUSTA AQUÍ */
        left: 50%;
        transform: translateX(-50%);

        padding: 8px 18px;
        font-family: 'Cinzel', serif;
        font-size: 12px;
        letter-spacing: 2px;
        text-transform: uppercase;

        color: #fff;
        background: rgba(0,0,0,0.6);
        border: 1px solid rgba(255,255,255,0.4);
        cursor: pointer;
        z-index: 10;
    }
    .video-card {
        position: relative;
    }


    /* MODAL VER MÁS */
    .video-modal {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.75);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .video-modal.active {
        display: flex;
    }

    .video-modal-content {
        position: relative;

        background: linear-gradient(
                145deg,
                rgba(220, 80, 80, 0.0001),
                rgba(0, 0, 0, 0.001)
        );


        backdrop-filter: blur(22px) saturate(170%);
        -webkit-backdrop-filter: blur(22px) saturate(170%);

        border: 1px solid rgba(255, 220, 220, 0.28);
        border-top-color: rgba(255, 255, 255, 0.55);
        border-left-color: rgba(255, 255, 255, 0.45);

        max-width: 720px;
        max-height: 80vh;
        padding: 30px;
        overflow-y: auto;

        box-shadow:
                inset 0 2px 2px rgba(255,255,255,0.35),
                inset 0 -35px 50px rgba(0,0,0,0.22),
                0 35px 80px rgba(0,0,0,0.85);

        border-radius: 14px;
        color: #ffffff;
    }

    .video-modal-close {
        position: absolute;
        top: 20px;
        right: 30px;
        cursor: pointer;
        font-size: 20px;
        color: #fff;
    }

    #videoModalTitle,
    #videoModalText {
        font-family: 'Cinzel', serif;
        text-align: center;
        color: rgba(255,255,255,0.85);

        text-shadow:
                inset 0 0 0 rgba(0,0,0,0),
                0 1px 0 rgba(255,255,255,0.25),
                0 -1px 2px rgba(0,0,0,0.9),
                0 0 4px rgba(255,120,120,0.25);
    }

    #videoModalTitle {
        margin-bottom: 20px;
        font-size: 20px;
        letter-spacing: 2px;
    }

    #videoModalText {
        font-family: 'Cinzel', serif;
        font-size: 15px;
        line-height: 1.8;
        color: rgba(255,255,255,0.9);

        text-align: left;
        max-width: 640px;
        margin: 0 auto;

        text-shadow: 0 0 4px rgba(255,120,120,0.25);
    }
    /* ===============================
       FIX DEFINITIVO – MODAL VER MÁS (MOBILE ONLY)
       NO AFECTA DESKTOP
    =============================== */
    @media (max-width: 768px) {

        .video-modal {
            align-items: flex-start;   /* evita que se pegue a la caja */
            padding-top: 200vh;         /* baja desde arriba */
        }

        .video-modal-content {
            width: 90vw;
            max-width: 90vw;
            max-height: 75vh;

            transform: translateX(-650px) scale(0.9); /* centrado real */
            margin: 0 auto;
        }

    }


    /* INICIO – evitar deformación de tarjetas al usar "VER MÁS" */
    .video-card .video-info {
        position: relative;
        overflow: hidden;
    }

    .video-card {
        height: 520px;
        display: flex;
        flex-direction: column;
    }

    .video-info {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .video-card .video-info p {
        flex: 1;               /* ← ESTA ES LA CLAVE */
        overflow: hidden;
    }

    .video-card .video-info {
        padding-bottom: 0;
    }


    /* INICIO – bloquear tamaño de las tarjetas de video */
    .video-card {
        height: 520px; /* ajustable visualmente */
        display: flex;
        flex-direction: column;
    }
    /* INICIO – el contenido textual no puede empujar la tarjeta */
    .video-info {
        position: relative;
        flex: 1;
        overflow: hidden;
        padding-bottom: 40px; /* espacio SOLO para el botón */
    }



    /* INICIO – texto siempre recortado */
    .video-card .video-info p {
        overflow: hidden;
    }
    .video-card .video-info {
        text-align: center;
        font-family: 'Cinzel', serif;
    }

    .video-card .video-info p {
        font-size: 15px;
        line-height: 1.7;
        color: #f2f2f2;
        text-shadow: 0 0 6px rgba(255, 80, 80, 0.35);
    }
    .video-card .video-more {
        margin-top: 20px;
        align-self: center;
        padding: 10px 26px;
    }

    /* ===============================
       FIX FINAL DEFINITIVO – PUBLICACIONES (MOBILE)
       NO TOCAR
    ================================ */
    @media (max-width: 768px) {
        #home .section-title {
            position: relative;
            left: 50%;
            transform: translateX(-155%) !important;
            margin-top: 100px;        /* ← AQUÍ lo baja */
            margin-bottom: 50px;
            width: max-content;
            text-align: center;
        }
    }
    /* ===============================
   FIX REAL – SUBIR FEEDS SIN MOVER PUBLICACIONES
================================ */
    @media (max-width: 768px) {

        #home .home-grid,
        #home .inicio-feeds,
        #home .home-banner {
            position: relative;
            top: -80px; /* ← ajusta aquí */
        }

    }

    /* ===============================
       FIX DEFINITIVO – DISCOGRAFÍA (MOBILE)
       ESCALA + CENTRADO
       NO AFECTA DESKTOP
    ================================ */
    @media (max-width: 768px) {

        #Discografia {
            display: flex;
            justify-content: center;
        }

        #Discografia .album-grid {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 22px;
            width: 100%;
        }
        /* ===============================
           FIX DEFINITIVO – DISCOGRAFÍA (MOBILE)
           ESCALA SOLO PORTADA
           TEXTO FLUYE NORMAL
        ================================ */
        @media (max-width: 768px) {

            #Discografia .album-grid {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 34px;
                width: 100%;
            }

            /* CONTENEDOR DE CADA ÁLBUM */
            #Discografia .album {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            /* SOLO LA PORTADA SE ESCALA */
            #Discografia .album-cover {
                transform: scale(1);
                transform-origin: center;
                margin-bottom: 16px;
            }

            /* TEXTO SIN ESCALA */
            #Discografia .album-title,
            #Discografia .tracklist,
            #Discografia .full-album {
                transform: none;
                width: 100%;
                margin: 0 auto;
            }

            /* ESPACIADO VERTICAL */
            #Discografia .album-title {
                margin-top: 6px;
                margin-bottom: 10px;
            }

            #Discografia .tracklist {
                margin-bottom: 14px;
            }

        }
        /* ===============================
           DISCOGRAFÍA – ZOOM PORTADAS (MOBILE)
           NO AFECTA DESKTOP
        ================================ */
        @media (max-width: 768px) {

            #Discografia .album-cover.zoomed {
                transform: scale(1.15);
                z-index: 10;
            }

        }


    }

    /* ===============================
    FIX DEFINITIVO – VIDEOS INLINE (MOBILE)
    NO AFECTA DESKTOP
 ================================ */
    @media (max-width: 768px) {

        #videos .video-item {
            width: 100%;
            min-height: 220px;
        }

        #videos .video-item.active {
            width: 100%;
        }

        #videos .video-item iframe {
            width: 100%;
            height: 220px;
            display: block;
        }

        #videos .video-grid.has-active {
            align-items: stretch;
        }

    }

    /* ===============================
       FECHAS Y CONTACTO – CONTROL REAL MOBILE
       NO AFECTA DESKTOP
    ================================ */
    @media (max-width: 768px) {

        #fechas {
            position: relative;
            top: -3500px; /* 👈 SUBE / BAJA AQUÍ */
        }

        #contacto {
            position: relative;
            top: -3450px; /* 👈 SUBE / BAJA AQUÍ */
        }

    }