/* Marca USKA1: los mismos colores y letras en inscripción, panel y seguimiento. Cada parte trae su propia hoja. */
:root {
  --negro: #0A0A0B;
  --carbon: #16161A;
  --carbon-2: #1F1F25;
  --linea: rgba(255, 255, 255, .1);
  --linea-oro: rgba(212, 164, 55, .35);
  --rojo: #D7192D;
  --rojo-2: #E8243A;
  --rojo-texto: #FF8A94;
  --oro: #D4A437;
  --azul: #2C6BFF;
  --azul-texto: #8DB0FF;
  --verde-texto: #7FD8A4;
  --hueso: #F2EDE4;
  --humo: #A3A3AD;
  --curva: cubic-bezier(.16, 1, .3, 1);
  --curva-rebote: cubic-bezier(.34, 1.56, .64, 1);
  --titulo: Anton, Impact, sans-serif;
  --cifra: 'Barlow Condensed', Impact, sans-serif;
  --texto: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--negro); color: var(--hueso); font-family: var(--texto); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
a { color: var(--oro); text-decoration: none; }
button { font: inherit; color: inherit; touch-action: manipulation; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; letter-spacing: .01em; margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
input, select, textarea { font: 500 16px var(--texto); color: var(--hueso); }
[hidden] { display: none !important; }

/* Marca del encabezado: escudo y palabra armada igual que en el escudo real. */
.marca { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--hueso); line-height: 1; }
.marca img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6)); }
.palabra { display: flex; align-items: flex-end; gap: 2px; height: 40px; color: #E0202F; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 2px 8px rgba(0, 0, 0, .6)); }
.palabra .caja { display: flex; flex-direction: column; justify-content: center; height: 30px; border-top: 3px solid #E0202F; border-bottom: 3px solid #E0202F; font-family: 'Archivo Black', 'Arial Black', sans-serif; line-height: 1; }
.palabra .us { font-size: 20px; letter-spacing: -.02em; text-transform: lowercase; padding: 0 1px; }
.palabra .a { font-size: 18px; padding: 0 3px; }
.palabra .k { font-family: 'DM Serif Display', 'Times New Roman', serif; font-size: 50px; line-height: .8; margin: 0 -1px; }
.palabra .uno { font-family: 'Archivo Black', 'Arial Black', sans-serif; font-size: 40px; line-height: .85; }

/* Botón principal con el corte diagonal de 12° del diseño. */
.boton-rojo {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 32px 0 24px; border: 0; cursor: pointer;
  background: var(--rojo); color: var(--hueso); font-family: var(--titulo); font-size: 20px; letter-spacing: .06em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: background-color 140ms ease, transform 140ms var(--curva);
}
.boton-rojo:active { transform: scale(.97); }
.boton-rojo[disabled] { background: #5B2028; color: #C9B9B9; cursor: not-allowed; }
.boton-sobrio {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--hueso); border: 1px solid var(--linea); font-weight: 600; font-size: 14px;
  transition: border-color 140ms ease, color 140ms ease, transform 140ms var(--curva);
}
.boton-sobrio:active { transform: scale(.97); }
.boton-sobrio[disabled] { color: var(--humo); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .boton-rojo:not([disabled]):hover { background: var(--rojo-2); }
  .boton-sobrio:not([disabled]):hover { border-color: var(--oro); color: var(--oro); }
  a:hover { color: var(--hueso); }
}

/* Esquinas del ring: azul a la izquierda y roja a la derecha, como en la hoja VERSUS. */
.esquina-azul { color: var(--azul-texto); }
.esquina-roja { color: var(--rojo-texto); }

/* Reglamento: el mismo cuadro en inscripción y seguimiento. */
.reglamento { width: min(760px, calc(100vw - 24px)); max-height: 88dvh; padding: 0; border: 1px solid var(--oro); border-radius: 24px; background: var(--carbon); color: var(--hueso); overflow: hidden; }
.reglamento::backdrop { background: rgba(0, 0, 0, .7); }
.reglamento[open] { display: flex; flex-direction: column; animation: reglamento-entra 280ms var(--curva); }
@keyframes reglamento-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.reglamento-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--linea); }
.reglamento-cabeza h2 { font-size: 32px; }
.reglamento-cuerpo { overflow: auto; overscroll-behavior: contain; padding: 8px 24px 28px; }
.reglamento h3 { font-size: 22px; margin: 24px 0 10px; }
.reglamento p { margin: 0 0 10px; color: var(--humo); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.reglamento ul { margin: 0; padding: 0 0 0 18px; color: var(--hueso); font-size: 14px; line-height: 1.6; }
.tabla-reglas { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-reglas th { text-align: left; font-weight: 600; color: var(--humo); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linea-oro); }
.tabla-reglas td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-reglas .cifras { font-family: var(--cifra); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}