/* styles.css */
@font-face {
    font-family: 'Anton';
    src: url('FONTS/Anton-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Estilos generales */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #1b1b1b;
    background-image: url('images/Background.png');
    background-position: center;
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed; /* Hace que el fondo sea fijo al desplazarse */
    background-size: cover; /* Ajusta el fondo para que cubra toda la pantalla */
    color: #f5f5f5;
    margin: 0;
}
/* Texto */
h1,
h2 {
    color: #ffbf00;
    font-weight: bold;
}

p.lead {
    color: #d1d1d1;
    font-size: 1rem;
}


/*                   */
/* VENTA DE ENTRADAS */
/*                   */

.content-centered {
    /* Ajusta a tu gusto: 50% es "la mitad de la pantalla". */
    width: 100%;
    max-width: 1200px;
    padding: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Para limitar en pantallas muy grandes, usa max-width */
    /* max-width: 800px; */

    /* Centra el contenedor horizontalmente */
    margin: 0 auto;

    /* Opcional: Centrar texto dentro de ese contenedor */
    justify-items: center;
    content: center;

}

.white-color{
    color: white;
    text-align: center;
}
.black-color {
    color: black;
}

.header {
    display: flex;
    justify-content: center;
    max-width: 100%;
    margin-bottom: -12%;
    margin-top: -12%;
    
}

.promo-banner {
    width: 100%;
    justify-content: center;
}

.promo-banner-podimo{
    margin: 40px auto;
}


.shows-container {
    display: flex;
    flex-wrap: wrap;
    /* Permite que las cards se ajusten a la pantalla */
    /* Espaciado entre las cards */
    width: 100%;
    /* Centra las cards si hay pocas */
}

.show-card {
    display:inline-flex;
    border-radius: 20px;
    margin: 10px;

    background-color: #ffffff;
    /* Color de fondo general */
    /* Sombra ligera */
    /* Ajusta el tamaño máximo */
    width: 100%;

}
.show-card-link {
    /* Makes the anchor wrap the whole card */
    text-decoration: none;
    /* Remove the default underline */
    /* Inherit text color */
    justify-content: center;
}

.show-card-link:hover .show-card {
    opacity: 0.9;
    /* Subtle hover effect if you like */
}



.show-card-image {
    width: 150px;
    /* Ajusta el ancho de la imagen */
    height: 100%;
    object-fit: cover;
    /* Mantiene la imagen correctamente recortada */
    border-top-left-radius: 20px;
    /* Bordes redondeados solo en la imagen */
    border-bottom-left-radius: 20px;
}

.show-card-content {
    display: block;
    padding: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.show-card-title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 5px;
}

.show-card-subtitle {
    font-size: 14px;
    color: #333;
}

.show-card-bold {
    font-weight: bold;
}

.SOLD-OUT-LOGO {
    margin: -22% 0 0px 60%;
    /* Más arriba (-35px) y más a la derecha (150px) */
    position: relative;
    /* Asegura que puedes moverla respecto a su contenedor */
    
}


.promo-shows-container {
    color: white;
    margin: 40px auto;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.promo-shows-container img {
    width: 100%;
    border-radius: 10px;
    margin: 10px 0;
}

#inactive-show {
    background-color: #a8a7a7;
}


.video-wrapper {
    /* Center it horizontally */
    justify-content: center;
    max-height: 100%;
    cursor: pointer;
}

.promo_video-thumbnail {
    max-width: 70%;
}

.play-button {
    position: block;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("https://upload.wikimedia.org/wikipedia/commons/7/7e/YouTube_social_white_triangle_%282017%29.svg") no-repeat center;
    background-size: contain;
    opacity: 0.8;
}

.play-button:hover {
    opacity: 1;
}




/* Responsive Layouts */





/* Super Large Desktop Screens (e.g., 4K monitors) */
@media (min-width: 1800px) {
    .shows-container {
        flex-direction: column;
            align-items: center;
            max-width: 90%;
    }

    .show-card {
        max-width: 600px;
    }
    .SOLD-OUT-LOGO img {
        height: 1.5vw;
    }
}

/* Regular Desktop Screens */
@media (min-width: 1200px) and (max-width: 1799px) {
    .shows-container {
        flex-direction: column;
            align-items: center;
            max-width: 90%;
    }

    .show-card {
        max-width: 500px;
    }
    .SOLD-OUT-LOGO img {
        height: 3vw;
    }
}

/* iPad / Tablet Size */
@media (min-width: 768px) and (max-width: 1199px) {
    .shows-container {
        flex-direction: column;
            align-items: center;
            max-width: 90%;
    }

    .show-card {
        max-width: 450px;
    }
    .SOLD-OUT-LOGO img {
        height: 6vw;
    }
}

/* Mobile Devices */
@media (max-width: 767px) {
    .shows-container {
        flex-direction: column;
        align-items: center;
        max-width: 90%;
    }

    .show-card {
        max-width: 100%;
        height: 100px;
    }

    .show-card-image {
        width: 80px;
    }

    .show-card-content {
        padding: 8px;
        text-size-adjust: 81%;
    }
    .SOLD-OUT-LOGO img {
        height: 8vw;
    }
}








/*                   */
/* EL SENTIDO LIVE */
/*                   */

.form-container { 
    width: 80%;
    margin: 0 auto;
}

/* Contenedor principal con 70% de ancho centrado */
.main-container {
    width: 85%;
    margin: 0 auto;
    text-align: center;
}

/* Logo principal centrado con poco margen */
.main-logo {
    display: block;
    margin: 0 auto;
    /* Ajusta según necesites */
    width: 100%;
    max-width: 600px;
    /* Controla el tamaño máximo */
}

/* Textos con mayor peso, pero no un "bold" completo */
.section-text {
    font-weight: 550;
    /* Un peso medio entre 400 (normal) y 700 (bold) */
    margin: 2rem 0;
}

/* Botones siempre uno debajo del otro.
   Con .row y .col-12, ya se apilarán en cualquier tamaño de pantalla.
   Opcionalmente puedes agregar más estilos aquí. 
*/
.button-row {
    margin: 10px auto;
    width: 60%;
    /* Espaciado vertical entre botones u otros ajustes si lo deseas */
}

/* Sección de logos de colaboración */
.collaboration-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;/* Margen entre logos */
    margin: 2rem 0;
    /* Espacio superior e inferior */
    width: 100%;
}
/* Ajusta la altura máxima de los logos */
.collab-logo {
    max-height: 65px;
    height: auto;
}

