@charset "utf-8";


/*CSS Document */
* {
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
}

/**********estilos-tipografías***********/
h1 {
    font-family: bebas neue;
}


h2 {
    color: #000;
    font-family: "Bebas Neue";
    font-size: 5rem;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1em;
}


h3 {
    color: #000;
    font-family: Lato;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    line-height: 1em;
}


h4 {
    font-family: "Bebas Neue";
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}


h5 {
    color: var(--Amarillo, var(--AMARILLOFINAL, #F3AB01));
    font-family: Lato;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase;
}


h6 {
    /*instagrams de ferias*/
    color: black;
    font-family: Lato;
    font-size: 1rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

p {
    color: #000;
    font-family: Lato;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
}

/*nav*/
.nav-mobile {
    display: none;
}

header {
    padding: 30px 0px;
}

.logo-amarillo {
    background-color: #F3AB01;
    border: 3px solid black;
    padding: 8px;
    position: relative;
    top: 20px;
    box-shadow: 8px 8px 0px 0px #000;
}

.logo-blanco {
    background-color: #ffffff;
    border: 3px solid black;
    padding: 8px;
    position: relative;
    top: 20px;
    box-shadow: 8px 8px 0px 0px #000;
}

.botonera {
    display: flex;
    width: 100%;
    border-bottom: 3px solid #000;
    justify-content: space-between;
    align-items: baseline;
}

.botonera a {
    color: black;
    padding: 10px 15px;
    padding: 8px;
    transition: all 0.1s ease;
}

.botonera a.active {
    /*boton mas grande estando en el html clickeado*/
    font-size: 1.5rem;
    font-family: Lato;
    padding: 8px;
    border-radius: 9.6px 9.6px 0px 0px;
}

.botonera ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3em;
}

.botonera ul li {
    stroke-width: 3px;
    stroke: var(--Negro, #000);
    font-family: Lato;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    border-left: 3px solid #000;
    padding: 10px 15px;
    border-radius: 10px 10px 0px 0px;
}

/*footer*/
footer {
    padding: 60px 0px;
}

footer a {
    color: #000;
}

.contenedor-footer {
    display: flex;
    border: #000 3px solid;
    background: #FFF;
    width: 100%;
    padding: 13px 0px;
    align-items: center;
    justify-content: space-around;
    font-family: "Bebas Neue";
    font-size: 2rem;
}

#iconos-contacto {
    display: flex;
    gap: 20px;
}

#iconos-contacto img {
    background-color: #F3AB01;
    padding: 7px;
    border-radius: 10px;
}

#iconos-contacto img:hover {
    background-color: #FFF1E3;
}

/***********fondos***********/
body {
    background-color: #FFF1E3;
    margin-left: 120px;
    margin-right: 120px;
}

.page-eventos,
.page-club1 {
    background-color: #F3AB01;
}

/***********class***********/
button {
    border: none;
    background: none;
}

.recuadro-blanco-negro {
    border: #000 3px solid;
    background: #FFF;
    box-shadow: 9px 9px 0px 0px;
    padding: 2rem;
}

.amarrilo-contenedornegro {
    display: flex;
    width: auto;
    height: fit-content;
    justify-content: center;
    align-items: center;
    border-radius:60px;
    background: #000;
    padding: 30px;
}

.flechas {
    background: #F3AB01;
    box-shadow: 6px 6px 0px 0px #000;
    border: 2px solid #000;
    padding: 15px;
    cursor: pointer;
    display: block;
    max-width: fit-content;
}

.flechas:hover {
    background: #FFF1E3;
    box-shadow: 6px 6px 0px 0px #F3AB01;
    border: 2px solid #000;
    cursor: pointer;
}

a #flecha-volver {
    padding: 30px;
}

.flecha-arriba {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1000;
}

