/*---------------------------------------------------------------------------------------- Estilos adicionales específicos para tu página */
/* Estilos específicos del cuerpo */
body {
    font-family: Arial, sans-serif;
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
    margin: 0;
    box-sizing: border-box; /* Asegura que el ancho y alto incluya padding y border */
    /*padding: 0;*/
}

/*---------------------------------------------------------------------------------------- Content */
.slider {
    /*border: solid 2px red;*/
    width: 100%; /* Ancho completo del contenedor */
    height: 600px; /* Altura fija del slider */
    overflow: hidden;
    position: relative;
    width: 100vw; /* Ancho completo de la ventana del navegador */

    box-sizing: border-box; /* Incluir padding en el ancho total */
    margin-left: calc(50% - 50vw); /* Ajuste para centrar correctamente */
    margin-right: calc(50% - 50vw); /* Ajuste para centrar correctamente */
}

.contenido1 {
    /*border: solid 2px red;*/
    margin-top: 5%;
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;

    display: grid;
    grid-template-rows: 10% 90%; /* Dos filas de 10% cada una */
}



/*---------------------------------------------------------------------------------------- Slider */

.slides {
   /* border: solid 3px green;*/
    width: 100%; /* Ancho completo de las diapositivas */
    height: 100%; /* Altura igual a la del slider */
    display: flex;
    transition: transform 0.300s ease;
}

.slide {
    /*border: solid 3px yellow;*/
    width: 100%; /* Ancho completo de cada imagen */
    height: 100%; /* Altura igual a la del slider */
    flex: 0 0 auto; /* Asegura que las imágenes no crezcan más allá de su tamaño original */
}

.img-articulos {
    width: 100%; /* Ajusta el ancho de la imagen al 100% del contenedor */
    height: 100%; /* Ajusta la altura de la imagen al 100% del contenedor */
    object-fit: contain; /* Ajusta la imagen para cubrir completamente el contenedor */
    background-color: black;
}

/* Botones de navegación */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    user-select: none;
    text-decoration: none;
    z-index: 100;
}

.next {
    right: 0;
}

.prev {
    left: 0;
}

.prev:hover, .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }


/*---------------------------------------------------------------------------------------- contenido1 */

.Titulocont1 {
    /*border: solid 3px yellow;*/
    width: 100%;
    height: 100%;

    text-align: center;
    font-size: 28px; /* Tamaño en píxeles */
    margin-bottom: 20px; /* Separación de 50px hacia abajo */
    position: relative; /* Necesario para el pseudo-elemento */
    padding-bottom: 10px; /* Espacio entre el texto y el subrayado */

    
}

    .Titulocont1::after {
        content: ""; /* Necesario para crear un pseudo-elemento */
        display: block;
        width: 110%; /* Ajusta el ancho del subrayado según sea necesario */
        height: 3px; /* Grosor del subrayado */
        background: #000; /* Color del subrayado */
        margin: 0 auto; /* Centra el subrayado horizontalmente */
        position: absolute; /* Posiciona el subrayado */
        left: 50%;
        bottom: 0;
        transform: translateX(-50%); /* Ajusta la posición para centrar */
    }

.Titulo-inicio {
    font-family: "Bungee Tint", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #000000;
}

.grid1 {
    /*border: solid 3px blue;*/
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr; /* Columna izquierda dos veces más ancha que la derecha */
    grid-gap: 20px; /* Espacio entre las columnas */
    padding: 20px; /* Espacio interior del contenedor */
}

.column {
    /*border: solid 5px red;*/
    width: 100%;
    height: 500px;

    display: flex;
    justify-content: center; /* Centrar horizontalmente el contenido */
    align-items: center; /* Centrar verticalmente el contenido */
    background-color: #000000;
    /*border: 1px solid #ccc;*/
    background-image: url('/img/01 home/01 Big header/Logo Back.jpg');
    background-size: cover; /* Ajusta la imagen para cubrir todo el contenedor */
    background-position: center; /* Centra la imagen dentro del contenedor */
    background-repeat: no-repeat;
}

/*---------------------------------------------------------------------------------------- column */

.grid1-img {
    max-width: 100%; /* Ajustar la imagen para que no supere el ancho máximo de la columna */
    height: 50%; /* Permitir que la altura se ajuste automáticamente */
    padding: 20px;
}

.video-intro {
    width: 100%; /* Hace que el iframe ocupe el 100% del ancho de su contenedor */
    height: 100%; /* Altura fija del video, puedes ajustarla según tus necesidades */
}


/*---------------------------------------------------------------------------------------- Combinado */
.contenido-combinado {
    /*border: solid 2px blue;*/
    margin-top: 70px; /* Separación hacia abajo */
    width: 100%; /* Ancho completo del contenedor */
    max-height: 800px; /* Altura máxima del contenedor */
    overflow: hidden; /* Ocultar contenido que se desborde */
    position: relative;
}

/*---------------------------------------------------------------------------------------- contenido-combinado */
.grid-combinado {
    /*border: solid 2px red;*/
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales para la primera fila */
    grid-template-rows: 300px 350px; /* Dos filas automáticas */
    grid-gap: 20px; /* Espacio entre las columnas */
    padding: 20px; /* Espacio interior del contenedor */
    max-height: 800px; /* Altura máxima del contenedor del grid */
    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
}


/*---------------------------------------------------------------------------------------- grid-combinado */

.column2 {
    /*border: solid 4px green;*/
    width: 100%;
    height: 100%;
    background-color: black;
}

