/* ==========================================================
   MOK004 – STGO Training Fest · estilos v4
   Se carga después de estilo.css (usa sus variables --color-boton, --texto-boton)
   ========================================================== */

html { scroll-behavior: smooth; }
#choose-tickets-section { scroll-margin-top: 80px; }


/* ----------------------------------------------------------
   Botones – base común
   ---------------------------------------------------------- */
/* sin esquinas redondeadas */
.btn, .btn-lg, .block-preventa .btn { border-radius: 0 !important; }

/* centrado horizontal (main-2023.css limita .btn a 311px con margin 0) */
.button-block .btn {
   display: flex !important;
   align-items: center;
   justify-content: center;
   text-align: center;
   margin-left: auto !important;
   margin-right: auto !important;
}

/* botones-imagen (COMPRAR TICKET / COMPRA TU TICKET) */
.btn-comprar-v4, .cta-compra {
   display: block;
   width: max-content;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
}
.btn-comprar-v4 img, .cta-compra img { display: block; }
.btn-comprar-v4 { transition: transform .2s, filter .2s; }
.btn-comprar-v4:hover, .btn-comprar-v4:focus { transform: scale(1.04); filter: brightness(1.1); }
.cta-compra { transition: transform .2s, opacity .2s; }
.cta-compra:hover, .cta-compra:focus { transform: scale(1.03); opacity: .9; }


/* ----------------------------------------------------------
   Página 1 – portada
   (fondo: el original de .portada en estilo.css → fondo-portada.png)
   ---------------------------------------------------------- */
.portada .hero-v4 { padding-top: 75px; }          /* el header de Punto Ticket es fijo */
.portada img { height: auto; }

.p1-ubicacion, .p1-fecha, .p1-btn { max-width: 100%; }
.p1-ubicacion   { width: 300px; }
.p1-fecha       { width: 250px; }
.p1-presenta    { width: 100%; max-width: 520px; }
.p1-lockup      { width: 100%; max-width: 620px; }
.p1-btn         { width: 280px; }
.p1-disc-titulo { width: 100%; max-width: 560px; }
.p1-disc-lista  { width: 100%; max-width: 600px; }
.p1-fotos       { width: 100%; }

@media (min-width: 992px) {
   .hero-v4 { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; }
}

@media (max-width: 767px) {
   .portada .container { padding-left: 32px; padding-right: 32px; }
   .portada .hero-v4 { padding-top: 55px !important; padding-bottom: 3.5rem !important; }
   .p1-presenta  { width: 62%; }
   .p1-lockup    { width: 100%; }
   .p1-ubicacion { width: 150px; }
   .p1-fecha     { width: 125px; }
   .p1-btn       { width: 220px; }
}


/* ----------------------------------------------------------
   Página 2 – precios + botones de compra
   ---------------------------------------------------------- */
.precios-v4 { background: #b9aadd url("../img/bg-precios-v4.jpg") center center / cover no-repeat; }
.precios-v4 h2 { color: #683499; font-weight: 700; text-transform: uppercase; }
.precios-v4 .block-preventa { border-radius: 12px; }

/* tabla + nota legal (texto real, alineado al borde izquierdo de la tabla) */
/* clase propia: estilo.css aplica .tabla { margin-left:-70px } en ≥1024px y la descentraba */
.precios-v4 .tabla-wrap { display: block; width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; }
.precios-v4 .tabla-v5 { display: block; margin: 0 auto; }
.precios-v4 .nota-tabla {
   margin: .5rem 0 0;
   padding: 0 2.3%;
   font-family: var(--fuente-cabecera-tabla, "Oswald", sans-serif);
   font-weight: 600;
   font-size: 13px;
   line-height: 1.35;
   color: #683499;
}

/* bloque activo (Venta General): fondo morado, botones blancos, hover salmón */
.precios-v4 .block-activo { background-color: #683499; border: 2px solid #683499; }
.precios-v4 .block-activo .name_venta { color: #fff; }
.precios-v4 .block-activo .btn {
   background-color: #fff !important;
   color: var(--color-boton, #683499) !important;
   border: 2px solid #fff !important;
   font-weight: 600;
   transition: border-color .2s, background-color .2s, color .2s;
}
.precios-v4 .block-activo .btn:hover,
.precios-v4 .block-activo .btn:focus {
   background-color: var(--texto-boton, #eea395) !important;
   border-color: var(--texto-boton, #eea395) !important;
   color: var(--color-boton, #683499) !important;
}

/* bloque agotado: solo contorno, para contrastar con el activo */
.precios-v4 .block-inactivo { background-color: transparent; border: 2px solid #683499; }
.precios-v4 .block-inactivo .name_venta { color: #683499; }
.precios-v4 .block-inactivo .btn {
   color: #683499 !important;
   border-color: #683499 !important;
   background: transparent !important;
   opacity: .7;
   pointer-events: none;
}

@media (max-width: 991px) {
   .precios-v4 .block-preventa .button-block { padding-bottom: .5rem !important; margin-bottom: .5rem !important; }
   .precios-v4 .name_venta { font-size: 17px; margin-bottom: .4rem; }
   .precios-v4 .block-preventa .btn-lg { padding: .45rem 1rem; font-size: 1rem; }
   .precios-v4 h2 { font-size: 1.4rem; }
   .precios-v4 .nota-tabla { font-size: 12px; }
   #choose-tickets-section .pb-5 { padding-bottom: 1.5rem !important; }
}


/* ----------------------------------------------------------
   Página 3 – tu entrada incluye / programación, FAQ y sponsors
   ---------------------------------------------------------- */
.programa-v4, .faq-v4, .sponsors-v4 { background-color: #683499; }

/* FAQ sobre fondo morado */
.faq-v4 h2 { color: #fff; }
.faq-v4 .card { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); border-radius: 0; }
.faq-v4 .card-header { background: transparent; border: 0; }
.faq-v4 .faq-btn { color: #fff; text-align: left; width: 100%; max-width: 100%; white-space: normal; text-decoration: none; }
.faq-v4 .card-body { color: #fff; }
.faq-v4 .produce { color: #fff; }

/* botón BASES: colores originales, borde salmón sobre morado */
.faq-v4 .btn-outline-light {
   background-color: var(--color-boton, #683499) !important;
   color: var(--texto-boton, #eea395) !important;
   border: 2px solid var(--texto-boton, #eea395) !important;
   transition: border-color .2s, background-color .2s, color .2s;
}
.faq-v4 .btn-outline-light:hover,
.faq-v4 .btn-outline-light:focus {
   background-color: var(--texto-boton, #eea395) !important;
   color: var(--color-boton, #683499) !important;
}

@media (max-width: 768px) {
   .faq-icon::after { content: none; }
}