:root {
  --white: #FFF;
  --black: #000;
  --black-70: rgba(0, 0, 0, 0.7);

  --font-white: #FFF;
  --font-black: #000;

  --font-w-300: 300; /* Light */
  --font-w-400: 400; /* Regular */
  --font-w-600: 600; /* Medium */
  --font-w-700: 700; /* Bold */
  --font-w-800: 800; /* Extra Bold */

  --title-variation:
    "slnt" -6,
    "wdth" 121,
    "GRAD" 77,
    "XOPQ" 106,
    "XTRA" 468,
    "YOPQ" 97,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 530,
    "YTUC" 712;

  --divider-primary-color: rgba(139, 134, 133, 0.2);
}

@font-face {
  font-family: 'Roboto Flex';
  src: url('/fonts/RobotoFlex/RobotoFlex-VariableFont.ttf') format('truetype');
}

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
  font-size: 62.5%!important;
  scroll-behavior: smooth;

}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 16px!important;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}

.form-control, .form-select {
    font-size: 1.6rem;
}

.container {
  max-width: 120rem;
  margin: 0 auto;
  padding-inline: 2rem;
}

.margin-center {
  margin: 0 auto;
}

.mb-section {
    margin-bottom: 6rem;
}

.w-120 {
  max-width: 120rem;
}

.px-2 {
  padding-inline: 2rem;
}

.text-center {
  text-align: center;
}

.bg-dark {
  background-color: var(--black)!important;
}

.fw-300 {
  font-weight: var(--font-w-300);
}

.fw-400 {
  font-weight: var(--font-w-400);
}

.fw-600 {
  font-weight: var(--font-w-600);
}

.fw-700 {
  font-weight: var(--font-w-700);
}

.fw-800 {
  font-weight: var(--font-w-800);
}

.btn {
  font-size: 1.6rem;
  background-color: none;
	border: none;
	padding: 1.5rem;
  border-radius: 1.5rem;
  font-weight: var(--font-w-600);
}

.btn:hover {
  cursor: pointer;
}

.btn-primary {
  background-color: var(--black);
  color: var(--font-white);
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--black-70);
}

.btn-white {
  background-color: var(--white);
  color: var(--font-black);
  transition: background-color 0.3s ease;
}

.btn-white:hover {
  color: var(--font-black);
  background-color: rgba(255, 255, 255, 0.9)!important;
}

.btn-white:active {
  color: var(--font-black)!important;
}
/* Header section */

.header {
  padding-block: 1rem;
  position: sticky;
  top: 0rem;
  z-index: 3;
  background-color: var(--white);
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  transition: 0.4s;
}

.header-logo {
    width: 8rem;
    transition: 0.4s;
}

.header.header-small .header-logo {
  width: 8rem;
}

.btn-buy {
  padding: 1.5rem;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  transition: 0.4s;
}

.btn-buy:hover {
    background-color: #FF7F00;
}

.header.header-small .btn-buy {
  padding: 1rem 1.5rem;
}

.header.small-header {
  background-color: red;
}

.header .top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.top-header .logo-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (width <= 768px){
  .header .top-header {
    display: grid;
    grid-template-columns: repeat(1fr, 3);
    grid-template-rows: auto auto; /* dos filas */
  }

  .top-header .logo-nav {
    grid-column: 1 / 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .top-header .actions {
    grid-column: 1 / 3; /* ocupa ambas columnas */
    grid-row: 2 / 3;    /* fila 2 */
    justify-self: center;
    text-align: center; /* centra el contenido */
  }
}

.top-header .actions {
  /* flex: 1; */
  text-align: right;
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 2rem;
}

.actions .social-medias {
  display: flex;
  gap: 1.5rem;
}

.social-medias a,
.btn-cart {
    text-decoration: none;
    color: var(--black);
    transition: 0.3s;
}

.social-medias a:hover,
.btn-cart:hover {
    transform: scale(1.05);
    color: #FF7F00;
}

.header .nav {
  padding-block: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 3rem;
}

@media (width <= 768px) {
  .header .nav {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1rem;
  }
}

.nav .nav-item {
  text-decoration: none;
  color: var(--font-black);
  border-bottom: 2px solid transparent;
}

.nav .nav-item:hover {
  border-bottom: 2px solid var(--black);
}

.nav .nav-item.active {
  font-weight: var(--font-w-700);
  border-bottom: 2px solid var(--black);
}

/* Hero section */

.hero {
  height: 63.5vh;
  margin-bottom: 3rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
}

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

.overlay .content {
  z-index: 2;
  width: 120rem;
  margin: 0 auto;
  padding-inline: 2rem;
  color: var(--font-white);
}

.overlay .content .title {
  font-size: clamp(2rem, 5vw + 1rem, 5rem);
  font-weight: var(--font-w-800);
  text-transform: uppercase;
  font-variation-settings: var(--title-variation)
}

.overlay .content .description {
  font-size: 2.4rem;
}

.overlay .content .price {
  font-size: 2.8rem;
  font-weight: var(--font-w-800);
}

/* Prizes section */

#prizes {
    scroll-margin-top: 12rem;
}

