/* ===== Reset & base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%;min-height:100vh;
  font-family:var(--font-htt,"Inter",Arial,sans-serif);
  overflow-x:hidden; color:#fff;
  /* Fondo global morado → negro (como tickets) */
  background: linear-gradient(180deg, #4C009E 0%, #8000CF 80%, #000 80%, #000 100%);
}
img{max-width:100%;height:auto;display:block}

/* Solo mobile (opcional) */
@media (min-width:768px){
  body::before{
    content:"Disponible solo en dispositivos móviles";
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    text-align:center; font-weight:800; font-size:24px;
    background:#000; color:#fff;
  }
  main, footer, header{ filter:blur(2px); pointer-events:none; user-select:none; }
}

/* ===== Variables de marca ===== */
:root{
  --gold1:#FFC24B; --gold2:#FFE5A0; --gold3:#FFE5A0; --gold4:#FFCA56;
  --goldText:#FFD000;
  --field-bg:#0c0713; /* fondo de inputs (sólido; NO tarjeta oscura de fondo) */
}

/* ===== Layout ===== */
.contentad{ width:100%; max-width:1100px; margin:0 auto; padding:22px 16px 28px; }
.form-card{
  max-width:560px; margin:0 auto;
  /* Se quita el fondo negro con opacidad */
  background: transparent;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:18px 16px 16px;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

/* ===== Titulares ===== */
.titulo-suerte{
  margin:0 0 6px; text-align:center;
  font-weight:900; line-height:1.1; text-transform:uppercase; letter-spacing:.5px;
  /* dorado para titulares */
  background:linear-gradient(90deg, var(--gold1), var(--gold2), var(--gold3), var(--gold4));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size: clamp(22px, 6.2vw, 30px);
}
.descripcion-suerte{
  text-align:center; color:#fff; opacity:.9; margin-bottom:14px;
  font-size:14px;
}

/* ===== Mensajes ===== */
.message{
  background: rgba(255,194,75,.10);
  border:1px solid rgba(255,194,75,.45);
  color:#FFE5A0; padding:10px 12px; border-radius:10px;
  margin:10px 0 14px; font-size:14px;
}
.message a{ color:#FFE5A0; text-decoration:underline; }

/* ===== Formulario ===== */
form label{ display:block; font-size:12px; color:#FFE5A0; margin:10px 2px 6px; }
.input-icon{ position:relative; }
.input-icon i{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#FFD000; opacity:.95; font-size:16px; pointer-events:none;
}

/* Campos */
input[type="text"], input[type="tel"]{
  width:100%; padding:12px 14px 12px 40px;
  background:var(--field-bg); border:1px solid rgba(255,255,255,.18);
  color:#fff; border-radius:12px; outline:none; font-size:16px;
}
input::placeholder{ color:#c9c9c9; opacity:.9; }
input:focus{ border-color:#b36aff; box-shadow:0 0 0 3px rgba(179,106,255,.25); }

/* Checkboxes */
.checkbox-group{ margin:14px 0 4px; display:grid; gap:8px; }
.checkbox-group label{ color:#fff; font-size:13px; }
.checkbox-group input{ accent-color:#FFD000; }

/* ===== Botón principal (dorado) ===== */
.button-wrapper{ margin:14px 0 2px; display:flex; justify-content:center; }
.btn-primary{
  display:inline-block; border:0; cursor:pointer;
  font-weight:900; font-size:16px; letter-spacing:.3px;
  color:#2a105e; text-transform:uppercase;
  padding:14px 18px; border-radius:999px;
  background:linear-gradient(90deg, var(--gold1), var(--gold2), var(--gold3), var(--gold4));
  box-shadow:0 10px 22px rgba(0,0,0,.28);
  transition:transform .12s ease, filter .18s ease;
  min-width: min(320px, 86vw);
}
.btn-primary:active{ transform:translateY(1px) scale(.995); filter:brightness(.98); }

/* ===== Login link ===== */
.login-text{ text-align:center; margin-top:12px; color:#fff; font-size:13.5px; }
.login-text a{
  background:linear-gradient(90deg, var(--gold1), var(--gold2), var(--gold3), var(--gold4));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:800; text-decoration:none;
}