/* =====================================================================
   Knockout Couture — Juegos de captación (Quiz + Ruleta)
   Hoja de estilos compartida. Mobile-first, alto contraste.
   ---------------------------------------------------------------------
   PALETA OFICIAL (marca/identidad-visual.md, confirmada por Adrián 2026-07-08):
     Negro  #110F10 · Blanco #FFFFFF · Acento (verde ácido) #b2f100
   Contraste: el verde es MUY claro -> siempre texto oscuro (#110F10) SOBRE
   verde, y verde SOBRE negro para acentos/textos.
   Logo: archivo OFICIAL (assets/kc-wordmark-white.svg), no redibujado.
   Tipografía: fuente de marca oficial = Horizon/Impact; se usa Impact por ser
   websafe (sin Google Fonts). El wordmark va como imagen del SVG oficial.
   ===================================================================== */

:root {
  --kc-black:   #110F10;   /* negro oficial */
  --kc-ink:     #171516;   /* superficie del modal (casi negro) */
  --kc-white:   #FFFFFF;
  --kc-accent:  #b2f100;   /* verde ácido — ÚNICO acento de marca */
  --kc-accent-dk:#9ad600;  /* verde más oscuro para hover */
  --kc-gray:    #9A9A9A;
  --kc-line:    rgba(255,255,255,0.14);
  --kc-warn:    #F5A623;   /* estado de error de formulario (UI, no marca) */

  /* Fuente de marca OFICIAL = Horizon / Impact. Se usa Impact por ser websafe
     (disponible en todos los sistemas, sin cargar Google Fonts). Si Adrián
     aporta el archivo de Horizon, se sustituye aquí. El wordmark siempre es
     imagen del SVG oficial, no fuente. */
  --kc-font-display: Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Franklin Gothic Bold', sans-serif;
  --kc-font-ui: Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --kc-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --kc-radius: 4px;
  --kc-shadow: 0 24px 70px rgba(0,0,0,0.6);
}

/* Reset acotado: garantiza box-sizing propio pase lo que pase en el tema
   anfitrión (Shopify). Sin esto, los width:100% + padding se desbordan. */
.kc-overlay, .kc-overlay *, .kc-overlay *::before, .kc-overlay *::after {
  box-sizing: border-box;
}

/* ---------- Overlay / posicionamiento ---------- */
.kc-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;               /* por encima del tema de Shopify */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(17,15,16,0.74);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s ease;
  font-family: var(--kc-font-body);
  -webkit-font-smoothing: antialiased;
}
.kc-overlay.kc-open { opacity: 1; }
.kc-overlay[hidden] { display: none; }

/* ---------- Contenedor del modal ---------- */
.kc-modal {
  position: relative;
  width: 100%;
  max-width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--kc-ink);
  color: var(--kc-white);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius);
  box-shadow: var(--kc-shadow);
  transform: translateY(14px) scale(.985);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  overscroll-behavior: contain;
}
.kc-overlay.kc-open .kc-modal { transform: none; }
.kc-modal:focus { outline: none; }   /* foco gestionado; sin anillo en el contenedor */

/* Franja de acento superior de marca */
.kc-modal::before {
  content: "";
  display: block;
  height: 5px;
  background: var(--kc-accent);
}

.kc-inner { padding: 26px 24px 28px; }

/* ---------- Botón cerrar ---------- */
.kc-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--kc-line);
  border-radius: 50%;
  color: var(--kc-white);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.kc-close:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.kc-close:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 2px; }

/* ---------- Cabecera / logo OFICIAL ---------- */
.kc-logo { display: block; margin-bottom: 16px; }
.kc-logo img {
  display: block;
  height: 20px;            /* wordmark oficial blanco (SVG) */
  width: auto; max-width: 78%;
}
/* Logo HERO: portada del juego, grande y centrado sobre negro */
.kc-logo--hero { text-align: center; margin: 4px 0 20px; }
.kc-logo--hero img {
  height: 40px; max-width: 92%; margin: 0 auto;
}
@media (max-width: 360px) { .kc-logo--hero img { height: 34px; } }

