/* MOTOJEDA · Encuesta de cascos
   Todo el CSS va bajo .mj-encuesta para no afectar otras páginas.
   Colores del brandbook: #00B7FF / #0B0E12 / #2A2F36 / #F2F4F8. Itálica y franjas a 15°. */

.mj-encuesta {
  --mj-cyan: #00B7FF;
  --mj-cyan-ink: #0072A3;      /* cian oscurecido para texto y bordes sobre blanco (contraste AA) */
  --mj-black: #0B0E12;
  --mj-graphite: #2A2F36;
  --mj-light: #F2F4F8;
  --mj-text: #0B0E12;
  --mj-muted: #545C66;
  --mj-line: #C9D0D8;
  --mj-danger: #B42318;
  --mj-danger-bg: #FEF3F2;
  --mj-radius: 4px;           /* brandbook: 4 px en tarjetas, campos y botones */
  --mj-radius-sm: 2px;        /* brandbook: 2 px en etiquetas y elementos pequeños */

  margin: 0;
  background: #fff;
  color: var(--mj-text);
  font-family: "Saira", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mj-encuesta .mj-container { max-width: 760px; }

.mj-encuesta .mj-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  padding: .6rem 1rem; border-radius: var(--mj-radius-sm);
  background: var(--mj-cyan); color: var(--mj-black); font-weight: 700; text-decoration: none;
}
.mj-encuesta .mj-skip:focus { top: 1rem; }

