@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {

    --blanco: #ffffff;
    --blancoTranparente: #ffffff80;
    --gris: #eeeeee;
    --grisFechas: #b7b5b5;
    --rojoTransparente: #ff000054;
    --rojo: #ff0000;
    --negro: #000000;
    --negrogris: #222222;
    --negroTransparente: #0000004b;

}

* {
    box-sizing: border-box;
}




body {
    padding: 0px;
    margin: 0px;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    background-color: var(--blanco);
}

header {
    display: grid;
    grid-template-rows: 1fr 1fr;
    background-image: url(https://fcf.com.co/wp-content/uploads/2024/11/Cumple-quindio-web-1024x576.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 21.5em;
    margin: 13%;
    margin-top: 0px;
    margin-bottom: 8%;
}

.contenedorRB ul {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    padding: 0;
}

.contenedorRB ul li {
    margin: 1em;
}

.contenedorRB ul li a {
    text-decoration: none;
    color: var(--blanco);
}

#carrito {

    background-color: var(--negro);
    padding: 0.5em;

}

.contenedorRB ul li a:hover {
    text-decoration: none;
    color: var(--blancoTranparente);
    border-radius: 3px;
}

.contenedorMenu {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    text-align: center;
    justify-items: stretch;
    align-items: end;
    margin: 0px;
    margin-bottom: 0px;
    padding: 0px;
}

.contenedorMenu a {
    background-color: var(--negroTransparente);
    margin-bottom: 0px;
    text-transform: uppercase;
}


.contenedorMenu a:hover {
    background-color: var(--rojoTransparente);
}

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

}

main {

    display: grid;
    grid-template-rows: auto auto auto;

}


.first {
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin: 13%;
    margin-top: 0px;
    align-items: center;
    align-items: start;

}


.first section {
    padding: 0.8em;
}






.first a {
    font-weight: 500;
    font-size: 1.5em;
    margin: 1.7em;
    margin-left: 0px;
    margin-bottom: 0.8em;
}

.first section div {
    width: 100%;
    gap: 1em;
}

.first section:first-child img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.first>section>div {
    display: grid;
    grid-template-columns: auto auto;
}

.first>section>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: auto;
}

.first section div article {

    width: 100%;
    height: 100%;

}


.first section div article a {
    text-decoration: none;
    color: var(--negro);
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 500;
    text-transform: uppercase;
    max-height: 100%;

}

.first section div article a:hover {

    color: var(--rojo);

}

.plana a {
    text-decoration: none;
    color: var(--negro);
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 500;
}

.plana a:hover {

    color: var(--rojo);

}

.fecha p {
    font-size: 0.5em;
    text-decoration: none;
    color: var(--grisFechas);
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}



.first section div article img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.first section div article p {
    font-weight: 100;
}



aside {
    display: inline-block;
    justify-self: center;
    /* Centra horizontalmente */
    align-items: center;
    background-color: var(--gris);
    padding: 2em;
    width: 100%;

}

aside a {
    width: 100%;
    height: 80%;
    text-decoration: none;
    color: var(--negro);
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

aside a:hover aside h3 {
    font-weight: 200;
}


.second {

    width: 100%;
    background-color: var(--negrogris);
    margin: 0px;
    padding: 7.5em;
    padding-top: 5em;

}

.youtubeCuadricula {
    display: grid;
    grid-template-columns: 35% 65%;
    width: 100%;
    gap: 2em;

}

.youtubeCuadricula2 {
    display: grid;
    grid-template-columns: auto auto;
    padding: 0.5em;
    gap: 1em;
}

.youtubeCuadricula2 a {
    text-decoration: none;
    color: var(--blanco);
}

.youtubeCuadricula2 img {
    width: 100%;
}


.second h2 {
    width: 100%;
    color: var(--blanco);
    text-align: center;
}

.third {
    display: grid;
    grid-template-rows: auto auto;

    margin-top: 0px;
    padding: 10%;
    margin-left: 5%;
    margin-right: 5%;
}

.third h3 {
    font-weight: 100;
    align-items: center;
    text-align: left;
    width: 100%;
}

.third>div {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 1em;
}


.itemsGaleria {
    display: grid;
    grid-template-rows: auto auto;
}

.itemsGaleria a {
    text-align: center;
    text-decoration: none;
    color: var(--blanco);
    background-color: var(--rojo);
    width: 100%;
    height: 100%;
    font-size: 1.5em;
}

.itemsGaleria a:hover {

    background-color: var(--negro);

}

.imagenHover {
    position: relative;
    display: grid;
    grid-template-rows: auto 20% 10%;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.imagenHover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Crea una capa pseudo para el efecto hover */
.imagenHover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: rgba(255, 0, 0, 0);
    /* Color rojo con 0% de opacidad */
    opacity: 0;
    /* Inicialmente invisible */
    transition: opacity 0.3s ease;
    /* Transición suave */
}

/* Al pasar el cursor, aplica el color semitransparente */
.imagenHover:hover::before {
    opacity: 1;
    /* Hace visible la capa semitransparente */
    background-color: #ff00004d;
    /* Color rojo con 50% de opacidad */
}


footer {
    background-color: var(--negrogris);
    display: grid;
    grid-template-rows: 8fr 1fr;
    height: 100%;
}



footer>div {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

#derechos {
    background-color: var(--negro);
    
}

#derechos p {
    color: var(--blancoTranparente);
    margin-left: 40%;
}

.who {
    display: display;
    grid-template-rows: auto auto;
}

.listas {
    display: grid;
    grid-template-rows: auto auto;
    text-transform: uppercase;
}

.Llistas {
    display: grid;
    grid-template-columns: auto auto auto;
    margin: 6em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.listas h3,
.who h3 {
    color: var(--blanco);
    padding: 4em;
    padding-bottom: 1em;
}

.who p {
    padding: 4em;
    padding-top: 1em;
}

.who {
    align-content: center;
}

.listas ul {
    padding: 4em;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;

}

.listas ul li {
    font-size: 0.8em;
    list-style: none;
    padding: 0.5em;
    padding-left: 0.1em;
    padding-right: 0.1em;
    border-bottom: var(--blancoTranparente) solid 0.5px;
}

footer p {
    color: var(--blancoTranparente);
}

footer a {
    color: var(--blancoTranparente);
    text-decoration: none;
}

footer a:hover {
    color: var(--blanco);
}