* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #ffffff 0%, #eafff2 45%, #34c759 100%);
  padding: 24px;
}

.app {
  width: 100%;
  max-width: 560px;
}

/* Pantallas */

.screen {
  display: none;
}

.screen.active {
  display: flex;
}

.screen.leaving .card {
  animation: cardExit 0.22s ease forwards;
}

/* Tarjeta */

.card {
  width: 100%;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(52, 199, 89, 0.15);
  padding: 40px 32px;
  text-align: center;
  opacity: 0;
}

.screen.active .card {
  animation: cardEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.card__logo {
  width: 190px;
  height: 190px;
  object-fit: contain;
  margin: 0 auto 20px;
  display: block;
}

.card__title {
  font-size: 1.9rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.card__text {
  font-size: 1rem;
  color: #4a4a4a;
  line-height: 1.5;
  margin-bottom: 28px;
}

/* Pasos (bienvenida) */

.steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
  text-align: left;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f5fbf7;
  border: 1px solid #e0f3e6;
  border-radius: 16px;
  padding: 14px 16px;
}

.steps__icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.steps__label {
  font-size: 0.98rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* Antes de participar */

.step-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: left;
  margin-bottom: 12px;
}

.highlight-note {
  background: #eafff2;
  border: 1px solid #b7ebc6;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1b5e20;
  text-align: left;
  line-height: 1.4;
  margin-bottom: 28px;
}

.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
  text-align: left;
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f5fbf7;
  border: 1px solid #e0f3e6;
  border-radius: 16px;
  padding: 14px 16px;
}

.checklist__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.checklist__label {
  font-size: 0.98rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* Formulario (registro) */

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 4px;
  text-align: left;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
}

.field input {
  padding: 14px 16px;
  font-size: 1rem;
  font-family: inherit;
  color: #1a1a1a;
  border: 2px solid #e0f3e6;
  border-radius: 14px;
  background: #f5fbf7;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.field input:focus {
  border-color: #34c759;
  background: #ffffff;
}

.form-error {
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #c0392b;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.form-error.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 18px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.facebook-link {
  margin-bottom: 8px;
}

.facebook-hint {
  font-size: 0.85rem;
  color: #8a8a8a;
  text-align: left;
  line-height: 1.4;
  margin-bottom: 28px;
}

.btn--full {
  width: 100%;
}

.btn--primary {
  color: #ffffff;
  background: linear-gradient(135deg, #34c759 0%, #22a745 100%);
  box-shadow: 0 12px 28px rgba(34, 167, 69, 0.35);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(34, 167, 69, 0.45);
}

.btn--secondary {
  color: #4a4a4a;
  background: #f5f5f5;
  border: 2px solid #e2e2e2;
}

.btn--secondary:hover {
  transform: translateY(-2px);
  background: #ececec;
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.actions .btn {
  flex: 1 1 140px;
}

/* Animaciones */

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-16px);
  }
}

/* Ruleta */

.card--wheel {
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 40px;
}

/* Resultado */

.result-icon {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 16px;
}

.result-extra {
  margin-top: -16px;
  margin-bottom: 28px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #2e7d32;
}

/* Acceso discreto al panel administrativo */

.admin-trigger {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #2e7d32;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  opacity: 0.45;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}

.admin-trigger:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Confeti */

#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}

#wheel-canvas {
  display: block;
  margin: 8px auto 32px;
  /* app.js fija width/height en línea en píxeles (atributos width/height
     del <canvas>); !important es necesario aquí para poder seguir
     ajustando el tamaño visible por CSS sin tocar ese JavaScript. La
     resolución interna de dibujo del canvas no cambia, solo su tamaño en
     pantalla, así que nunca se deforma ni pierde nitidez. */
  width: min(100%, 480px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
}

/* ==========================================================================
   Responsive móvil (≤768px)
   Solo layout/tamaños: mismos colores, misma identidad visual, mismas
   animaciones y transiciones que en escritorio.
   ========================================================================== */
@media (max-width: 768px) {
  body {
    padding: 16px 14px;
  }

  .app {
    max-width: 100%;
  }

  /* Contenedor principal: menos padding para aprovechar la pantalla */
  .card {
    padding: 26px 18px;
    border-radius: 22px;
  }

  .card__logo {
    width: 130px;
    height: 130px;
    margin-bottom: 14px;
  }

  .card__title {
    font-size: 1.55rem;
    margin-bottom: 8px;
  }

  .card__text {
    font-size: 0.95rem;
    margin-bottom: 18px;
  }

  /* Espaciados generales más compactos */
  .steps {
    gap: 10px;
    margin-bottom: 20px;
  }

  /* Checklist de "Antes de participar": menos separación entre tarjetas
     y menos espacio antes de la caja verde informativa. */
  .checklist {
    gap: 8px;
    margin-bottom: 14px;
  }

  .form {
    gap: 12px;
  }

  /* Tarjetas de instrucciones: menos alto, misma tipografía */
  .steps__item,
  .checklist__item {
    padding: 10px 12px;
  }

  .step-label {
    margin-bottom: 8px;
  }

  /* Caja verde informativa: ~20% menos alta (padding), y menos margen
     antes/después para acercar el contenido de alrededor. */
  .highlight-note {
    padding: 11px 14px;
    margin-bottom: 12px;
  }

  /* Menos espacio entre el botón de Facebook y "Luego:" */
  .facebook-link {
    margin-bottom: 6px;
  }

  .facebook-hint {
    font-size: 0.82rem;
    margin-bottom: 12px;
  }

  /* Botones: mucho menos altos, mismo ancho, mismas esquinas y estilo */
  .btn {
    min-height: 56px;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 16px;
  }

  .actions {
    flex-direction: column;
    gap: 10px;
  }

  /* En escritorio ".actions .btn { flex: 1 1 140px }" usa 140px como base
     del eje principal (horizontal). Al apilar los botones en columna en
     móvil, el eje principal pasa a ser vertical y ese mismo valor se
     aplicaba a la ALTURA (botones de 140px de alto). Se restablece la
     base a "auto" para que min-height:56px sea quien mande. */
  .actions .btn {
    flex: 1 1 auto;
  }

  /* Menos espacio entre el texto final ("Una vez realizados estos
     pasos...") y los botones Volver/Continuar. Selector acotado a esta
     pantalla para no afectar el texto introductorio ni otras pantallas
     que también usan .card__text. */
  #screen-requirements .card__text:has(+ .actions) {
    margin-bottom: 10px;
  }

  .result-icon {
    font-size: 3.75rem;
    margin-bottom: 10px;
  }

  .result-extra {
    margin-top: -10px;
    margin-bottom: 18px;
  }

  /* Ruleta: se escala con el ancho de pantalla (nunca se deforma, siempre
     circular) en vez de un tamaño fijo, para verse proporcionada tanto en
     un teléfono pequeño como en uno grande. Sensiblemente más pequeña y
     con más espacio en blanco alrededor que antes. */
  .card--wheel {
    padding: 20px 14px 24px;
  }

  #wheel-canvas {
    width: min(81vw, 390px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 4px auto 18px;
  }
}