:root {
  --azul: #0b62e4;
  --azul-texto: #1d54d8;
  --amarillo: #f2e94e;
  --blanco: #f5f8ff;
  --celeste: #4db5f0;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  background: url('../assets/fondo.jpg') center / 100% 100% no-repeat fixed;
  color: var(--blanco);
  overflow: hidden;
}

/* Red de seguridad: nunca recortar contenido en escritorio */
.screen { overflow: auto; }
.inicio-head, .panel-head, .fin-logos, .ruleta-layout, .pregunta-layout { flex-wrap: wrap; justify-content: center; }
.ruleta-layout { flex-wrap: nowrap; }
.pregunta-layout { flex-wrap: nowrap; }

.marcas {
  position: fixed;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 28px;
  font-size: 10px;
  letter-spacing: .55em;
  color: rgba(255, 255, 255, .55);
  pointer-events: none;
  z-index: 5;
}
.marcas.top { top: 16px; }
.marcas.bottom { bottom: 16px; }

.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
.screen.active { display: flex; animation: screenIn .45s ease; }

@keyframes screenIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.btn {
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }

.btn-white {
  background: var(--blanco);
  color: var(--azul-texto);
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: .45em;
  text-indent: .45em;
  padding: .9em 2.6em;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 20, 80, .25);
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--blanco);
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 600;
  letter-spacing: .3em;
  text-indent: .3em;
  padding: .8em 1.8em;
  border-radius: 10px;
}

.opcion {
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
.opcion .pill { cursor: pointer; }
.opcion:hover {
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, .5));
}
.opcion:active { transform: translateY(-1px) scale(1.02); }
.btn-opcion {
  background: transparent;
  color: var(--amarillo);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: .12em;
  text-indent: .12em;
  padding: .35em .45em;
}
.btn-opcion:hover {
  text-shadow: 0 0 12px rgba(248, 243, 94, .95), 0 0 32px rgba(248, 243, 94, .55);
}
.opcion:hover .pill-circular {
  box-shadow: 0 0 0 6px rgba(248, 243, 94, .4), 0 0 34px rgba(150, 210, 255, .95), inset 0 -5px 10px rgba(0, 40, 90, .35);
}
.opcion:hover .pill-plata {
  box-shadow: 0 0 0 6px rgba(248, 243, 94, .4), 0 0 34px rgba(255, 255, 255, .85), inset 0 -5px 10px rgba(120, 120, 120, .3);
}
.pill.pill-plata {
  background: linear-gradient(180deg, #ececec, #cfcfcf);
  color: #4a5568;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .18), 0 0 24px rgba(210, 210, 210, .4), inset 0 -5px 10px rgba(120, 120, 120, .3);
}
.pill.pill-circular {
  width: clamp(78px, 6.5vw, 98px);
  height: clamp(78px, 6.5vw, 98px);
  border-radius: 50%;
  padding: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: clamp(8.5px, 0.7vw, 11px);
  letter-spacing: .06em;
  text-indent: .06em;
  line-height: 1.1;
}
#screen-pregunta {
  background: linear-gradient(180deg, #3b68e7 0%, #3d6ce8 55%, #4c8cf1 80%, #6ab9fb 100%);
}

.btn-azul {
  background: var(--celeste);
  color: var(--amarillo);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  padding: .5em 2.4em;
  border-radius: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5em 1.5em;
  border-radius: 999px;
  background: linear-gradient(180deg, #59d0f6, #2e8be0);
  color: #0a3f77;
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing: .14em;
  box-shadow: 0 0 0 8px rgba(140, 210, 255, .3), 0 0 40px rgba(120, 200, 255, .8), inset 0 -8px 14px rgba(0, 40, 90, .35);
}
.pill-sm { font-size: clamp(12px, 1.3vw, 18px); box-shadow: 0 0 0 5px rgba(140, 210, 255, .3), 0 0 24px rgba(120, 200, 255, .8), inset 0 -5px 10px rgba(0, 40, 90, .35); }

.brand { display: flex; flex-direction: column; gap: 14px; }
.brand img { width: clamp(140px, 16vw, 240px); }
.brand h1 {
  margin: 0;
  color: var(--amarillo);
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: .5em;
  line-height: 1.55;
}
.brand-sm img { width: clamp(90px, 9vw, 140px); }
.brand-sm h1 { font-size: clamp(10px, 1.1vw, 15px); }

#screen-inicio .inicio-head {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
.wheel-icon {
  width: clamp(34px, 4vw, 56px);
  color: #0a3f77;
  opacity: .8;
}

.ruleta-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 6vw, 110px);
  width: 100%;
  padding: 0 4vw;
}
.wheel-wrap { flex: 0 0 auto; }
#wheel { width: min(66vh, 44vw); display: block; }
#wheel-g { transform-origin: 300px 300px; }
.chip-num {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 46px;
  font-weight: 700;
  fill: var(--azul-texto);
}
.chip { transition: opacity .4s; }
.chip.usada { opacity: .22; }

.ruleta-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vh, 48px);
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.btn-girar { font-size: clamp(26px, 3.6vw, 48px); padding: .8em 2.4em; border-radius: 26px; }
.ruleta-foot {
  display: flex;
  align-items: center;
  gap: 26px;
}
#aciertos {
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: .3em;
  font-weight: 600;
}