/* "Una producción de:" y el logo de Malencia en la misma línea */
.production-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}

.production-text {
    margin: 0;
}


#questionForm label,
#feedbackForm label {
    color: white;
}

/* Botones */
button,
.btn {
    font-family: 'Anton', sans-serif;
}

.btn-primary {
    background-color: #E633B3;
    box-shadow: 0 0 15px #E633B3;
    border: none;
    color: #ffffff;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #6f1957;
    color: #1b1b1b;
}


.btn-secondary {
    background-color: #54DEE3;
    box-shadow: 0 0 10px #54DEE3;
    border: none;
    color: #1b1b1b;
    transition: background-color 0.3s;
}

.btn-secondary:hover {
    background-color: #35898c;
}
.btn-success {
    background-color: #57d131;
    border: none;
    color: #1b1b1b;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-success:hover {
    background-color: #4cb029;
}
.tiny-text {
    font-size: 0.75em;
    /* Ajusta el valor según tu preferencia */
}
/* Clase específica para tus checkboxes con texto amarillo */
.consent-check {
    color: #f9d56a;
    /* Texto amarillo para la label */
}

.consent-check a {
    color: #ffbf00;
    /* Hacemos que el enlace sea del mismo color amarillo */
    text-decoration: none;
    /* Quitamos el subrayado (y el color azul por defecto) */
}

.consent-check a:hover {
    text-decoration: underline;
    /* Podrías cambiarlo a 'none' si no quieres subrayado al pasar el cursor */
}
/* Tarjetas */
.card {
    background-color: #2a2a2a;
    border: none;
    border-radius: 10px;
    color: #f5f5f5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}

.card-title {
    font-size: 1.2rem;
    font-weight: bold;
}

.card-text {
    font-size: 0.9rem;
    color: #d1d1d1;
}

/* Pie de página */
.footer {
    text-align: center;
    padding: 20px;
    background-color: #212121;
    color: #f5f5f5;
    border-top: 2px solid #ffbf00;
    font-size: 0.9rem;
}

/* Formularios */
.form-label {
    color: #ffbf00;
    font-weight: bold;
}

.form-control {
    background-color: #2a2a2a;
    color: #f5f5f5;
    border: 1px solid #444;
}

.form-control:focus {
    border-color: #ffbf00;
    box-shadow: none;
}