.recuadro-crema-negro {
    border: 3px solid #000;
    background: var(--Cremita, #FFF1E3);
    box-shadow: 13px 13px 0px 0px #000;
}

.index .recuadro-crema-negro:hover {
    background-color: #FFF;
}

.boton-amarillo-chico {
    background-color: #F3AB01;
    border: 3px solid #000;
    font-family: "Bebas Neue";
    font-size: 40px;
    color: #000;
    border-radius: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 15px 20px;
    max-width: fit-content;
    height: fit-content;
    box-shadow: 8px 8px 0px 0px #000;
}

.boton-negro {
    background-color: #000;
    font-family: "Bebas Neue";
    font-size: 40px;
    color: #F3AB01;
    border-radius: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 15px 25px;
    max-width: fit-content;
    box-shadow: 8px 8px 0px 0px #F3AB01;
}

.boton-negro:hover {
    background-color: #F3AB01;
    box-shadow: 8px 8px 0px 0px #000;
    color: #000;
}

.boton-amarillo-grande {
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 48px;
    border-radius: 0.5625rem;
    border: 3px solid #000;
    background: #F3AB01;
    box-shadow: 9px 9px 0px 0px #000;
    color: #000;
    text-align: center;
    font-family: "Bebas Neue";
    font-size: 2.5rem;
}

.boton-amarillo-chico:hover, .boton-amarillo-grande:hover {
    border: 3px solid #000;
    background: #000;
    box-shadow: 9px 9px 0px 0px #F3AB01;
    color: #F3AB01;
}


.recuadro-amarillo-negro {
    background-color: #F3AB01;
    border: 3px solid #000;
    box-shadow: 13px 13px 0px 0px #000;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 50px;
}

/***********INDEX************/

.logo-responsive {
    display: none;
}

.index main {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/*animacion*/

.disco {
    animation: girar 5s infinite linear;
}

@keyframes girar {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.inicioyedicion {
    display: flex;
    gap: 40px;
}

.inicioyedicion .recuadro-crema-negro {
    background-image: url(img/index/fondo-inicio.png);
    max-width: 69%;
}

.inicioyedicion ul {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.linea-punteada {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 40px;
}

.banner-amarillo {
    background-color: #F3AB01;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 10px;
}

.banner-negro {
    background-color: #000;
    color: #F3AB01;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 10px;
}

/*QUIENES SOMOS*/

#quienes-somos .recuadro-crema-negro {
    background-image: url(img/svg/puntos-amarillo.svg);
    background-size: 27% auto;
    background-position: right bottom;
    background-repeat: no-repeat;
}

.contenedor-texto p {
    max-width: 70%;
}

#quienes-somos .contenedor-texto {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/*PREGUNTAS FRECUENTES*/

.preguntas-frecuentes {
    display: flex;
}

.preguntas-frecuentes .recuadro-amarillo-negro {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/***before***/

.acordeon {
    background-color: #FFF;
    border: 3px solid #000;
    max-width: 930px;
}

.acordeon label {
    background: #FFF1E3;
    padding: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    cursor: pointer;
    transition: all 300ms ease;
    max-width: 930px;
}

.acordeon .contenido-acordeon {
    max-height: 0px;
    overflow: hidden;
    transition: all 300ms ease;
}

.btn-acordeon:checked~.contenido-acordeon {
    max-height: fit-content;
    padding: 30px;
}

.btn-acordeon {
    display: none;
}

.flecha-abajo {
    background-color: #F3AB01;
    border: 3px solid #000;
    padding: 5px;
}


.flecha-abajo:hover {
    background-color: #ffffff;
    border: 3px solid #F3AB01;
    padding: 5px;
}

.preguntasyrevistas {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/*NUESTRAS REVISTAS*/

#nuestras-revistas .recuadro-crema-negro {
    background-image: url(img/svg/puntos-negro.svg);
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-size: 60%;
    background-position: right bottom;
    background-repeat: no-repeat;
    max-height: fit-content;
}

/*MESA REDONDA*/

.clubychica {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

#mesa-redonda .recuadro-crema-negro {
    background-image: url(img/index/mesa-inicio.png);
    background-size: 50% auto;
    background-position: right bottom;
    background-repeat: no-repeat;
    height: 40vh;
    width: 930px;
}

#mesa-redonda .contenedor-texto {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 440px;
}

.index .recuadro-crema-negro {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 50px;
}

/***********SUSCRIPCION************/
.titulo-susc {
    padding-top: 50px;
}

.metodos-pago {
    background-image: url(img/suscripcion/monederos.png);
    background-size: cover;
    background-position: center;
    border: 3px solid #000;
    box-shadow: 13px 13px 0px 0px #000;
    height: 56vh;
    margin: 20px 0;
}

.iconos-pago {
    display: flex;
    justify-content: space-evenly;
    padding-top: 7%;
}

.logos {
    border: 3px solid #000;
    background: var(--Cremita, #FFF1E3);
    box-shadow: 13px 13px 0px 0px #000;
    padding: 20px 50px;
}

.logos:hover {
    background-color: #F3AB01;
}

.divider h3 {
    padding: 20px;
}

.divider {
    border-bottom: 3px solid #000;
    margin-bottom: 20px;
    background-color: #FFF1E3;
}

#se-parte {
    display: flex;
    padding: 50px 0;
    gap: 80px;
}

#descripcion-club {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 200px;
    max-width: 900px;
}

.contenedor-contacto {
    display: flex;
    padding: 30px;
    flex-direction: column;
    background: #000;
    box-shadow: 13px 13px 0px 0px #F3AB01;
}

.contacto {
    display: flex;
    gap: 80px;
    padding: 50px 0 50px 0;
}

.compu {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.contenedor-contacto h3 {
    color: #FFF1E3;
    font-family: "Bebas Neue";
    font-size: 3.21763rem;
    font-style: normal;
    font-weight: 400;
    line-height: 101%;
    text-transform: uppercase;
}


.contenedor-contacto p {
    color: var(--Cremita, #FFF1E3);
    font-family: "Lato";
    font-size: 1.34069rem;
    font-style: normal;
    font-weight: 700;
    line-height: 132%;
    text-transform: uppercase;
}

.recuadro-crema-negro-susc {
    border: 3px solid #000;
    box-shadow: 13px 13px 0px 0px #000;
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center;
    width: 800px;
    height: 300px;
    background-image: url(img/svg/puntos-negro.svg);
    background-position: 400px 0;
    background-repeat: no-repeat;
}

.recuadro-crema-negro-susc h2 {
    max-width: 400px;
}

.recuadro-crema-negro-susc:hover {
    background-color: #FFF;
}

form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 40vw;
    justify-content: center;
}

input,
textarea {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 15px;
    font-family: "Lato";
    font-size: 1.5rem;
    font-weight: 400;
    color: #000;
    border-color: #000;
    border-width: 2px;
}

textarea {
    height: 20vh;
}

.enviar {
    background-color: #F3AB01;
    border: 3px solid #000;
    font-family: "Bebas Neue";
    font-size: 40px;
    color: #000;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 15px;
    max-width: 40%;
    box-shadow: 8px 8px 0px 0px #000;
}

.enviar:hover {
    border: 3px solid #000;
    background: #000;
    box-shadow: 9px 9px 0px 0px #FFF;
    color: #F3AB01;
}

/***********EVENTOS************/
.contenedor-main {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.contenedor-h3 {
    height: 55px;
    background-color: black;
    padding: 19px 18px;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.sub-eventos {
    color: #FFF1E3;
    font-family: Lato;
}


#ferias {
    display: flex;
    gap: 4rem;
    padding-top: 3em;
}


.recuadro-crema-negro-eventos {
    border: 3px solid #000;
    background: var(--Cremita, #FFF1E3);
    box-shadow: 13px 13px 0px 0px #000;
    padding: 30px;
}

#contenedores-ferias {
    display: flex;
    flex-direction: column;
    gap: 3em;
}

.titulo-feria {
    border: 3px solid #000;
    box-shadow: 13px 13px 0px 0px #000;
    width: fit-content;
    padding: 11px;
}

.foto-evento {
    border: 3px solid black;
    margin-bottom: 1em;
}

.insta-feria {
    display: flex;
    gap: 10px;
}

.info-feria {
    display: flex;
    width: fit-content;
    flex-direction: column;
    gap: 10px;
}

.sobre-feria {
    display: flex;
    width: 75%;
    gap: 3em;
}

.paquetes-chicos {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 71%;
}

.subs-info {
    font-weight: 800;
    text-transform: uppercase;
}

.contenedor-info-feria {
    display: flex;
    padding-top: 3em;
    gap: 3em;
}



/***********REVISTAS************/
#intro-revistas {
    display: flex;
    align-items: stretch;
    gap: 98px;
    padding-bottom: 60px;
}

#revistas-carteles {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}


/*cartel hover revistas*/
#contenedor-efecto-cartel {
    display: flex;
    align-items: center;
    padding: 20px 0px;
    min-height: 87px;
}

#boton-signo-exclamacion {
    cursor: pointer;
    background-color: #F3AB01;
    box-shadow: 9px 9px 0px 0px #000;
    padding: 10px;
    min-height: 87px;
    height: auto;
}


#cartel-exclamacion-hover {
    display: flex;
    align-items: center;
    background-color: #F3AB01;
    box-shadow: 9px 9px 0px 0px #000;
    width: 100%;
    height: 87px;
    opacity: 0;
    transition: opacity 0.5s ease;
    padding: 0px 20px;

}