.prizes-section {
  margin-bottom: 6rem;
}

.prizes-section .title {
  color: var(--font-black);
  margin-bottom: 1rem;
  font-size: 4rem;
  font-weight: var(--font-w-800);
  text-transform: uppercase;
  font-variation-settings: var(--title-variation)
}

.prizes-section .subtitle {
  /* opacity: 0; */
  font-size: 1.8rem;
  font-weight: var(--font-w-600);
}

.prizes {
  margin-block: 3.5rem;
  padding-inline: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.prize {
  position: relative;
  width: 40rem;
  transition: transform 0.3s ease;
  /* opacity: 0; */
}

@media (width <= 1380px){
  .prize {
    width: 30rem;
  }
}

@media (width <= 768px){
  .prize {
    max-width: 40rem;
  }
}

@media (width <= 576px){
  .prize {
    max-width: 30rem;
  }
}

.prize:hover {
  cursor: pointer;
  transform: scale(1.05);
}

.prize.first {
  width: 45rem;
}

@media (width <= 1380px){
  .prize.first {
    width: 35rem;
  }
}

.prize-image img {
  width: 100%;
  border-radius: 1.5rem;
  object-fit: cover;
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
}

.prize-title {
  position: absolute;
  margin: 0;
  padding: 2rem 1rem;
  color: var(--white);
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
}

.prize-title .prize-number {
  display: block;
  font-size: 4rem;
  font-weight: 700;
}

.prize-background-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.4rem;
  border-bottom-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  padding: 1rem 1rem;
  background-color: rgba(0, 0, 0, 60%);
}

.prize-caption {
  margin: 0;
  color: var(--white);
}

.prize:hover .prize-title,
.prize:hover .prize-background-caption {
  animation: fadeOut 0.5s forwards;
}

.prize-title,
.prize-background-caption {
  animation: fadeIn 0.5s forwards;
}

@media (width <= 1120px) {
  .prizes {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 4rem;
    justify-items: center;
  }

  .prize {
    width: 35rem;
  }

  .prize.first {
    width: 45rem;
    order: 1;
  }

  .prize:nth-child(1) {
    order: 2;
  }

  .prize:nth-child(3) {
    order: 3;
  }
}

/* Table section */

.table-fix-head          { overflow: auto; max-height: 40rem; }
.table-fix-head thead th { position: sticky; top: 0; z-index: 1; }

.prizes-table-section {
  margin-bottom: 5rem;
}

.rounded-top {
  border-top-left-radius:  1.5rem !important;
  border-top-right-radius: 1.5rem !important;
}

.prizes-table thead th,
.prizes-table tr td {
  background-color: #F7F8FC;
  padding: 1rem 1rem;
}

.prizes-table tr td:first-child {
  text-align: center;
}

.prizes-table tr:last-child td:nth-child(1) {
  border-end-start-radius: 1.5rem !important;
}

.prizes-table tr:last-child td:last-child {
  border-end-end-radius: 1.5rem !important  ;
}

.prizes-table tr:last-child td {
  border: none;
}

/* Steps section */

.steps-section {
  margin-bottom: 6rem;
}

.steps-title {
  margin-bottom: 6rem;
  color: var(--black);
  text-align: center;
  font-size: 4rem;
  font-weight: var(--font-w-800);
  text-transform: uppercase;
  font-variation-settings: var(--title-variation)
}

