/* sorteo-x.css — SELECTOR DE X del sorteo (sección #sorteo de la landing V2, 04/10/2026).
   Eliges club → se prepara el post → «Publicar en X» (x.com/intent/tweet en otra pestaña) o «Copiar texto».
   Marcado: fuente/parches-v2/sorteo-plantilla.json (parche sorteo-selector-x). Valores: sorteo-logica.json (sx).
   Mismos colores, tipos y botones que ya usa la página: el botón turquesa principal, el borde lila del sorteo y las
   fichas de club que tenía el formulario. Todo acotado a #sorteo .sx…; los :hover, solo con ratón (en el móvil se
   quedan pegados tras tocar); la pulsación se nota en :active. */

#sorteo .sx {
  max-width: 1440px;
  margin: clamp(48px, 5vw, 72px) auto 0;
}

/* Controles: sin destello al tocar, sin espera de doble toque y sin seleccionar su texto al mantener pulsado */
#sorteo .sx-abrir,
#sorteo .sx-btn,
#sorteo .sx-club {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* «Elige tu campeón»: cerrado es el botón principal de la página (el mismo que había aquí); abierto pasa a secundario
   (borde lila, como el antiguo «Citar el post en X») para que el principal sea «Publicar en X» */
#sorteo .sx-abrir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 60px;
  padding: 0 32px;
  border: 1.5px solid #30C8C0;
  border-radius: 999px;
  background: #30C8C0;
  color: #0F2330;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 10px 32px rgba(48, 200, 192, 0.4);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease,
    transform .16s cubic-bezier(.23, 1, .32, 1);
}
#sorteo .sx-abrir__flecha {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .2s cubic-bezier(.23, 1, .32, 1);
}
#sorteo .sx-abrir--abierto {
  border-color: rgba(219, 187, 248, 0.6);
  background: transparent;
  color: #F5F8FA;
  box-shadow: none;
}
#sorteo .sx-abrir--abierto .sx-abrir__flecha {
  transform: translateY(3px) rotate(-135deg);
}

/* Panel: los clubes y, al elegir uno, el post */
#sorteo .sx-panel {
  max-width: 760px;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: sx-entra .24s cubic-bezier(.23, 1, .32, 1);
}
@keyframes sx-entra {
  from { opacity: 0; transform: translateY(-8px); }
}

#sorteo .sx-clubes {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
#sorteo .sx-clubes__titulo {
  float: left;            /* así la leyenda se porta como un bloque normal, sin hueco en el borde del fieldset */
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.15;
  color: #F0E6D2;
  text-wrap: balance;
}
#sorteo .sx-clubes__rejilla {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 8px;
}

/* Cada club es un radio de verdad (flechas del teclado, lector de pantalla) con la ficha del formulario encima */
#sorteo .sx-club {
  position: relative;
  display: flex;
  cursor: pointer;
}
#sorteo .sx-club__radio {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
#sorteo .sx-club__ficha {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 12px;
  border: 1.5px solid rgba(240, 230, 210, 0.25);
  border-radius: 12px;
  background: #101D33;
  color: #F5F8FA;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  transition: transform .16s cubic-bezier(.23, 1, .32, 1);   /* el cambio de club es al instante (también con las flechas) */
}
#sorteo .sx-club__ficha img {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
#sorteo .sx-club__radio:checked + .sx-club__ficha {
  border-color: #30C8C0;
  background: rgba(48, 200, 192, 0.16);
}
#sorteo .sx-club__radio:focus-visible + .sx-club__ficha {
  outline: 2px solid #FFE29A;
  outline-offset: 2px;
}
#sorteo .sx-club:active .sx-club__ficha {
  transform: scale(0.97);
}
#sorteo .sx-club--hueco {
  cursor: default;
}
#sorteo .sx-club--hueco .sx-club__ficha {
  justify-content: center;
  border-style: dashed;
  background: transparent;
  color: #8FA3B0;
}
#sorteo .sx-club--hueco:active .sx-club__ficha {
  transform: none;
}