/* ---------- A. Hero oscuro ---------- */
.mj-encuesta .mj-hero {
  position: relative; overflow: hidden;
  padding: clamp(28px, 6vw, 56px) 0 clamp(36px, 7vw, 64px);
  background:
    radial-gradient(ellipse 60% 50% at 88% 8%, rgba(0, 183, 255, .16), transparent 70%),
    linear-gradient(180deg, var(--mj-black) 0%, #10151B 100%);
  color: var(--mj-light);
}
/* corte diagonal a 15° hacia el área blanca */
.mj-encuesta .mj-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px;
  background: #fff; clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.mj-encuesta .mj-hero .mj-container { position: relative; z-index: 1; }

.mj-encuesta .mj-stripes {
  position: absolute; top: clamp(28px, 6vw, 56px); right: max(16px, calc((100% - 760px) / 2 + 12px));
  display: flex; gap: 6px; z-index: 1;
}
.mj-encuesta .mj-stripes span { width: 10px; height: 26px; background: var(--mj-cyan); transform: skewX(-15deg); }
.mj-encuesta .mj-stripes span:nth-child(2) { opacity: .6; }
.mj-encuesta .mj-stripes span:nth-child(3) { opacity: .3; }

.mj-encuesta .mj-eyebrow {
  margin: clamp(32px, 7vw, 52px) 0 .5rem;
  color: var(--mj-cyan); font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.mj-encuesta .mj-title {
  margin: clamp(32px, 7vw, 52px) 0 1rem;
  font-size: clamp(2.9rem, 11vw, 5.5rem); font-weight: 800; font-style: italic; font-stretch: 125%;
  line-height: .9; letter-spacing: -.02em; text-transform: uppercase; color: #fff;
}
.mj-encuesta .mj-title span { display: block; color: var(--mj-cyan); }
.mj-encuesta .mj-intro { margin: 0 0 clamp(24px, 5vw, 36px); max-width: 34rem; font-size: 1.125rem; color: #C9D2DC; }

.mj-encuesta .mj-prize {
  position: relative;
  padding: clamp(18px, 4vw, 28px);
  border: 1px solid rgba(0, 183, 255, .35); border-radius: var(--mj-radius);
  background: linear-gradient(115deg, rgba(0, 183, 255, .12), rgba(42, 47, 54, .55) 60%);
}
.mj-encuesta .mj-prize-head { display: flex; align-items: center; gap: 16px; margin-bottom: 1.1rem; }
.mj-encuesta .mj-prize-icon {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px;
  background: var(--mj-cyan); color: var(--mj-black); font-size: 1.5rem;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);   /* paralelogramo a ~15° */
}
.mj-encuesta .mj-prize-title {
  margin: 0; font-size: clamp(1.2rem, 4.6vw, 1.7rem); font-weight: 800; font-style: italic;
  line-height: 1.1; text-transform: uppercase; color: #fff;
}
.mj-encuesta .mj-prize-kicker { display: block; margin-bottom: .2rem; font-size: .8rem; letter-spacing: .2em; color: var(--mj-cyan); }

.mj-encuesta .mj-steps { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 10px; }
.mj-encuesta .mj-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--mj-radius); background: rgba(11, 14, 18, .55); color: #E4E9EF;
}
.mj-encuesta .mj-step-num { font-weight: 800; font-style: italic; color: var(--mj-cyan); min-width: 1.6rem; }
.mj-encuesta .mj-steps i { width: 1.25rem; text-align: center; color: var(--mj-cyan); font-size: 1.1rem; }
.mj-encuesta .mj-steps a { color: #fff; text-decoration: underline; text-decoration-color: rgba(0, 183, 255, .6); text-underline-offset: 3px; }
.mj-encuesta .mj-steps a:hover { color: var(--mj-cyan); }

.mj-encuesta .mj-condition {
  margin: 0; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .03em; color: #fff;
}
.mj-encuesta .mj-condition i { color: var(--mj-cyan); margin-right: .35rem; }
.mj-encuesta .mj-promo-foot { margin: 1rem 0 0; font-size: .875rem; color: #AAB4BF; }

.mj-encuesta .mj-hero a:focus-visible { outline: 3px solid var(--mj-cyan); outline-offset: 3px; }

/* ---------- B. Área principal blanca ---------- */
.mj-encuesta .mj-main { padding: clamp(28px, 6vw, 48px) 0 clamp(40px, 8vw, 72px); background: #fff; }
.mj-encuesta .mj-main:focus { outline: none; }

.mj-encuesta .mj-card {
  padding: clamp(20px, 5vw, 36px);
  border: 1px solid #E1E6EC; border-radius: var(--mj-radius); background: #fff;
  box-shadow: 0 14px 40px rgba(11, 14, 18, .07);
}
.mj-encuesta .mj-card-title {
  margin: 0 0 .35rem; font-size: clamp(1.4rem, 4.5vw, 1.75rem); font-weight: 800; font-style: italic; color: var(--mj-black);
}
.mj-encuesta .mj-card-sub { margin: 0 0 1.75rem; color: var(--mj-muted); }

.mj-encuesta .mj-fields { margin: 0; padding: 0; border: 0; min-width: 0; }
.mj-encuesta .mj-field { margin: 0 0 1.6rem; padding: 0; border: 0; min-width: 0; }
.mj-encuesta .form-label { display: block; margin-bottom: .5rem; padding: 0; font-size: 1rem; font-weight: 600; color: var(--mj-black); }
.mj-encuesta .mj-optional {
  margin-left: .4rem; padding: .1rem .5rem; border-radius: var(--mj-radius-sm);
  background: var(--mj-light); font-size: .75rem; font-weight: 500; color: var(--mj-muted); vertical-align: 1px;
}
.mj-encuesta .mj-required { color: var(--mj-cyan-ink); font-weight: 700; }
.mj-encuesta .mj-hint { margin: .45rem 0 0; font-size: .875rem; color: var(--mj-muted); }

/* Campos (sobre Bootstrap) */
.mj-encuesta .form-control,
.mj-encuesta .form-select {
  min-height: 52px; padding: .75rem .9rem;
  border: 1px solid var(--mj-line); border-radius: var(--mj-radius);
  background-color: #fff; color: var(--mj-text); font-family: inherit;
  font-size: 1rem;   /* 16 px: evita el zoom automático en iOS */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mj-encuesta .form-select { padding-right: 2.5rem; }
.mj-encuesta .form-control::placeholder { color: #737B85; }
.mj-encuesta #helmet_brand,
.mj-encuesta #action_camera_other { text-transform: uppercase; }
.mj-encuesta #helmet_brand::placeholder,
.mj-encuesta #action_camera_other::placeholder { text-transform: none; }
.mj-encuesta .form-control:hover,
.mj-encuesta .form-select:hover { border-color: #8E98A3; }
.mj-encuesta .form-control:focus,
.mj-encuesta .form-select:focus {
  border-color: var(--mj-cyan-ink); box-shadow: 0 0 0 4px rgba(0, 183, 255, .25); outline: none;
}
.mj-encuesta .form-control:disabled,
.mj-encuesta .form-select:disabled { background-color: var(--mj-light); color: #8A929B; cursor: not-allowed; }

/* Error */
.mj-encuesta .form-control.is-invalid,
.mj-encuesta .form-control.is-invalid:focus {
  border-color: var(--mj-danger); background-image: none; padding-right: .9rem;
}
.mj-encuesta .form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .18); }
.mj-encuesta .invalid-feedback { margin: .45rem 0 0; font-size: .875rem; font-weight: 500; color: var(--mj-danger); }
.mj-encuesta .is-invalid ~ .mj-hint { display: none; }
.mj-encuesta .mj-radio-group.is-invalid > .invalid-feedback { display: block; }

/* Opciones de cámara: radios nativos (teclado con flechas) con aspecto de botón */
.mj-encuesta .mj-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mj-encuesta .mj-option {
  position: relative; display: flex; align-items: center; gap: .7rem;
  min-height: 52px; margin: 0; padding: .7rem .9rem;
  border: 1px solid var(--mj-line); border-radius: var(--mj-radius);
  background: #fff; color: var(--mj-text); font-weight: 500; line-height: 1.2; cursor: pointer; user-select: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.mj-encuesta .mj-option::before {
  content: ""; flex: none; width: 20px; height: 20px; border: 2px solid #7A848F; border-radius: 50%; background: #fff;
  transition: border .15s ease;
}
.mj-encuesta .mj-option:hover { border-color: #8E98A3; background: #F8FAFC; }
.mj-encuesta .btn-check:checked + .mj-option {
  border-color: var(--mj-cyan-ink); background: #E8F7FF; color: var(--mj-black); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--mj-cyan-ink);
}
.mj-encuesta .btn-check:checked + .mj-option::before { border: 6px solid var(--mj-cyan-ink); }
.mj-encuesta .btn-check:focus-visible + .mj-option { outline: 3px solid var(--mj-cyan-ink); outline-offset: 2px; }
.mj-encuesta .btn-check:disabled + .mj-option { opacity: .55; cursor: not-allowed; pointer-events: none; }
.mj-encuesta .mj-radio-group.is-invalid .mj-option { border-color: var(--mj-danger); }
.mj-encuesta .mj-options .mj-option:last-of-type { grid-column: 1 / -1; }

.mj-encuesta .mj-conditional {
  margin-top: 1rem; padding: 1rem; border-left: 3px solid var(--mj-cyan); border-radius: 0 var(--mj-radius) var(--mj-radius) 0; background: var(--mj-light);
}
.mj-encuesta .mj-conditional .invalid-feedback { margin-bottom: 0; }

/* Aviso general de error */
.mj-encuesta .mj-alert {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: 0 0 1.25rem; padding: .85rem 1rem;
  border: 1px solid #F3C1BC; border-radius: var(--mj-radius); background: var(--mj-danger-bg); color: var(--mj-danger); font-weight: 500;
}
.mj-encuesta .mj-alert[hidden] { display: none; }
.mj-encuesta .mj-alert i { margin-top: .2rem; }

/* Botón principal */
.mj-encuesta .mj-submit {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 58px; padding: .8rem 1.25rem;
  border: 0; border-radius: var(--mj-radius);
  background: var(--mj-cyan); color: var(--mj-black);
  font-family: inherit; font-size: 1.1rem; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: background-color .15s ease, transform .15s ease;
}
.mj-encuesta .mj-submit:hover { background: #33C5FF; }
.mj-encuesta .mj-submit:active { transform: translateY(1px); }
.mj-encuesta .mj-submit:focus-visible { outline: 3px solid var(--mj-black); outline-offset: 3px; }
.mj-encuesta .mj-submit:hover .mj-submit-icon { transform: translateX(3px); }
.mj-encuesta .mj-submit-icon { transition: transform .15s ease; }
.mj-encuesta .mj-submit-busy { display: none; }
.mj-encuesta .mj-submit:disabled { background: #9ADFFF; color: rgba(11, 14, 18, .7); cursor: progress; }
.mj-encuesta .mj-submit:disabled .mj-submit-icon { display: none; }
.mj-encuesta .mj-submit:disabled .mj-submit-busy { display: inline; }

.mj-encuesta .mj-privacy { margin: .9rem 0 0; text-align: center; font-size: .875rem; color: var(--mj-muted); }

/* Éxito */
.mj-encuesta .mj-success { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem .5rem; text-align: center; }
.mj-encuesta .mj-success[hidden] { display: none; }
.mj-encuesta .mj-success:focus { outline: none; }
.mj-encuesta .mj-success-icon {
  display: grid; place-items: center; width: 64px; height: 64px;
  background: var(--mj-cyan); color: var(--mj-black); font-size: 1.75rem;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
.mj-encuesta .mj-success-text { margin: 0; max-width: 30rem; font-size: 1.125rem; color: var(--mj-text); }
.mj-encuesta .mj-success-text strong { display: block; margin-bottom: .35rem; font-size: 1.5rem; font-weight: 800; font-style: italic; }

/* ---------- C. Pie ---------- */
/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .mj-encuesta .mj-prize-head { gap: 12px; }
  .mj-encuesta .mj-prize-icon { width: 46px; height: 46px; font-size: 1.25rem; }
  .mj-encuesta .mj-prize-title { font-size: 1.05rem; }
  .mj-encuesta .mj-prize-kicker { font-size: .68rem; letter-spacing: .12em; }
  .mj-encuesta .mj-condition { font-size: .8rem; }
}
@media (min-width: 576px) {
  .mj-encuesta .mj-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mj-encuesta .mj-options .mj-option:last-of-type { grid-column: auto; }
}
@media (min-width: 768px) {
  .mj-encuesta .mj-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mj-encuesta .mj-steps li { align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; }
}
@media (max-width: 359.98px) {
  .mj-encuesta .mj-options { grid-template-columns: 1fr; }
  .mj-encuesta .mj-options .mj-option:last-of-type { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mj-encuesta *, .mj-encuesta *::before { transition: none !important; animation: none !important; }
}