#contenedor-efecto-cartel:hover #cartel-exclamacion-hover {
    opacity: 1;
}


/*seccion revistas*/
.revista-imagen {
    position: relative;
    box-shadow: 13px 13px 0px 0px #000;
    border: 3px solid #000;
    display: flex;
}


.contenedor-revistas {
    /*revistas por individual*/
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 1.14519rem;
    cursor: pointer;
}

#contenedor-catálogo {
    /*revistas en conjunto*/
    display: flex;
    width: 100%;
    padding: 40px 0px;
    justify-content: space-evenly;
    gap: 6rem 10rem;
    flex-wrap: wrap;
}

.overlay-revistas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /*fondo transparecia*/
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3 ease;
    color: #F3AB01;
    font-family: "Bebas Neue";
    font-size: 4rem;
}

.revista-imagen:hover .overlay-revistas {
    opacity: 1;
    box-shadow: 13px 13px 0px 0px #F3AB01;
}

/***********VISTA REVISTA 12************/
/*intro botones*/
#botones-revista {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}


.boton-amarillo-estrella {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 214px;
    height: 49px;
    border-radius: 0.5rem;
    border: 2px solid #000;
    background: #F3AB01;
    box-shadow: 8px 8px 0px 0px #000;
    cursor: pointer;
}

