:root {
  --fondo: #0b0b0d;
  --panel: #16161a;
  --borde: #2a2a30;
  --texto: #f3f1ec;
  --suave: #b9b5ad;
  --naranja: #f26b1d;
  --naranja-2: #ff8a3d;
  --crema: #f6e7c9;
  --error: #ff6b6b;
  --ok: #4cd18a;
  --radio: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
a { color: var(--naranja-2); }
a:hover { color: var(--crema); }
img { max-width: 100%; height: auto; display: block; }

.contenedor { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }

.barra {
  border-bottom: 1px solid var(--borde);
  background: rgba(11, 11, 13, .92);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(6px);
}
.barra .contenedor { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.barra img { height: 34px; width: auto; }
.barra a.boton { padding: 8px 16px; font-size: 14px; }

.aviso-prueba {
  background: #3a2410; color: var(--crema); border-bottom: 1px solid var(--naranja);
  font-size: 14px; text-align: center; padding: 8px 16px;
}

.portada { padding: 24px 0 8px; }
.portada .poster {
  border-radius: var(--radio);
  margin: 0 auto;
  width: 100%;
  max-width: min(520px, 100%);
  box-shadow: 0 0 0 1px var(--borde), 0 20px 60px rgba(242, 107, 29, .18);
}

.lema {
  display: block; width: fit-content; margin: 24px auto 0;
  background: var(--naranja); color: #1a0d04;
  font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 8px 18px; border-radius: 999px; text-align: center; font-size: 15px;
}

h1, h2, h3 { line-height: 1.2; }
h2 { font-size: 22px; margin: 0 0 14px; color: var(--crema); }
h2 span { color: var(--naranja); }

.seccion { padding: 28px 0; border-top: 1px solid var(--borde); }
.seccion:first-of-type { border-top: 0; }
.centro { text-align: center; }
.suave { color: var(--suave); }

.tarjetas {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tarjeta {
  border: 1px solid var(--naranja); border-radius: var(--radio);
  padding: 14px 10px; text-align: center; font-size: 13px; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(242, 107, 29, .08), transparent);
}
.tarjeta svg { width: 34px; height: 34px; margin: 0 auto 8px; display: block; color: var(--naranja); }
.tarjeta b { color: var(--naranja-2); display: block; }

.premios { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.premio { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 6px; }
.premio .lugar { color: var(--naranja); font-weight: 800; font-size: 14px; text-transform: uppercase; }
.premio .monto { font-weight: 800; font-size: clamp(18px, 5vw, 26px); }

.datos { display: grid; gap: 10px; }
.dato { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; }
.dato b { color: var(--naranja-2); }
.pendiente { color: var(--suave); font-style: italic; }

.boton {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  background: var(--naranja); color: #1a0d04; font-weight: 800; font-family: inherit;
  font-size: 17px; padding: 14px 28px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: .4px;
}
.boton:hover { background: var(--naranja-2); color: #1a0d04; }
.boton:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--crema); outline-offset: 2px;
}
.boton.secundario { background: transparent; color: var(--crema); border: 1px solid var(--borde); }

/* Formulario */
form.registro { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 16px; }
@media (min-width: 640px) { form.registro { padding: 28px; } }
.campo { margin-bottom: 18px; }
.campo label, .campo .etiqueta { display: block; font-weight: 700; margin-bottom: 6px; }
.campo .ayuda { font-size: 13px; color: var(--suave); margin-top: 4px; }
.fila { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .fila { grid-template-columns: 1fr 1fr; } }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], input[type=number],
select, textarea {
  width: 100%; font: inherit; color: var(--texto);
  background: #0f0f12; border: 1px solid var(--borde); border-radius: 10px; padding: 12px;
}
input[type=date] { color-scheme: dark; }
textarea { min-height: 220px; resize: vertical; }
input[type=file] { width: 100%; color: var(--suave); font: inherit; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 700; margin-right: 10px; cursor: pointer;
  border: 1px solid var(--naranja); background: transparent; color: var(--naranja-2);
  padding: 8px 14px; border-radius: 999px;
}
.con-error input, .con-error select, .con-error textarea { border-color: var(--error); }
.error { color: var(--error); font-size: 14px; margin-top: 6px; }
.alerta { border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--error); background: rgba(255, 107, 107, .08); }
.alerta.ok { border-color: var(--ok); background: rgba(76, 209, 138, .08); }
.casilla { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.casilla input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--naranja); flex: none; }
.casilla label { font-weight: 400; margin: 0; }
.separador { text-align: center; color: var(--suave); margin: 4px 0 12px; font-size: 14px; }
.contador { text-align: right; font-size: 12px; color: var(--suave); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.confirmacion { text-align: center; padding: 40px 0; }
.confirmacion .folio {
  display: inline-block; font-size: 32px; font-weight: 800; letter-spacing: 3px;
  color: var(--naranja); border: 2px dashed var(--naranja); border-radius: var(--radio); padding: 10px 22px; margin: 12px 0;
}

.legal { font-size: 15px; }
.legal h2 { margin-top: 28px; }
.legal p { margin: 0 0 12px; }
.legal li { margin-bottom: 6px; }

.pie { border-top: 1px solid var(--borde); padding: 24px 0 40px; font-size: 14px; color: var(--suave); text-align: center; }
.pie a { margin: 0 8px; }