/***** Custom Color and Pattern Stylesheet *****/

body {
background:#FFF url(../images/skins/bg-body3.jpg); /* You can change this bg pattern with another pattern (bg-body1.jpg) until (bg-body10.jpg) */
background-attachment:fixed;
font:14px/20px Tahoma, Arial, Verdana;
color:#6d6d6d;
margin:0;
padding:0;
text-align: justify;
text-justify: inter-word;
}

#header-wrapper {
height:auto;
min-height:950px;/*671px;*/
background-color:#007bb7; /* You can change this bg color with another heks color */
background-image:url(../images/header-glow.png);
background-repeat:no-repeat;
background-position:center 19px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:100;
}

#header-wrapper-inner {
height:auto;
min-height:274px;
background-color:#007bb7; /* You can change this bg color with another heks color */
background-image:url(../images/header-glow.png);
background-repeat:no-repeat;
background-position:center 19px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:100;
}

#mainmenu-wrapper{
height:146px;
background-image:url(../images/bg-mainmenu.png);
background-repeat:no-repeat;
background-position:center;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.video-item {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 9 / 16; /* Proporción vertical de celular */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.video-item video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita franjas negras */
}
/*
.hover-video {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-item:hover {
    transform: scale(1.02); Pequeño zoom al activarse
    z-index: 10;
}
*/
/* Ajuste opcional para que en PC no se vean excesivamente grandes */
@media (min-width: 1024px) {
    .video-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 900px;
    }
}