/*intro*/
#intro-revista {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    gap: 40px;
    padding: 60px;
    background-color: #FFF;
    border: 3px solid #000;
    box-shadow: 8px 8px 0px 0px #000;


}

/*galeria*/
#galeria-revista {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 50%;
    position: relative; 
}


#thumbnails-columna {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.9775rem;
}

.img-thumbnail {
    padding: 20px;
    background-color: #FFF;
    border-radius: 5px;
    border: 1px solid #8a8a8a;
    cursor: pointer;
}

/* Contenedor para la imagen de hover */
#hover-container {
    position: absolute;
    top: 0px;
    left: -11%;
    transform: translateX(50%);
    width: 545px;
    height: 752px;
    background-size: cover;
    background-position: center;
    z-index: 10;
}

/* cambia la imagen de fondo al hacer hover */
#hover-miniatura1:hover ~ #hover-container {
    display: block;
    background-image: url('img/revista/galeria-hover-1.jp.jpg');
    border: 1px solid #000;
}


#hover-miniatura2:hover ~ #hover-container {
    display: block;
    background-image: url('img/revista/galeria-hover-2.jpg');
    border: 1px solid #000;
}

/*contenedor de edicion y detalles*/
#detalles-edición {
    width: 50%;
    gap: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contenedor-edicion-info {
    display: flex;
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    background: #000;
    box-shadow: 13px 13px 0px 0px #F3AB01;
}

.contenedor-edicion-info h2 {
    color: #F3AB01;
    font-size: 8rem;
}

#edicion-numero {
    display: flex;
    align-items: center;
}

#edicion-genero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

#edicion-genero h4 {
    color: #000;
    font-family: Lato;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

}

/*tabla*/
#tabla {
    display: flex;
}

#tabla h3 {
    border-top: 3px solid #000;
}

.tabla-detalle {
    border-left: 3px solid #000;
    border-bottom: 3px solid #000;
}

.tabla-titulos {
    border-bottom: 3px solid #000;
}

#tabla h3 {
    padding: 20px;
    gap: 20px;
}

/*carrusel*/
#intro-carrusel {
    padding-top: 50px;
    width: 100%;
}

#carrusel {
    overflow: hidden;
    position: relative;
    padding: 50px 50px;
}

#contenidos-carrusel {
    padding: 0px 20px 30px;
    display: flex;
    gap: 60px;
    cursor: pointer;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.contenedor-revistas-carrusel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#contenidos-carrusel::-webkit-scrollbar {
    height: 20px;
    border-radius: 10px;
    background-color: #F3AB01;
    border: 3px solid #F3AB01;
}

