:root {

/* Colors: */
--unnamed-color-68a22d: #68A22D;
--unnamed-color-878787: #878787;
--unnamed-color-000000: #000000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #000; /* fondo negro tipo Monster */
  background: var(--unnamed-color-000000) 0% 0% no-repeat padding-box;
  background: #000000 0% 0% no-repeat padding-box;
  color: #fff;
  line-height: 1.5;
}

footer {
  background-color: #000;
  text-align: center;
  padding: 20px;
}

main {
  max-width: 1450px;
  margin: auto;
  padding-bottom: 20px
}

section {
  margin-bottom: 50px;
}

header {
  background: #040706 0% 0% no-repeat padding-box url('../img/logo.png');
  background-position: center center;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

header::after {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
}

header h1 {
  font-size: 2.5rem;
  z-index: 1;
  color: #00ff00; /* verde Monster */
  text-transform: uppercase;
}


.banner {
  position: relative;
  width: 100%;
  height: 390px; /* o en % / vh si quieres que escale con la pantalla */
  background: transparent url('../img/Group 4.png') no-repeat center;
  background-size: cover;
  z-index: 2;

  display: flex; /* opcional, para centrar contenido */
  justify-content: center;
  align-items: center;
}

.banner-chair {
  position: absolute;
  top: 20%;             /* ajusta según dónde quieras colocarlo dentro del padre */
  left: 25%;            /* ajusta según la posición */
  width: 50%;           /* escala proporcional al ancho del padre */
  height: 100%;         /* mantiene la proporción */
  background: url('../img/Hero_1920x1080px.png') no-repeat center;
  background-size: contain; /* mantiene proporción */
}


.detail-box {
  display: flex;
  width: 80%;
  height: auto;
  min-height: 900px;
  flex-direction: column; /* botón arriba, detalles abajo */
  background: #181818 0% 0% no-repeat padding-box;
  align-items: center;
  gap: 20px;
  margin: auto;
}

.button-participation{
  width: 260px;
  height: 61px;
  top: 63px;
  opacity: 1;
  position: relative;
  cursor: pointer;
}


.details-container {
  top: 110px;
  display: flex;           /* los .detail en fila */
  gap: 20px;               /* espacio entre ellos */
  width: 100%;
  justify-content: center; /* opcional: centrados */
  position: relative;
}


.detail {
  flex: 1 1 300px;
  padding: 20px;
}

.acceptation-text{
  top: 90px;
  text-align: center;
  font: normal normal bold 19px/24px Helvetica Neue;
  letter-spacing: 0px;
  text-transform: uppercase;
  position: relative;
}

.green-color{
  color: var(--unnamed-color-68a22d);
  color: #68A22D;
}

.line{
  top: 90px;
  width: 80%;
  height: 0px;
  /* UI Properties */
  border: 1px solid var(--unnamed-color-68a22d);
  border: 1px solid #68A22D;
  opacity: 1;
  position: relative;
}

.green-title{
  text-align: left;
  font: normal normal bold 39px/47px Bebas Neue;
  letter-spacing: 0px;
  padding-left: 50px;
  opacity: 1; 
}

.green-title-rigth{
  text-align: left;
  font: normal normal bold 39px/47px Bebas Neue;
  letter-spacing: 0px;
  opacity: 1; 
}

.step-participation{
  text-align: left;
  font: normal normal normal 19px/24px Helvetica Neue;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  padding-top: 20px;
    padding-left: 50px;
    padding-right: 30px;
}

.date-validity{
  text-align: left;
  font: normal normal bold 23px/28px Helvetica Neue;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  padding-top: 15px;
}

.terms-conditions-title{
  text-align: left;
  font: normal normal bold 39px/47px Bebas Neue;
  letter-spacing: 0px;
  opacity: 1;
  padding-top: 50px;
  padding-bottom: 10px;
}

.terms-conditions-box{
  width: 100%;               /* ancho relativo al padre */
  max-height: 100%;          /* límite de altura */
  overflow-y: auto;         /* scroll solo vertical */
  overflow-x: hidden;       /* desactiva scroll horizontal */
  padding: 10px;
  letter-spacing: 0px;
}

.terms-conditions{
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center; /* centra hijo horizontal */
  align-items: center;     /* centra hijo vertical */

}

.terms-conditions-box::-webkit-scrollbar {
  width: 3px;
}

.terms-conditions-box::-webkit-scrollbar-thumb {
  background: #68A22D;
  border-radius: 0px;
}

.line-footer{
  top: -15px;
  left: 10%;
  width: 80%;
  height: 0px;
  border: 1px solid var(--unnamed-color-68a22d);
  border: 1px solid #68A22D;
  opacity: 1;
  position: relative;
}

.rights-reserved-box{
  width: 80%;
  left: 10%;
  text-align: center;
  text-transform: uppercase;
  opacity: 1;
  position: relative;
  padding-bottom: 30px;
}

.rights-reserved-letter{
  font: normal normal normal 20px/16px Bebas Neue;
  color: #FFFFFF;
  line-height: 1;
}

p {
  margin-bottom: 1em;
}
ul {
  margin-left: 20px;
  margin-bottom: 1em;
}
ol {
  margin-left: 20px;
  margin-bottom: 1em;
}
.section {
  margin-bottom: 2em;
}
.small {
  font-size: 0.9em;
  color: #555;
}

.winners-box{
  width: 100%;               /* ancho relativo al padre */
  max-height: 100%;          /* límite de altura */
  overflow-y: auto;         /* scroll solo vertical */
  overflow-x: hidden;       /* desactiva scroll horizontal */
  padding: 10px;
  letter-spacing: 0px;
}

.winners{
  width: 500px;
  height: 250px;
  display: flex;
  justify-content: center; /* centra hijo horizontal */
  align-items: center;  
  padding-left: 50px;   /* centra hijo vertical */

}

.winners-box::-webkit-scrollbar {
  width: 3px;
}

.winners-box::-webkit-scrollbar-thumb {
  background: #68A22D;
  border-radius: 0px;
}