.steps-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media (width <= 1120px) {
  .steps-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 6rem;
  }
}

.step {
  position: relative;
  max-width: 30rem;
}

@media (width <= 1120px) {
  .step {
    max-width: 40rem;
  }
}

.step-header {
  margin: -2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.step-number {
  font-size: 2.4rem;
  font-weight: var(--font-w-800);
}

.step-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  background-color: var(--black);
  border-radius: 100%;
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.75);
}

.step-icon i {
  font-size: 2rem;
  color: var(--font-white);
}

.step-content {
  background-color: #F7F8FC;
  padding: 4rem 2.2rem 2rem 2.2rem;
  border-radius: 1.5rem;
  text-align: center;
}

.step-title h3 {
  font-size: 2.4rem;
  font-weight: var(--font-w-600);
}

/* Extras section */

.extras-section {
  margin-bottom: 6rem;
}

.extras-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 7rem;
}

@media (width <= 992px) {
  .extras-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
}

.extras-wrapper .accordion {
  flex: 1;
}

@media (width <= 992px) {
  .extras-wrapper .accordion {
    width: 100%;
  }
}

.accordion-item {
  border: 0;
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
    border-radius: 1.5rem!important;
}

.accordion-header .accordion-button {
  padding: 3rem 2rem;
  background-color: #F7F8FC;
}

.accordion-button {
  font-size: 2.4rem;
  color: var(--font-black)!important;
  font-weight: var(--font-w-800);
  text-transform: uppercase;
}

/* Percentage section */

.percentage-section {
  margin-bottom: 6rem;
}

.percentage-title {
  color: var(--font-black);
  font-size: 2.4rem;
  font-weight: var(--font-w-800);
  margin-bottom: 3rem;
}

.percentage-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 5rem;
  margin-bottom: 1.5rem;
  background-color: var(--white);
  border: 0.5rem solid var(--black);
  border-radius: 1.5rem;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}

.percentage-filler {
  position: absolute;
  width: 100%;
  height: 40%;
  background-color: var(--black);
}

.percentage-filler:not([style*="width: 100.00%"]) {
  border-bottom-right-radius: 1.5rem;
  border-start-end-radius: 1.5rem;
}

.dots {
  position: absolute;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem;
}

.dot {
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--white);
  border-radius: 50%;
}

.percentage-filler::after {
  position: absolute;
  display: block;
  bottom: -1rem;
  right: -2rem;
  content: "\f06d"; /* Unicode del ícono */
  font-family: "Font Awesome 6 Free"; /* o Font Awesome 6 */
  font-weight: 900; /* Necesario para íconos sólidos */
  font-size: 3rem; /* tamaño del ícono */
  color: var(--font-black); /* color del ícono */
  color: #FF7F00;
  /* content: ""; */
  /* width: 4rem;
  height: 4rem; */
  /* background-color: red; */
  /* background-image: url("/images/flama-red.png"); */
  /* background-size: 1rem;
  background-size: cover; */
  animation: pulse 1.2s infinite;
}

.percentage-filler[style*="width: 0.00%"]::after {
  display: none;
}

.percentage-filler[style*="width: 100.00%"]::after {
  display: none;
}

.percentage-filler[style*="width: 100.00%"] {
    background-color: #FF7F00;
}

/* Tickets section */
#tickets {
    scroll-margin-top: 12rem;
}

.tickets-section {
  margin-bottom: 6rem;
}

.tickets-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.tickets-title {
  font-size: 2.4rem;
  color: var(--font-black);
}

.btn-buy-now {
  color: var(--font-white);
  padding: 1rem;
  background-color: #FF7F00!important;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}

.tickets-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  min-height: 4.9rem;
  max-height: 21rem;
  overflow-y: scroll;
}

.tickets-selected .btn-ticket {
  background-color: var(--black);
  color: var(--white);
}

.tickets-selected .btn-ticket:hover {
  background-color: #DC3545;
  border: none;
}

.tickets-hall-loading {
    visibility: hidden;
    width: 100%;
    height: 3rem;
    background: url('/images/flamehall.gif');
    background-repeat: repeat-x;
    background-position: 100% 80%;
    transition: 0.3s;
}

.tickets-hall-loading.show {
    visibility: visible;
}