#contenidos-carrusel::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000;
    width: 10px;
}

.boton-sinbordes {
    border: none;
    background: none;
}

/********CLUB DE LA MESA REDONDA 1********/
.page-club1 {
    background-color: #F3AB01;
}

.recuadro-crema-negro-fondoclub {
    border: 3px solid #000;
    background: var(--Cremita, #FFF1E3);
    box-shadow: 13px 13px 0px 0px #000;
    height: 50vh;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.recuadro-crema-negro-club {
    border: #000 3px solid;
    background-color: #FFF1E3;
    box-shadow: 9px 9px 0px 0px;
    padding: 48px;
    width: 47%;
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.contenedor-club-texto {
    display: flex;
    gap: 5rem;
}

.botonera-club {
    gap: 3rem;
    display: flex;
}

.botonera-club a {
    text-decoration: none;
    color: #000;
    border: 3px solid black;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    text-transform: uppercase;
    padding: 8px 30px;
    border-radius: 19px;
}

.botonera-club a:hover,
.boton-club-active {
    background-color: #F3AB01;
}

.amarillo-contenedor-negro-club {
    display: flex;
    width: 49%;
    height: fit-content;
    justify-content: center;
    align-items: center;
    border-radius: 3.75rem;
    background: #000;
    padding: 20px;
}

.contenedor-botonera {
    display: flex;
    gap: 3rem;
    align-items: center;
}


/********CLUB DE LA MESA REDONDA 2********/

.recuadro-crema-negro-fondoclub2 {
    border: 3px solid #000;
    background: var(--Cremita, #FFF1E3);
    box-shadow: 13px 13px 0px 0px #000;
    height: fit-content;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.flechas-blancas {
    background: #ffffff;
    box-shadow: 6px 6px 0px 0px #000;
    padding: 15px;
    cursor: pointer;
    display: block;
    max-width: fit-content;
    margin-bottom: 24px;
    border: 2px solid black;
}

.flechas-blancas:hover {
    background-color: #F3AB01;
    box-shadow: 9px 9px 0px 0px #000;

}

/***recuadros de imagenes+suscripcion***/
#contenedor-imagenesclub {
    display: flex;
    justify-content: space-between;
}

.contenedor-imagenesclub a {
    text-decoration: none;
    color: #000000;
}

.imagenes-club {
    border: 3px solid black;
}

.secciones-artistas {
    display: flex;
    justify-content: space-between;
}

.contenedor-amarillo-club {
    background-color: #F3AB01;
    width: 325px;
    height: 170px;
    display: flex;
    padding: 19px;
    justify-content: space-between;
    border: 3px solid black;
}

.boton-negro-club {
    display: flex;
    border: 3px solid black;
    height: 49px;
    width: 146px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
}

.boton-negro-club:hover {
    transition: ease 300ms;
    background-color: #FFF1E3;
}


.h4-club {
    font-family: "Bebas Neue";
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    height: 2.8rem;
}

.contenedor-txt-club {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.contenedor-botones-club {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 70px;
    width: 153px;
}

.contenedor-imagenytexto {
    display: flex;
    flex-direction: column;
}


/********CLUB DE LA MESA REDONDA VIDEO********/

#blues-de-los-50 h3 {
    font-weight: 900;
}

#blues-de-los-50 span {
    font-style: italic;
    font-weight: 700;
}

#blues-de-los-50 h2 {
    border-top: 3px solid #000;
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    padding: 35px 50px;
    border-radius: 30px 30px 0px 0px;
}

#blues-de-los-50 .recuadro-crema-negro {
    display: flex;
    flex-direction: column;
}

.sub-titulos {
    display: flex;
    align-items: center;
    gap: 100px;
}

.texto-blues {
    background-image: url(img/svg/puntos-negro.svg);
    background-size: 25% auto;
    background-position: right bottom;
    background-repeat: no-repeat;
    border: 3px solid #000;
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.texto-blues p {
    max-width: 50%;
}

.txt-vid {
    display: flex;
    flex-direction: row;
    gap: 10%;

}

/*********MEDIA QUERIES / RESPONSIVE 600PX*********/
@media screen and (max-width:600px) {

/*********nav*********/

#check{
    display: none;
}

.menu-hamburguesa-svg{
    cursor: pointer;
}

#check:checked + .desplegable{
    height: 220px;
    width: 167px;
    display: flex;
    align-items: flex-end;
    background-color: #F3AB01;
    border: 3px solid black;
    left: 0px;
}

.nav-mobile{
    display: flex;
    justify-content: space-between;
    position: static;
}

.nav-mobile ul{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 71px;
    left: 111px;
    height: 0px;
    overflow: hidden;
}

.nav-mobile a {
    color: black;
    font-size: 41px;
    font-family: 'Bebas Neue';
    padding: 0.5rem;
    text-transform: uppercase;
}

/*********general*********/

body {
    margin: 30px;
}

.ocultar-en-responsive {
        display: none;
    }

    .menu-hamburguesa-svg {
        cursor: pointer;
    }

    #check:checked+.desplegable {
        height: fit-content;
        display: flex;
        align-items: flex-start;
        padding: 20px 15px;
        background-color: #F3AB01;
        max-width: fit-content;
        border: 3px solid black;
        box-shadow: 6px 6px 0px 0px #000;
    }

    .nav-mobile {
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .nav-mobile ul {
        display: flex;
        flex-direction: column;
        gap: 5px;
        position: absolute;
        top: 47px;
        left: 197px;
        height: 0px;
        overflow: hidden;
    }

    .nav-mobile a {
        color: black;
        font-size: 46px;
        font-family: 'Bebas Neue';
        padding: 0.5rem;
        text-transform: uppercase;
    }

    /*********footer*********/
    .contenedor-footer{
        display: flex;
        flex-direction: column;
        flex-direction: column;
        align-items: center;
    }
    /*********footer*********/
    footer {
        padding: 30px 0px;
    }

    #iconos-contacto {
        display: block;
        display: flex;
        gap: 20px;
    }

    #iconos-contacto img {
        background-color: #F3AB01;
        padding: 7px;
        border-radius: 10px;
    }

    .contenedor-footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 14px 0px;
    }

    /*********general*********/

    body {
        margin: 30px;
    }

    .ocultar-en-responsive {
        display: none;
    } /*esta etiqueta ponganla a todo lo que quieran ocultar, yo por ej decidí sacar la imagen grande en las revistas y le puse esta class*/


    /*********INDEX*********/
    .index p {
        font-size: 1.5rem;
        line-height: 32px;
    }

    .index h2 {
        font-size: 4em;
    }

    .index h3 {
        font-size: 1.3em;
        line-height: 25px;
    }

    /*inicio y disco*/
    .inicioyedicion {
        display: flex;
        flex-direction: column;
        max-width: fit-content;
    }

    .inicioyedicion .recuadro-crema-negro {
        background: none;
        max-width: 540px;
        justify-content: center;
    }

    .inicioyedicion ul {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .disco {
        width: 300px;
        height: 300px;
    }

    .recuadro-crema-negro .logo-archivo img {
        width: 350px;
        background-color: #F3AB01;
        padding: 0px 15px;
        border: 5px solid #000;
        box-shadow: 10px 13px 0px 0px #000;
    }

    .linea-punteada {
        display: flex;
        gap: 17px;
        padding: 32px;
    }

    /*quienes somos*/
    #quienes-somos .recuadro-crema-negro {
        padding: 32px;
    }

    .contenedor-texto p {
        max-width: fit-content;
    }

    /*preguntas frecuentes*/
    .preguntas-frecuentes .recuadro-amarillo-negro {
        padding: 32px;
    }

    .preguntasyrevistas {
        display: flex;
        flex-direction: column;
    }

    /*nuestras revistas*/
    #nuestras-revistas{
        width: 540px;
    }

    #nuestras-revistas .recuadro-crema-negro {
        padding: 32px;
    }

    /*club de la mesa*/
    .clubychica {
        gap: 0px;
    }

    #mesa-redonda .recuadro-crema-negro {
        padding: 32px;
        width: fit-content;
        height: fit-content;
        background-size: 35%;
    }

    .contenedor-texto {
        gap: 17px;
    }

    /*********SUSCRIPCION*********/
    .iconos-pago {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    .logos {
        width: 50vw;
        display: flex;
        justify-content: center;
    }

    #se-parte {
        flex-direction: column;
        gap: 50px;
    }

    .recuadro-crema-negro-susc {
        max-width: 494px;
    }

    #descripcion-club {
        max-width: 540px;
        gap: 50px;
    }

    .contacto {
        flex-direction: column;
        gap: 50px;
    }

    .compu img {
        display: none;
    }

    form {
        width: 100%;
    }

    .enviar {
        max-width: 100%;
    }

    .suscribite p {
        font-size: 1.5rem;
        line-height: 32px;
    }


    /*********REVISTAS*********/
    /*tipografias*/
    .page-revistas h2 {
        font-size: 4rem
    }

    .page-revistas h3 {
        font-size: 2rem;
        line-height: 40px;
    }

    .page-revistas p {
        font-size: 1.5rem;
        line-height: 32px;

    }

    /*general*/
    .page-revistas {
        margin-left: 20px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
    }

    #intro-revistas {
        padding: 0px;
        height: 580px;
        width: 600px;
    }

    #contenedor-titulos {
        width: 80%;
        display: flex;
        height: 22vh;
        /* padding: 20px 20px; */
        flex-direction: column;
        justify-content: space-evenly;
    }
    
    .contenedor-efecto-cartel {
        display: flex;
        align-content: stretch;
        padding: 20px 0px;
    }

    #contenedor-revistas-fechayboton {
        padding: 30px 0px;
        width: 90%;
    }

    #cartel-exclamacion-hover {
        opacity: 1;
        padding: 42px;
        height: 8.2vh;
    }


    #boton-signo-exclamacion {
        height: 16vh;
    }

    #contenedor-catálogo {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .contenedor-revistas {
        width: 90%;
    }

    .revista-imagen {
        width: fit-content;
    }


    /*********EVENTOS*********/
    .page-eventos {
        background-color: #F3AB01;
        margin-left: 20px;
    }

    .img-clip-eventos{
        display: none;
    }

    .contenedor-titulos-eventos {
        padding-bottom: 20px;
    }

    .contenedor-h3 {
        height: 54px;
        padding: 19px 18px;
        background-color: black; 
    }

    .sub-eventos {
        color: #FFF1E3;
        font-family: Lato;
        font-size: 1.3em;
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 25px;
    }

    .img-clip-eventos {
        width: 100px;
        height: 145px;
    }

    .contenedor-h2-eventos {
        width: 100%;
        padding-bottom: 20px;
    }

    .h2-eventos {
        color: #000;
        font-family: "Bebas Neue";
        font-size: 4em;
        font-style: normal;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 1em;
    }

    .h3-eventos {
        color: #000;
        font-family: Lato;
        font-style: normal;
        font-size: 1.3em;
        line-height: 25px;
        font-weight: 700;
        text-transform: uppercase;
    }

    #ferias {
        padding-top: 1em;
    }

    .contenedor-main {
        gap: 15px
    }

    .recuadro-crema-negro-eventos {
        border: 3px solid #000;
        background: var(--Cremita, #FFF1E3);
        box-shadow: 5px 5px 0px 0px #000;
        padding: 22px
    }

    #contenedores-ferias {
        display: flex;
        flex-direction: column;
        gap: 2em;
    }

    .titulo-feria {
        border: 3px solid #000;
        box-shadow: 7px 8px 0px 0px #000;
        width: fit-content;
        padding: 8px;
    }

    .foto-evento {
        border: 3px solid black;
        margin-bottom: 1em;
    }

    .insta-feria {
        display: flex;
        gap: 10px;
    }

    .page-eventos p{
        font-size: 1.5rem;
        line-height: 32px;
    }

    .sobre-feria {
        display: flex;
        gap: 22px;
        width: 100%;
    }

    .paquetes-chicos {
        display: flex;
        flex-direction: column;
        gap: 1em;
        width: 100%;
    }

    .subs-info {
        font-weight: 800;
        text-transform: uppercase;
    }

    .info-feria{
        gap: 0px;
    }

    .contenedor-info-feria {
        display: flex;
        padding-top: 25px;
        gap: 27px;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .foto-evento{
        width: 300px;
        height: 300px;
    }

    .h6-eventos{
        font-size: 2rem;
    }

    .svg-insta-eventos{
        width: 50px;
        height: 50px;
    }

    .flecha-arriba{
        display: none;
    }

}