/* ========================================= */
/* REGISTRO RULETA PULLMAN */
/* ========================================= */

:root {

  --color-verde: #3A4E43;

  --color-verde-oscuro: #314239;

  --color-marfil: #F4F1E8;

  --color-marfil-suave: #EAE4D8;

  --color-blanco: #FFFFFF;

  --color-texto: #314239;

  --color-error: #8A2E2E;

  --color-error-fondo: #F8EAEA;

}


/* ========================================= */
/* RESET */
/* ========================================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}


/* ========================================= */
/* BODY */
/* ========================================= */

body {

  width: 100%;

  min-height: 100vh;

  background-image:
    url('../img/Fondo.png');

  background-size:
    cover;

  background-position:
    center;

  background-repeat:
    no-repeat;

  font-family:
    'Montserrat',
    Helvetica,
    Arial,
    sans-serif;

  display: flex;

  justify-content: center;

  align-items: center;

  padding:
    30px 20px;

}


/* ========================================= */
/* ESTADO INICIAL */
/* ========================================= */

body.registro-cargando .registro-container {

  visibility: hidden;

}


.estado-inicial {

  position: fixed;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  color:
    var(--color-marfil);

  font-size:
    1.1rem;

  font-weight:
    600;

  background:
    rgba(49, 66, 57, 0.2);

  z-index:
    20;

}


/* ========================================= */
/* CONTENEDOR */
/* ========================================= */

.registro-container {

  width: 100%;

  max-width: 620px;

  display: flex;

  justify-content: center;

  align-items: center;

  visibility: hidden;

}


/* ========================================= */
/* TARJETA */
/* ========================================= */

.registro-card {

  width: 100%;

  background:
    var(--color-marfil);

  border:
    5px solid
    var(--color-verde);

  border-radius:
    28px;

  padding:
    42px 50px;

  box-shadow:

    0 25px 70px
    rgba(0, 0, 0, 0.30),

    0 6px 20px
    rgba(0, 0, 0, 0.15);

}


/* ========================================= */
/* ENCABEZADO */
/* ========================================= */

.registro-header {

  text-align: center;

  margin-bottom:
    36px;

}


.registro-header::after {

  content: '';

  display: block;

  width:
    70px;

  height:
    4px;

  background:
    var(--color-verde);

  border-radius:
    20px;

  margin:
    24px auto 0;

}


.registro-header h1 {

  color:
    var(--color-verde);

  font-size:
    2rem;

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.5px;

}


.registro-header p {

  color:
    var(--color-verde-oscuro);

  font-size:
    1rem;

  line-height:
    1.5;

  margin-top:
    14px;

}


/* ========================================= */
/* FORMULARIO */
/* ========================================= */

.registro-form {

  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    20px;

}


/* ========================================= */
/* CAMPOS */
/* ========================================= */

.campo {

  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

}


.campo label {

  color:
    var(--color-verde-oscuro);

  font-size:
    0.95rem;

  font-weight:
    600;

  padding-left:
    4px;

}


/* ========================================= */
/* INPUTS */
/* ========================================= */

.campo input {

  width:
    100%;

  height:
    58px;

  padding:
    0 18px;

  background:
    var(--color-blanco);

  color:
    var(--color-texto);

  border:
    2px solid
    var(--color-marfil-suave);

  border-radius:
    12px;

  outline:
    none;

  font-family:
    'Montserrat',
    Helvetica,
    Arial,
    sans-serif;

  font-size:
    1rem;

  transition:

    border-color 0.2s ease,

    box-shadow 0.2s ease,

    background 0.2s ease;

}


.campo input::placeholder {

  color:
    #8A938E;

  opacity:
    0.8;

}


.campo input:focus {

  border-color:
    var(--color-verde);

  box-shadow:

    0 0 0 4px
    rgba(58, 78, 67, 0.10);

  background:
    #FFFFFF;

}


/* ========================================= */
/* MENSAJE DE ERROR */
/* ========================================= */

.mensaje-formulario {

  display:
    none;

  padding:
    12px 14px;

  color:
    var(--color-error);

  background:
    var(--color-error-fondo);

  border:
    1px solid
    rgba(138, 46, 46, 0.25);

  border-radius:
    10px;

  font-size:
    0.9rem;

  line-height:
    1.4;

}


.mensaje-formulario.visible {

  display:
    block;

}


/* ========================================= */
/* BOTÓN */
/* ========================================= */

.btn-participar {

  width:
    100%;

  min-height:
    60px;

  margin-top:
    12px;

  background:
    var(--color-verde);

  color:
    var(--color-marfil);

  border:
    2px solid
    var(--color-verde);

  border-radius:
    50px;

  font-family:
    'Montserrat',
    Helvetica,
    Arial,
    sans-serif;

  font-size:
    1.05rem;

  font-weight:
    700;

  letter-spacing:
    1px;

  cursor:
    pointer;

  box-shadow:

    0 6px 18px
    rgba(0, 0, 0, 0.18);

  transition:

    background 0.2s ease,

    color 0.2s ease,

    transform 0.15s ease,

    box-shadow 0.2s ease;

}


.btn-participar:hover:not(:disabled) {

  background:
    var(--color-marfil);

  color:
    var(--color-verde);

  box-shadow:

    0 8px 22px
    rgba(0, 0, 0, 0.20);

}


.btn-participar:active:not(:disabled) {

  transform:
    scale(0.98);

}


.btn-participar:disabled {

  opacity:
    0.65;

  cursor:
    wait;

}


/* ========================================= */
/* TEXTO LEGAL */
/* ========================================= */

.mensaje-legal {

  color:
    #68756E;

  text-align:
    center;

  font-size:
    0.75rem;

  line-height:
    1.5;

  margin-top:
    26px;

}


/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media (max-width: 650px) {

  body {

    padding:
      20px 15px;

  }


  .registro-card {

    padding:
      32px 25px;

    border-radius:
      22px;

  }


  .registro-header h1 {

    font-size:
      1.55rem;

  }


  .registro-header p {

    font-size:
      0.9rem;

  }


  .campo input {

    height:
      54px;

  }

}


/* ========================================= */
/* PANTALLAS BAJAS */
/* ========================================= */

@media (max-height: 800px) {

  body {

    align-items:
      flex-start;

  }


  .registro-card {

    margin:
      20px 0;

  }

}