.column3-1 {
    /*border: solid 4px green;*/
    grid-row: 2; /* Segunda fila */
    grid-column: span 2; /* Ocupa dos columnas */
    cursor: pointer;
    background-image: url('/img/01 home/01 Big header/Logo Back.jpg');
    background-size: cover; /* Ajusta la imagen para cubrir todo el contenedor */
    background-position: center; /* Centra la imagen dentro del contenedor */
    background-repeat: no-repeat;
}

.column3-2 {
    /*border: solid 4px green;*/
    grid-row: 2; /* Segunda fila */
    grid-column: span 1; /* Ocupa una columna */
    background-color: black;
}

/*---------------------------------------------------------------------------------------- column2 */

.column2 .a-button {
    width: 100%;
    height: 100%;
    display: block; /* Asegúrate de que la imagen no tenga espacio extra debajo */

    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
    color: inherit; /* Hereda el color del texto del elemento padre si es necesario */
    cursor: pointer;
}

.grid-img {
    width: 100%; /* Ajustar la imagen para que no supere el ancho máximo de la columna */
    height: 85%; /* Ajustar la altura automáticamente */
}

.p-grid {
    width: 100%;
    height: 15%;
    display: flex; /* Activa flexbox */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    text-align: center;
    font-size: 18px;
    color: #fff;
}


/*---------------------------------------------------------------------------------------- column3-1 */

.grid-img-entertaiment {
    width: 100%; /* Ajustar la imagen para que no supere el ancho máximo de la columna */
    height: 100%; /* Ajustar la altura automáticamente */
    cursor: pointer;
}

/*---------------------------------------------------------------------------------------- column3-2 */

.column3-2 .a-button {
    text-decoration: none;
    color: inherit; 
    cursor: pointer;
}



/*---------------------------------------------------------------------------------------- Media Queries para adaptarse a dispositivos móviles */
@media (max-width: 768px) {

/*---------------------------------------------------------------------------------------- Slider */

    .slider {
        height: auto
    }


    .contenido1 {
        height: auto;
        grid-template-rows: auto auto;
        margin-top: 20px;
    }

    .slides,
    .slide {
        height: 300px;
    }

    .img-articulos {
        object-fit: cover; /* Mejor para móviles */
    }

    .prev, .next {
        font-size: 16px;
        padding: 10px;
    }


/*---------------------------------------------------------------------------------------- contenido1 */

    .Titulocont1 {
        font-size: 20px;
        margin-bottom: 10px;
    }

        .Titulocont1::after {
            width: 80%;
        }

    .grid1 {
        grid-template-columns: 1fr;
        grid-gap: 10px;
        padding: 10px;
    }


    /*---------------------------------------------------------------------------------------- grid1 */
    .column {
        height: 300px; /* Antes 500px */
        background-size: cover;
    }

    .grid1-img {
        height: auto;
        padding: 70px;
    }

    .video-intro {
        width:100%;
        height: 100%;
    }


/*---------------------------------------------------------------------------------------- contenido-combinado */

    .contenido-combinado {
        /*border: solid 4px red;*/
        max-height: 100%;
        margin-top: 30px;
    }

    .grid-combinado {
        /*border: solid 4px yellow;*/
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-gap: 10px;
        padding: 10px;
    }

    /*---------------------------------------------------------------------------------------- grid-combinado */

    /* COLUMNAS INTERNAS */
    .grid-img {
        height: 150px;
    }

    .p-grid {
        font-size: 14px;
        height: auto;
        padding: 10px 0;
    }

    .grid-img-entertaiment {
        height: 100%;
    }

/*---------------------------------------------------------------------------------------- Reacomodo de columnas para movil */

    .column3-1 {
        grid-column: span 1;
        grid-column: 1 / -1;
        height: 300px;
    }

    .column2:nth-of-type(3) {
        grid-column: 1;
    }
    /* Iniciar sesión */

    .column3-2 {
        /*border: solid 3px red;*/
        margin-top: 7%;
        grid-column: 2;
        grid-row: auto;
        height: 300px;
    }

    .column2 {
        /*border: solid 3px blue;*/
        margin-bottom: 5%;
        margin-top: 7%;
        width: 100%;
        height: 300px;
    }

}



@media (max-width: 658px) {

    /*---------------------------------------------------------------------------------------- Slider */


    /*---------------------------------------------------------------------------------------- grid1 */
    .column {
        height: 300px; /* Antes 500px */
        background-size: cover;
    }

    .grid1-img {
        height: auto;
        padding: 30px;
    }

    .video-intro {
        width: 100%;
        height: 100%;
    }


    /*---------------------------------------------------------------------------------------- contenido-combinado */

    .contenido-combinado {
        /*border: solid 4px red;*/
        max-height: 100%;
        margin-top: 30px;
    }

    .grid-combinado {
        /*border: solid 4px yellow;*/
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-gap: 10px;
        padding: 10px;
    }

    /*---------------------------------------------------------------------------------------- grid-combinado */

    /* COLUMNAS INTERNAS */
    .grid-img {
        height: 110px;
    }

    .p-grid {
        font-size: 14px;
        height: auto;
        padding: 10px 0;
    }

    .grid-img-entertaiment {
        height: 100%;
    }


    /*---------------------------------------------------------------------------------------- Reacomodo de columnas para movil */

    .column3-1 {
        /*border: solid 4px red;*/
        grid-column: span 1;
        grid-column: 1 / -1;
        height: 180px;
    }

    .column2:nth-of-type(3) {
        grid-column: 1;
    }
    /* Iniciar sesión */

    .column3-2 {
        /*border: solid 4px red;*/
        margin-top: 7%;
        grid-column: 2;
        grid-row: auto;
        height: 150px;
    }

    .column2 {
        /*border: solid 4px red;*/
        margin-bottom: 5%;
        margin-top: 7%;
        width: 100%;
        height: 150px;
    }
}