/* ---------- Tipografía ---------- */
.kc-kicker {
  font-family: var(--kc-font-ui);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--kc-accent);
  margin: 0 0 8px;
}
.kc-title {
  font-family: var(--kc-font-display);
  font-weight: 800;                 /* Impact ya es heavy; el peso lo usa el fallback */
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .98;
  font-size: clamp(28px, 8vw, 38px);
  margin: 0 0 10px;
  color: var(--kc-white);
}
.kc-sub {
  font-size: 14.5px;
  line-height: 1.5;
  color: #DcDcDc;
  margin: 0 0 20px;
}
.kc-fineprint {
  font-size: 11px;
  line-height: 1.45;
  color: var(--kc-gray);
  margin: 14px 0 0;
}
.kc-fineprint a { color: #Bdbdbd; }

/* ---------- Botones ---------- */
.kc-btn {
  display: block; width: 100%;
  padding: 15px 18px;
  font-family: var(--kc-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 16px;
  border: 0; border-radius: var(--kc-radius);
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, opacity .15s;
}
.kc-btn:active { transform: translateY(1px); }
.kc-btn:focus-visible { outline: 2px solid var(--kc-white); outline-offset: 2px; }
/* Acento verde muy claro -> texto OSCURO encima (accesible) */
.kc-btn--primary { background: var(--kc-accent); color: var(--kc-black); }
.kc-btn--primary:hover { background: var(--kc-accent-dk); }
.kc-btn--ghost {
  background: transparent; color: var(--kc-white);
  border: 1px solid var(--kc-line); font-size: 13px; padding: 12px;
}
.kc-btn--ghost:hover { background: rgba(255,255,255,.06); }
.kc-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* enlace secundario "no gracias" */
.kc-decline {
  display: block; width: 100%;
  margin-top: 12px;
  background: none; border: 0;
  color: var(--kc-gray);
  font-family: var(--kc-font-ui);
  font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.kc-decline:hover { color: #Cdcdcd; text-decoration: underline; }

/* ---------- Campo de email ---------- */
.kc-field { margin: 0 0 4px; }
.kc-input {
  width: 100%;
  padding: 14px 16px;
  background: #0c0b0c;
  color: var(--kc-white);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius);
  font-size: 16px;               /* 16px evita el zoom en iOS */
  font-family: var(--kc-font-body);
  margin-bottom: 10px;
}
.kc-input::placeholder { color: #6b6b6b; }
.kc-input:focus { outline: none; border-color: var(--kc-accent); }
.kc-input.kc-invalid { border-color: var(--kc-warn); background: #1a1508; }
.kc-error {
  color: var(--kc-warn); font-size: 12px; margin: -4px 0 10px; min-height: 14px;
}

/* ---------- QUIZ: barra de progreso ---------- */
.kc-progress { display: flex; gap: 5px; margin-bottom: 18px; }
.kc-progress span {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.16);
  transition: background .25s;
}
.kc-progress span.on { background: var(--kc-accent); }

/* ---------- QUIZ: opciones ---------- */
.kc-options { display: grid; gap: 10px; margin-bottom: 6px; }
.kc-opt {
  text-align: left;
  padding: 15px 16px;
  background: #100f10;
  color: var(--kc-white);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius);
  font-size: 15px; line-height: 1.3;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .08s;
}
.kc-opt:hover { border-color: var(--kc-accent); background: #161516; }
.kc-opt:active { transform: translateY(1px); }
.kc-opt:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 2px; }
.kc-opt b { display:block; font-family: var(--kc-font-ui); font-weight:600; text-transform: uppercase; letter-spacing:.03em; font-size: 15px; margin-bottom: 2px;}
.kc-opt small { color: var(--kc-gray); font-size: 12.5px; }
/* feedback del trivial: respuesta correcta (verde) / incorrecta (atenuada) */
.kc-opt[disabled] { cursor: default; }
.kc-opt.correct { border-color: var(--kc-accent); background: #1c2600; color: #fff; }
.kc-opt.correct b { color: var(--kc-accent); }
.kc-opt.wrong { border-color: var(--kc-warn); opacity: .6; }

/* feedback del trivial: veredicto + dato curioso */
.kc-verdict {
  font-family: var(--kc-font-ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--kc-accent); font-size: 14px; margin: 14px 0 4px;
}
.kc-dato {
  font-size: 13px; line-height: 1.5; color: #Cfcfcf;
  border-left: 3px solid var(--kc-accent); padding-left: 10px; margin: 4px 0 14px;
}

/* ---------- QUIZ: resultado ---------- */
.kc-result-badge {
  font-family: var(--kc-font-ui);
  font-weight: 600; text-transform: uppercase;
  color: var(--kc-accent); font-size: 13px; letter-spacing: .18em;
  margin-bottom: 6px;
}

/* ---------- ESCALERA DE PREMIOS (tarjetas claras sobre modal negro) ---------- */
.kc-ladder { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 8px; }
.kc-lad-step {
  background: var(--kc-bone);            /* hueso: entra por los ojos sobre el negro */
  color: var(--kc-black);
  border-radius: 8px;
  padding: 11px 12px 12px;
  position: relative;
  border-left: 5px solid var(--kc-accent);
}
/* pill del tramo (negro con texto verde) */
.kc-lad-th {
  display: inline-block; margin-bottom: 8px;
  background: var(--kc-black); color: var(--kc-accent);
  font-family: var(--kc-font-ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 11px; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
}
.kc-lad-th b { color: #fff; font-weight: 700; }
/* chips de premio con icono */
.kc-lad-prizes { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-lad-prize {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #E3DECF; border-radius: 7px;
  padding: 5px 9px 5px 6px;
  font-size: 12.5px; font-weight: 600; color: var(--kc-black); line-height: 1.15;
}
.kc-lad-ico { font-size: 15px; line-height: 1; }
.kc-lad-ico--pct {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--kc-accent); color: var(--kc-black);
  font-family: var(--kc-font-ui); font-weight: 700; font-size: 11px;
}
/* peldaño TOP (150€ · el premiazo): verde de marca, destacado */
.kc-lad-top {
  background: var(--kc-accent);
  border-left-color: var(--kc-black);
  box-shadow: 0 0 0 2px rgba(178,241,0,.35);
}
.kc-lad-top .kc-lad-th { background: var(--kc-black); color: var(--kc-accent); }
.kc-lad-top .kc-lad-prize { background: #0f0f0f; color: #fff; border-color: rgba(0,0,0,.25); }
.kc-lad-top .kc-lad-ico--pct { background: #fff; }

/* ---------- RULETA ---------- */
.kc-wheel-wrap {
  position: relative;
  width: 260px; height: 260px;
  margin: 6px auto 20px;
  max-width: 72vw; aspect-ratio: 1 / 1;
}
.kc-wheel {
  width: 100%; height: 100%;
  border-radius: 50%;
  transition: transform 4.2s cubic-bezier(.12,.72,.12,1);
  will-change: transform;
  display: block;
}
/* Puntero (arriba, apuntando hacia abajo) — en acento verde */
.kc-pointer {
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 22px solid var(--kc-accent);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.6));
  z-index: 3;
}
.kc-hub {
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  background: var(--kc-white); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kc-font-ui); font-weight: 700;
  color: var(--kc-black); font-size: 13px; letter-spacing: .04em;
  z-index: 2;
  box-shadow: 0 0 0 4px var(--kc-black);
}

/* código descuento revelado */
.kc-code {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  border: 1px dashed var(--kc-accent);
  background: #16180b;
  border-radius: var(--kc-radius);
  padding: 14px 16px; margin: 16px 0 6px;
}
.kc-code code {
  font-family: var(--kc-font-ui); font-weight: 700;
  letter-spacing: .12em; font-size: 20px; color: var(--kc-white);
}
.kc-copy {
  background: var(--kc-white); color: var(--kc-black);
  border: 0; border-radius: 3px; padding: 8px 12px;
  font-family: var(--kc-font-ui);
  font-weight: 700; font-size: 12px; text-transform: uppercase;
  cursor: pointer; letter-spacing: .04em;
}
.kc-copy.kc-copied { background: var(--kc-accent); color: var(--kc-black); }

/* spinner de carga: usa currentColor (visible sobre verde y sobre oscuro) */
.kc-spin {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(127,127,127,.35);
  border-top-color: currentColor;
  display: inline-block; vertical-align: -4px;
  animation: kc-rotate .7s linear infinite;
}
@keyframes kc-rotate { to { transform: rotate(360deg); } }

/* transición entre pasos */
.kc-step { animation: kc-fade .3s ease; }
@keyframes kc-fade { from { opacity: 0; transform: translateY(6px);} to {opacity:1; transform:none;} }

/* accesibilidad: respeta reduce motion */
@media (prefers-reduced-motion: reduce) {
  .kc-overlay, .kc-modal, .kc-wheel, .kc-step { transition: none; animation: none; }
}

/* pantallas muy pequeñas */
@media (max-width: 360px) {
  .kc-inner { padding: 22px 18px 24px; }
  .kc-title { font-size: 26px; }
}