/* El post: así quedará en X (las @ y el # en turquesa, como los pinta X), con el hueco de los dos amigos */
#sorteo .sx-post {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: sx-entra .24s cubic-bezier(.23, 1, .32, 1);
}
#sorteo .sx-post__titulo {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: #C9D4DC;
}
#sorteo .sx-post__caja {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(219, 187, 248, 0.35);
  border-radius: 16px;
  background: #07101C;
}
#sorteo .sx-post__texto {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: #F5F8FA;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}
#sorteo .sx-post__tok {
  color: #5FE3DA;
}
#sorteo .sx-post__extra {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #B8C7D1;
}
#sorteo .sx-post__amigos {
  margin: 0;
  padding: 5px 14px;
  border: 1.5px dashed rgba(219, 187, 248, 0.6);
  border-radius: 999px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: #DBBBF8;
}
#sorteo .sx-aviso {
  margin: 4px 0 0;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: #FFE29A;
}

/* Botones: «Publicar en X», el turquesa de la página (como «Hablar con MIA por WhatsApp» del éxito); «Copiar texto», el
   de borde lila */
#sorteo .sx-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
#sorteo .sx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: Poppins, sans-serif;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}
#sorteo .sx-btn--x {
  border: 1.5px solid #30C8C0;
  background: #30C8C0;
  color: #0F2330;
  font-weight: 700;
}
#sorteo .sx-btn--copiar {
  min-width: 168px;
  border: 1.5px solid rgba(219, 187, 248, 0.6);
  background: transparent;
  color: #F5F8FA;
  font-weight: 600;
}
#sorteo .sx-btn--hecho {
  border-color: #30C8C0;
  color: #5FE3DA;
}
/* Logo de X (el oficial, en el color del texto del botón) */
#sorteo .sx-logo-x {
  flex: none;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201200%201227%27%3E%3Cpath%20fill=%27%230F2330%27%20d=%27M714.163%20519.284L1160.89%200H1055.03L667.137%20450.887L357.328%200H0L468.492%20681.821L0%201226.37H105.866L515.491%20750.218L842.672%201226.37H1200L714.137%20519.284H714.163ZM569.165%20687.828L521.697%20619.934L144.011%2079.6944H306.615L611.412%20515.685L658.88%20583.579L1055.08%201150.3H892.476L569.165%20687.854V687.828Z%27/%3E%3C/svg%3E") center / contain no-repeat;
}
#sorteo .sx-ayuda {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #B8C7D1;
}
#sorteo .sx-estado {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: #5FE3DA;
}
#sorteo .sx-estado--error {
  color: #FF9B8A;
}
#sorteo .sx-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Tras el cierre (28/10 23:59) */
#sorteo .sx-cerrado {
  margin: 0;
  max-width: 640px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
  color: #C9D4DC;
}
#sorteo .sx-cerrado a {
  color: #F5F8FA;
  font-weight: 600;
}

/* Pulsar y foco */
#sorteo .sx-abrir:active,
#sorteo .sx-btn:active {
  transform: scale(0.97);
}
#sorteo .sx-abrir:focus-visible,
#sorteo .sx-btn:focus-visible,
#sorteo .sx-cerrado a:focus-visible {
  outline: 2px solid #FFE29A;
  outline-offset: 3px;
}

/* Ratón: hover solo donde lo hay de verdad */
@media (hover: hover) and (pointer: fine) {
  #sorteo .sx-abrir:hover {
    border-color: #4FD8D0;
    background: #4FD8D0;
  }
  #sorteo .sx-abrir--abierto:hover {
    border-color: #DBBBF8;
    background: rgba(219, 187, 248, 0.08);
  }
  #sorteo .sx-club:hover .sx-club__radio:not(:checked) + .sx-club__ficha {
    border-color: rgba(240, 230, 210, 0.5);
  }
  #sorteo .sx-btn--x:hover {
    border-color: #4FD8D0;
    background: #4FD8D0;
  }
  #sorteo .sx-btn--copiar:hover {
    border-color: #DBBBF8;
    background: rgba(219, 187, 248, 0.08);
  }
}

/* Móvil: botones a todo el ancho */
@media (max-width: 559px) {
  #sorteo .sx-abrir {
    width: 100%;
  }
  #sorteo .sx-btn {
    flex: 1 1 100%;
  }
  #sorteo .sx-post__caja {
    padding: 16px;
  }
}

/* Movimiento reducido: nada se desplaza; el panel y el post solo aparecen */
@media (prefers-reduced-motion: reduce) {
  #sorteo .sx-panel,
  #sorteo .sx-post {
    animation-name: sx-aparece;
  }
  #sorteo .sx-abrir:active,
  #sorteo .sx-btn:active,
  #sorteo .sx-club:active .sx-club__ficha {
    transform: none;
  }
  #sorteo .sx-abrir__flecha {
    transition: none;
  }
}
@keyframes sx-aparece {
  from { opacity: 0; }
}