.btn-ticket {
  color: var(--font-black);
  font-size: 1.8rem;
  border: 1px solid var(--black);
  padding: 1rem;
  min-width: 9rem;
}

.btn-ticket.selected {
  background-color: var(--black);
  color: white;
}

.btn-ticket:hover {
  background-color: var(--black);
}

.tickets-border {
  margin-bottom: 3rem;
}

.tickets-table-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 2rem;
  margin-bottom: 3rem;
}

.input-search {
  width: 33rem;
}

@media (width <= 875px) {
  .input-search {
    width: 100%;
  }
}

input:focus {
  outline: none;       /* Quita el borde azul de focus */
  box-shadow: none;    /* Quita cualquier sombra */
  border-color: initial; /* Vuelve al borde original */
}

.random-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

@media (width <= 875px) {
  .random-selection {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
  }
}

@media (width <= 875px) {
  .tickets-table-header {
    flex-direction: column;
  }
}

.btn-dark {
  background-color: var(--black);
}

.input-flama {
  display: block;
  border: 1px solid var(--black);
  padding: 1.5rem 2rem;
  border-radius: 1.5rem;
}

@media (width <= 875px) {
  .input-flama {
    flex: 1;
    width: 100%;
  }
}

.btn-lucky {
  padding: 1.5rem 2rem;
}

@media (width <= 875px) {
  .btn-lucky {
    display: block;
    width: 100%;
  }
}

@media (max-width: 1040px) {
  .tickets-table-wrapper {
    overflow-x: scroll;
  }
}

.tickets-table {
  padding-bottom: 3rem;
  display: grid;
  grid-template-columns: repeat(10, auto); /* 10 columnas fijas */
  gap: 10px;
}

.tickets-selected-modal .btn-ticket:hover {
    background-color: var(--black);
}

/* Sponsor section */

.sponsor-section {
  margin-bottom: 6rem;
}

.sponsor-hero {
  position: relative;
  height: 80vh;
  /* overflow: hidden; */
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}

.sponsor-content {
  position: absolute;
  padding-inline: 2rem;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sponsor-content h3 {
  color: var(--font-white);
  font-size: 5rem;
  font-weight: var(--font-w-800);
  font-variation-settings: var(--title-variation);
  text-transform: uppercase;
}

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

/* Faq section */

#faq {
    scroll-margin-top: 12rem;
}

.faq-section {
  margin-bottom: 6rem;
}

.faq-title {
  text-align: center;
  color: var(--font-black);
  font-size: 4rem;
  font-weight: var(--font-w-800);
  font-variation-settings: var(--title-variation);
  margin-bottom: 3rem;
}

.question-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer {
  padding: 2rem 0;
  background-color: #F8F8F8;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}

.footer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 1.5rem;

}

@media (width <= 578px) {
  .footer-wrapper {
    flex-direction: column;
    gap: 3rem;
  }
}

.footer-wrapper .nav {
  display: flex;
  gap: 2rem;
}

.footer-wrapper .social-medias {
  display: flex;
  gap: 1.5rem;
}

.cart-section {
    padding-inline: 2rem;
}

.btn-buy-cart {
    margin-block: 2rem;
    text-transform: uppercase;
    font-weight: var(--font-w-700);
}

/* .cart-contact {
    padding-right: 3rem;
}

@media (width <= 768px) {
    .cart-contact {
        padding-right: 0;
    }
} */

.pagination {
    --bs-pagination-font-size: 1.6rem;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--black);
    --bs-pagination-active-border-color: #FEFE;

    --bs-pagination-hover-color: none;
    --bs-pagination-focus-color: none;
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
}

.page-link {
    color: var(--black);
    /* text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; */
}

.page-item.active {
    z-index: 2;
}

.text-error {
    font-size: 1.4rem;
    color: #DC3545!important;
}

.accordion-button:focus {
    z-index: 2!important;
}

.footer-credit {
    text-align: center;
    font-size: 1rem;
    color: #9ca3af;
    padding: 0.5rem 0;
    border-top: 1px solid #e5e7eb;
    margin-bottom: -2rem; /* Compensa el padding del padre */
}

.footer-credit-link {
    color: #3b82f6; /* azul más vivo */
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.footer-credit-link:hover {
    color: #1d4ed8; /* azul más oscuro al pasar el mouse */
}