.pregunta-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 90px);
  width: 100%;
  padding: 0 5vw;
}
.num-chip {
  background: linear-gradient(180deg, #f8f35e, #d9e04a);
  color: var(--azul-texto);
  font-size: clamp(48px, 8vw, 110px);
  font-weight: 700;
  line-height: 1;
  padding: .12em .32em;
  border-radius: .18em;
  transform: rotate(-6deg);
  box-shadow: 0 12px 34px rgba(0, 20, 80, .3);
  flex: 0 0 auto;
}
.pregunta-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.6vh, 28px);
  max-width: 780px;
}
.q-foto {
  width: min(760px, 86vw);
  border: 6px solid var(--blanco);
  border-radius: 24px;
  display: block;
}
#q-texto {
  margin: 0;
  font-size: clamp(17px, 2vw, 27px);
  font-weight: 500;
  text-align: center;
  line-height: 1.45;
}
.q-pregunta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--amarillo);
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 700;
}
.q-pregunta b { color: var(--amarillo); }
.q-opciones { display: flex; gap: clamp(20px, 4vw, 70px); }

#screen-fin { gap: 30px; }
.fin-titulo {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 46px);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}
.fin-score {
  margin: 0;
  font-size: clamp(16px, 2vw, 26px);
  letter-spacing: .3em;
  font-weight: 600;
  color: var(--amarillo);
}
.fin-logos {
  display: flex;
  align-items: center;
  gap: 30px;
}
.fin-logos img { width: clamp(120px, 14vw, 220px); }
.fin-div { width: 1.5px; height: 70px; background: rgba(255, 255, 255, .5); }

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 60, 180, .25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 20;
  transition: opacity .3s;
}
.modal.hidden { display: none; }
.hidden { display: none; }

.modal-card {
  background: var(--blanco);
  color: var(--azul-texto);
  border-radius: 30px;
  padding: clamp(28px, 5vh, 56px) clamp(28px, 5vw, 72px);
  text-align: center;
  max-width: min(760px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  box-shadow: 0 30px 80px rgba(0, 10, 60, .35);
}
#m-titulo {
  margin: 0;
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 800;
}
.m-razon {
  border: 1.5px solid var(--azul-texto);
  border-radius: 16px;
  padding: 14px 26px;
  font-weight: 700;
  font-size: clamp(14px, 1.7vw, 21px);
  max-width: 560px;
}
.m-reporte {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #4a5568;
  font-size: clamp(11px, 1.2vw, 15px);
  max-width: 560px;
}
.m-reporte .arr { color: #7f9be0; letter-spacing: -2px; }
#m-reporte-txt { text-align: center; }

@media (max-width: 900px) {
  body { overflow: auto; overscroll-behavior-y: none; background-attachment: scroll; }
  .btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .screen {
    position: relative; inset: auto;
    min-height: 100vh; min-height: 100dvh;
    padding: max(70px, env(safe-area-inset-top)) 0 max(70px, env(safe-area-inset-bottom));
    gap: 34px;
  }
  .ruleta-layout, .pregunta-layout { flex-direction: column; gap: 30px; }
  #wheel { width: min(88vw, 52dvh); }
  .inicio-head { flex-direction: column; text-align: center; }
  .brand { align-items: center; }
  .q-opciones { flex-direction: column; gap: 18px; width: 100%; align-items: center; }
  .opcion { justify-content: center; }
  .q-foto { width: min(640px, 88vw); }
  .marcas span:nth-child(2) { display: none; }
  .marcas { padding: 0 16px; font-size: 8px; letter-spacing: .4em; }
  .marcas.top { top: max(12px, env(safe-area-inset-top)); }
  .marcas.bottom { bottom: max(12px, env(safe-area-inset-bottom)); }
  .fin-logos { flex-wrap: wrap; gap: 18px; }
  .fin-logos img { width: min(150px, 38vw); }
  .fin-div { height: 46px; }
  .modal-card {
    max-height: 86vh; max-height: 86dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 22px;
    gap: 18px;
  }
}

/* Móviles chicos */
@media (max-width: 420px) {
  .btn-white { letter-spacing: .3em; text-indent: .3em; }
  .pill { letter-spacing: .08em; }
  .brand h1 { letter-spacing: .35em; }
  .num-chip { font-size: clamp(38px, 11vw, 60px); }
  .q-pregunta { text-align: center; flex-wrap: wrap; justify-content: center; }
}

/* Móviles de poca altura: todo a la vista sin scroll */
@media (max-width: 900px) and (max-height: 680px) {
  .screen { padding: 44px 0; gap: 14px; }
  .ruleta-layout { gap: 14px; }
  .ruleta-panel { gap: 14px; }
  #wheel { width: min(78vw, 42dvh); }
  .panel-head { gap: 10px; }
  .brand-sm img { width: clamp(70px, 18vw, 100px); }
  .brand-sm h1 { font-size: 9px; line-height: 1.35; }
  .btn-girar { font-size: clamp(16px, 4.5vw, 22px); padding: .6em 1.6em; border-radius: 18px; }
  #aciertos { font-size: 12px; letter-spacing: .2em; }
  .q-foto { width: min(52vh, 86vw); }
}

/* Celular en horizontal (poca altura) */
@media (max-height: 520px) and (orientation: landscape) {
  .screen { padding: 56px 4vw; gap: 16px; }
  .ruleta-layout, .pregunta-layout { flex-direction: row; gap: 20px; }
  #wheel { width: min(46vh, 38vw); }
  .q-foto { width: min(38vh, 44vw); }
  .panel-head { gap: 10px; }
  .btn-girar { font-size: clamp(16px, 4vh, 26px); }
  .marcas { display: none; }
  .modal-card { padding: 16px 20px; gap: 12px; max-height: 92vh; }
  #m-titulo { font-size: clamp(26px, 9vh, 48px); }
}