/* motor-components.css — BOLETIX Motor Público
   Componentes UI del motor: header, botones, cards de rifa,
   countdown, paquetes rápidos, carrito sticky, modal del comprador,
   galería de ganadores, badges, formularios, toasts, footer.
   Depende únicamente de variables definidas en motor-base.css.
   Sin colores hex directos.
   ─────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════
   HEADER DEL MOTOR
   ═══════════════════════════════════════════ */
.motor-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--header-height);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-sticky);
  display: flex;
  align-items: flex-start;
}

.motor-header .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  /* El logo desbordado (DEC-0017) hace que esta fila sea más alta que
     --header-height. Sin esto, la franja transparente sobrante bloquea
     clics a TODO lo que quede debajo, en cualquier posición de scroll,
     porque sigue siendo un elemento real con z-index alto aunque no se
     vea. Reactivamos el clic solo en los hijos que sí deben responder. */
  pointer-events: none;
}

.motor-header__brand,
.motor-header__nav {
  pointer-events: auto;
}

.motor-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.motor-header__logo {
  height: clamp(84px, 9vw, 128px);
  width: auto;
  object-fit: contain;
}

.motor-header__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  white-space: nowrap;
}

.motor-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  align-self: center; /* se recentra dentro de la franja visible del header,
                          aunque el logo (más alto) empuje la fila completa
                          a ser más alta que --header-height */
  /* En móviles angostos los links no caben en una sola fila sin envolver
     (y el header no tiene alto extra para una segunda fila). En vez de
     desbordar invisible y sin forma de alcanzarlos, se vuelve scrolleable
     horizontalmente. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.motor-header__nav::-webkit-scrollbar {
  display: none;
}

.motor-header__nav a {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.motor-header__nav a:hover {
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast),
    transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variantes */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--secondary:hover {
  background: var(--color-surface-2);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.btn--danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border-color: var(--color-danger);
}
.btn--danger:hover {
  opacity: 0.85;
}

/* Tamaños */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
}

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

/* Botón con spinner de carga */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.8;
}

/* ═══════════════════════════════════════════
   BADGE
   ═══════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge--primary  { background: var(--color-primary);    color: var(--color-text-inverse); }
.badge--success  { background: var(--color-success-bg); color: var(--color-success); }
.badge--warning  { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--danger   { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge--info     { background: var(--color-info-bg);    color: var(--color-info); }
.badge--neutral  { background: var(--color-surface-2);  color: var(--color-text-muted); }

/* ═══════════════════════════════════════════
   CARDS GENÉRICAS
   ═══════════════════════════════════════════ */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.card--hover {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  cursor: pointer;
}
.card--hover:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card--surface {
  background: var(--color-surface);
  border-color: transparent;
  box-shadow: none;
}

/* ═══════════════════════════════════════════
   CARDS DE RIFA (home.html)
   Grid fluido de sorteos disponibles
   ═══════════════════════════════════════════ */
.raffles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-6);
}

.raffle-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}

.raffle-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.raffle-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-2);
  overflow: hidden;
}

.raffle-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.raffle-card:hover .raffle-card__img {
  transform: scale(1.04);
}

.raffle-card__status {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

.raffle-card__body {
  padding: var(--space-4);
}

.raffle-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-3);
  /* Clamp a 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.raffle-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.raffle-card__price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
}

.raffle-card__price-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Barra de progreso de boletos */
.raffle-card__progress {
  margin-bottom: var(--space-3);
}

.raffle-card__progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.raffle-card__bar {
  height: 6px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.raffle-card__bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
  min-width: 2px;
}

/* Fecha del sorteo */
.raffle-card__draw-date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

/* Skeleton de card */
.raffle-card--skeleton .raffle-card__media {
  background: var(--color-surface-2);
  animation: skeleton-pulse 1.5s ease infinite;
}

/* ═══════════════════════════════════════════
   HERO DE LA PÁGINA HOME
   ═══════════════════════════════════════════ */
.home-hero {
  padding-block: var(--space-12) var(--space-8);
  text-align: center;
}

.home-hero__title {
  font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-3);
}

.home-hero__subtitle {
  font-size: clamp(var(--font-size-base), 2.5vw, var(--font-size-lg));
  color: var(--color-text-muted);
  max-width: 560px;
  margin-inline: auto;
  line-height: var(--line-height-relaxed);
}

/* ═══════════════════════════════════════════
   SECCIÓN GENÉRICA
   ═══════════════════════════════════════════ */
.section {
  padding-block: var(--space-12);
}

.section--sm  { padding-block: var(--space-8); }
.section--lg  { padding-block: var(--space-20); }

.section__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.section__title {
  font-size: clamp(var(--font-size-xl), 3.5vw, var(--font-size-3xl));
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.section__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 600px;
  margin-inline: auto;
  line-height: var(--line-height-relaxed);
}

/* ═══════════════════════════════════════════
   COUNTDOWN (página de sorteo y resultado)
   ═══════════════════════════════════════════ */
.countdown {
  display: flex;
  gap: clamp(var(--space-3), 3vw, var(--space-6));
  justify-content: center;
  flex-wrap: wrap;
}

.countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 3.5rem;
}

.countdown__block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  min-width: 4rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.countdown__value {
  display: block;
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-top: var(--space-1);
}

.countdown__sep {
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl));
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  align-self: center;
  padding-bottom: 1.25rem;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════
   PAQUETES RÁPIDOS (sorteo.html)
   ═══════════════════════════════════════════ */
.quick-packages {
  /* Antes usaba grid con columnas "1fr": con pocos paquetes (3-4) se
     estiraban para llenar todo el ancho en vez de verse como un grupo
     compacto centrado. Flexbox + justify-content:center + max-width por
     tarjeta: con pocos paquetes quedan centrados sin estirarse; con más
     (5+) se encogen (flex-shrink) para seguir cabiendo en una sola fila
     antes de saltar a una segunda. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.quick-package {
  flex: 1 1 130px;
  max-width: 160px;
  position: relative;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  text-align: center;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.quick-package:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
}

.quick-package:active {
  transform: scale(0.97);
}

.quick-package.is-selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
}

/* Badge sobre el paquete (ej: "MÁS VENDIDO") */
.quick-package__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.quick-package__qty {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
}

.quick-package__label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.quick-package__price {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-top: var(--space-2);
}

.quick-package__bonus {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning);
  margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════
   BONO DE OPORTUNIDADES
   ═══════════════════════════════════════════ */
.bonus-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-accent) 15%, var(--color-bg));
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
}

.bonus-banner__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.bonus-banner__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.bonus-banner__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.bonus-banner__list:empty {
  display: none;
}

.bonus-banner__list li {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.bonus-banner__text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: var(--line-height-base);
}

/* ═══════════════════════════════════════════
   DESCRIPCIÓN COMPLETA, MECÁNICA DEL SORTEO Y AVISOS
   Contenido real del sorteo (descriptionHtml, drawReference/
   drawMechanicText/drawConditionText, importantNotes) que existía en el
   dato pero nunca se renderizaba en ningún lado — ver raffleHero.js.
   ═══════════════════════════════════════════ */
.sorteo-info__full-description {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
}

.sorteo-mechanic-box {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.sorteo-mechanic-box__label {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.sorteo-mechanic-box p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.sorteo-mechanic-box p + p {
  margin-top: var(--space-2);
}

.sorteo-notes-box {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-border);
  padding-left: var(--space-3);
  margin-bottom: var(--space-4);
  white-space: pre-line;
}

.sorteo-packages-teaser {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════
   DESCUENTOS POR VOLUMEN
   ═══════════════════════════════════════════ */
.discounts-banner {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.discounts-banner__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}

.discount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

.discount-row:first-of-type {
  border-top: none;
}

.discount-row.is-active {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

.discount-row__price {
  font-weight: var(--font-weight-bold);
}

/* ═══════════════════════════════════════════
   ELEGIR BOLETOS AL AZAR
   ═══════════════════════════════════════════ */
.random-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.random-picker__select {
  flex: 1 1 140px;
  max-width: 200px;
}

.random-picker__custom {
  flex: 0 1 100px;
}

.random-picker__btn {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   CARRITO STICKY — MOBILE (barra inferior fija)
   ═══════════════════════════════════════════ */
.cart-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.07);
  transform: translateY(110%);
  transition: transform var(--transition-base);
}

.cart-bar.is-visible {
  transform: translateY(0);
}

.cart-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Único elemento que puede encoger — count+label+total+borrar+Apartar
   juntos superan el ancho disponible en pantallas angostas (~360px) y el
   botón "Apartar" terminaba recortado fuera del viewport. */
.cart-bar__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-shrink: 1;
}

.cart-bar__info .cart-bar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-bar__total,
.cart-bar__clear,
#btn-checkout-mobile {
  flex-shrink: 0;
}

/* El botón hereda el padding generoso de .btn (pensado para CTAs sueltos) —
   aquí compite por espacio con otros 3 elementos en una sola fila. */
#btn-checkout-mobile {
  padding-inline: var(--space-4);
}

/* Números elegidos — tira horizontal con scroll, sin barra visible en la
   mayoría de sistemas (mismo patrón que .grid-ending-filters). */
.cart-bar__numbers {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cart-bar__numbers::-webkit-scrollbar {
  display: none;
}

.cart-bar__numbers:empty {
  display: none;
}

.cart-bar__number-chip {
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.cart-bar__left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cart-bar__count {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  white-space: nowrap;
}

.cart-bar__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cart-bar__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.cart-bar__total {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
}

.cart-bar__total-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cart-bar__clear {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: var(--space-2);
  cursor: pointer;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   CARRITO PANEL — DESKTOP (panel lateral fijo)
   ═══════════════════════════════════════════ */
.sorteo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

/* Los items de grid tienen min-width:auto por defecto, así que se niegan a
   encoger por debajo del contenido interno (grid de boletos, carrito…),
   forzando scroll horizontal en TODA la página en móvil — incluso el header
   fijo, cuyo ancho sigue al scrollWidth del documento cuando hay overflow
   en cualquier otro punto de la página. */
.sorteo-main,
.sorteo-sidebar {
  min-width: 0;
}

@media (min-width: 900px) {
  .sorteo-layout {
    grid-template-columns: 1fr 340px;
  }

  /* Panel del carrito sticky en desktop */
  .sorteo-panel {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    max-height: calc(100dvh - var(--header-height) - var(--space-8));
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
  }

  /* Ocultar barra inferior en desktop */
  .cart-bar {
    display: none;
  }
}

.sorteo-panel__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

/* Resumen de selección de boletos */
.selection-summary {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.selection-summary__heading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.selection-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 2rem;
  margin-bottom: var(--space-3);
}

.ticket-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-2);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.ticket-chip--bonus {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px dashed var(--color-warning);
}

.ticket-chip__remove {
  display: flex;
  align-items: center;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  font-size: 0.9rem;
  line-height: 1;
}

.ticket-chip__remove:hover {
  opacity: 1;
}

/* Desglose de precio */
.price-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.price-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.price-row--bonus {
  color: var(--color-success);
}

.price-row--total {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.form-label--required::after {
  content: " *";
  color: var(--color-danger);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  color: var(--color-text);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-input--error,
.form-select--error,
.form-textarea--error {
  border-color: var(--color-danger);
}

.form-input--error:focus,
.form-select--error:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 15%, transparent);
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

.form-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

/* Select con flecha personalizada */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

/* ═══════════════════════════════════════════
   MODAL DEL COMPRADOR (sorteo.html)
   Bottom sheet en mobile, dialog centrado en desktop
   ═══════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--color-bg);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: var(--space-6);
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--transition-slow);
  /* Previene scroll del body al hacer scroll en el modal */
  overscroll-behavior: contain;
}

.modal-overlay.is-open .modal {
  transform: translateY(0);
}

/* Handle de arrastre (visual) */
.modal__handle {
  width: 40px;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-5);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.modal__close:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

/* Sección de resumen dentro del modal */
.modal__order-summary {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.modal__order-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.modal__order-tickets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.modal__order-total {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-top: var(--space-3);
}

/* Modal cuerpo - formulario de comprador */
.modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Modal en desktop: centrado */
@media (min-width: 600px) {
  .modal-overlay {
    align-items: center;
    padding: var(--space-4);
  }

  .modal {
    border-radius: var(--radius-2xl);
    transform: translateY(12px) scale(0.97);
    max-height: 88dvh;
    padding-bottom: var(--space-6);
  }

  .modal-overlay.is-open .modal {
    transform: translateY(0) scale(1);
  }

  .modal__handle {
    display: none;
  }
}

/* ═══════════════════════════════════════════
   TOAST / NOTIFICACIONES
   ═══════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  pointer-events: none;
  width: max-content;
  max-width: min(90vw, 420px);
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  white-space: nowrap;
  animation: toast-in 0.25s ease forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.toast--success { background: var(--color-success); color: var(--color-text-inverse); }
.toast--error   { background: var(--color-danger);  color: var(--color-text-inverse); }
.toast--warning { background: var(--color-warning); color: var(--color-text-inverse); }
.toast--info    { background: var(--color-text);    color: var(--color-bg); }

/* ═══════════════════════════════════════════
   GALERÍA DE GANADORES (home.html)
   ═══════════════════════════════════════════ */
.winners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: var(--space-4);
}

.winner-card {
  text-align: center;
}

.winner-card__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
  margin-bottom: var(--space-3);
  border: 2px solid var(--color-border);
}

.winner-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.winner-card__name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
  /* Clamp a 1 línea */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winner-card__prize {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  /* Clamp a 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.winner-card__ticket {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-1);
}

.winner-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-4);
  color: var(--color-text-muted);
}

.empty-state__icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-4);
}

.empty-state__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.empty-state__text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  max-width: 360px;
  margin-inline: auto;
}

/* ═══════════════════════════════════════════
   FOOTER DEL MOTOR
   ═══════════════════════════════════════════ */
.motor-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
  margin-top: auto;
  /* Espacio para la cart-bar en mobile */
  padding-bottom: calc(var(--space-8) + 72px);
}

@media (min-width: 900px) {
  .motor-footer {
    padding-bottom: var(--space-8);
  }
}

.motor-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: center;
  margin-bottom: var(--space-4);
}

.motor-footer__nav a {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.motor-footer__nav a:hover {
  color: var(--color-primary);
}

.motor-footer__copy {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════
   AVISOS / ALERT BANNER
   ═══════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.alert--info    { background: var(--color-info-bg);    color: var(--color-info); }
.alert--success { background: var(--color-success-bg); color: var(--color-success); }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.alert--danger  { background: var(--color-danger-bg);  color: var(--color-danger); }

.alert__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.alert__body { flex: 1; }
.alert__title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

/* ═══════════════════════════════════════════
   RESPONSIVO — UTILIDADES
   ═══════════════════════════════════════════ */
/* Visible solo en mobile */
.show-mobile { display: block; }
.hide-mobile { display: none; }

@media (min-width: 640px) {
  .show-mobile { display: none; }
  .hide-mobile { display: block; }
}

/* ═══════════════════════════════════════════
   ALIAS DE COMPATIBILIDAD — home.html (motor público)
   home.html usa el prefijo .motor-* en sus clases de layout,
   mientras que las clases base arriba (.container, .raffle-card,
   .winners-grid, etc.) no llevan ese prefijo. Esta sección mapea
   las clases reales usadas en home.html a las variables y patrones
   ya definidos arriba, sin duplicar lógica de estilo.
   ═══════════════════════════════════════════ */

/* ── Offset del header fijo para home.html (sin clase .motor-page) ── */
#mainContent {
  padding-top: var(--header-height);
}

/* ── Contenedor genérico ── */
.motor-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Header ── */
.motor-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  /* Mismo fix que .motor-header .container: el logo desbordado (DEC-0017)
     hace esta fila más alta que --header-height, y sin pointer-events:none
     la franja transparente sobrante bloquea clics a todo lo que esté debajo. */
  pointer-events: none;
}

.motor-logo,
.motor-nav-actions {
  pointer-events: auto;
}

.motor-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.motor-logo-img {
  height: clamp(84px, 9vw, 128px);
  width: auto;
  object-fit: contain;
}

.motor-logo-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  white-space: nowrap;
}

.motor-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  align-self: center; /* recentra el menú dentro de la franja visible del
                          header, aunque el logo (más alto) empuje la fila
                          completa a ser más alta que --header-height */
  /* Mismo fix que .motor-header__nav: en móviles angostos los links no
     caben en una fila; se vuelve scrolleable en vez de desbordar invisible. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.motor-nav-actions::-webkit-scrollbar {
  display: none;
}

.motor-nav-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
  white-space: nowrap;
  /* El texto solo mide ~21px de alto — sin padding, el área táctil real
     queda muy por debajo del mínimo recomendado de 44px en móvil. */
  padding-block: var(--space-3);
  display: inline-block;
}

.motor-nav-link:hover {
  color: var(--color-primary);
}

/* ── Secciones genéricas del home ── */
.motor-section {
  padding-block: var(--space-12);
}

.motor-hero-section {
  padding-block: var(--space-8) var(--space-12);
}

.motor-section-title {
  font-size: clamp(var(--font-size-xl), 3.5vw, var(--font-size-3xl));
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
  text-align: center;
}

/* ── Grid de sorteos (alias de .raffles-grid) ── */
.motor-raffles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-6);
}

/* ── Card de sorteo (alias de .raffle-card y sub-elementos) ── */
.motor-raffle-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.motor-raffle-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.motor-raffle-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.motor-raffle-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-2);
  overflow: hidden;
}

.motor-raffle-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.motor-raffle-card:hover .motor-raffle-card__img {
  transform: scale(1.04);
}

.motor-raffle-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--color-surface-2);
}

.motor-raffle-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
}

.motor-raffle-card__avail-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.motor-raffle-card__avail-badge--critical {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.motor-raffle-card__avail-badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.motor-raffle-card__body {
  padding: var(--space-4);
}

.motor-raffle-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.motor-raffle-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.motor-raffle-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.motor-raffle-card__price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.motor-raffle-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.motor-raffle-card__availability {
  margin-bottom: var(--space-4);
}

.motor-progress {
  height: 6px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-1);
}

.motor-progress__bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
  min-width: 2px;
}

.motor-raffle-card__avail-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.motor-raffle-card__cta {
  width: 100%;
}

/* ── Botón genérico del motor (alias de .btn) ── */
.motor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform 120ms var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}

.motor-btn:active {
  transform: scale(0.97);
}

.motor-btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.motor-btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.motor-btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.motor-btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ── Skeleton del grid de sorteos ── */
.motor-skeleton-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-6);
}

.motor-skeleton {
  background-color: var(--color-surface-2);
  border-radius: var(--radius-xl);
  animation: skeleton-pulse 1.5s ease infinite;
}

.motor-skeleton--card {
  height: 320px;
}

/* ── Estados vacío / error ── */
.motor-empty-state,
.motor-error-state {
  text-align: center;
  padding: var(--space-16) var(--space-4);
  color: var(--color-text-muted);
}

.motor-empty-icon,
.motor-error-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-4);
}

.motor-empty-title,
.motor-error-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.motor-empty-text,
.motor-error-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  max-width: 360px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

/* ── Galería de ganadores (alias de .winners-grid / .winner-card) ── */
.motor-winners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: var(--space-4);
}

.motor-winner-card {
  text-align: center;
}

.motor-winner-card__media {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
  margin-bottom: var(--space-3);
  border: 2px solid var(--color-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.motor-winner-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.motor-winner-card__img-placeholder {
  font-size: 2.5rem;
}

.motor-winner-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.motor-winner-card__badge {
  align-self: flex-start;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-1);
}

.motor-winner-card__badge--main {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.motor-winner-card__prize {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.motor-winner-card__name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.motor-winner-card__location {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.motor-winner-card__ticket {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.motor-winner-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ── Footer (alias de elementos .motor-footer-*) ── */
.motor-footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.motor-footer-logo {
  height: clamp(80px, 8vw, 108px);
  width: auto;
  object-fit: contain;
}

.motor-footer-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.motor-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: center;
  margin-bottom: var(--space-4);
}

.motor-footer-links a {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.motor-footer-links a:hover {
  color: var(--color-primary);
}

.motor-footer-social {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.motor-social-link {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px var(--space-3);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.motor-social-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.motor-footer-contact {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.motor-footer-wa {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.motor-footer-copy {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.motor-footer-powered {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.motor-footer-powered a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.motor-footer-powered a:hover {
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════
   HOME UI — HERO, STEPS, VERIFY CTA
   Secciones nuevas del motor público.
   Todo 100% dinámico desde branding.js
   (colores, tipografía) y home.js (datos).
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.motor-hero {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark, #5538D4) 100%
  );
  color: #fff;
  padding-block: var(--space-16) var(--space-12);
  text-align: center;
}

.motor-hero__tagline {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
  margin-bottom: var(--space-3);
}

.motor-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  margin-bottom: var(--space-4);
  color: #fff;
}

.motor-hero__sub {
  font-size: clamp(var(--font-size-base), 2.5vw, var(--font-size-lg));
  opacity: 0.85;
  max-width: 560px;
  margin-inline: auto;
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
}

.motor-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.motor-btn--ghost-white {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
}

.motor-btn--ghost-white:hover {
  background: rgba(255,255,255,0.25);
  border-color: #fff;
}

.motor-btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-xl);
}

/* ── Steps ── */
.motor-steps {
  background: var(--color-surface);
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.motor-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.motor-step {
  text-align: center;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.motor-step__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
  display: block;
}

/* Número editorial grande (01/02/03) — acento visual, no decoración de
   sobra: ayuda a escanear el orden de los pasos de un vistazo. */
.motor-step__number {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.25;
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}

/* Entrada en cascada al hacer scroll (perf.js → revealOnScroll), mismo
   patrón que "Quiénes somos": una sola vez, sin scale(0). */
.motor-steps__grid .reveal-on-scroll {
  transition-delay: calc(var(--step-i, 0) * 80ms);
}

.motor-step__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}

.motor-step__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* ── Card mejorada: precio destacado ── */
.motor-raffle-card__price-big {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.motor-raffle-card__price-amount {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
}

.motor-raffle-card__price-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Contador regresivo en card */
.motor-raffle-card__countdown {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.motor-card-countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  min-width: 3rem;
}

.motor-card-countdown-val {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.motor-card-countdown-label {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Verify CTA banner ── */
.motor-verify-cta {
  padding-block: var(--space-8);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.motor-verify-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.motor-verify-cta__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}

.motor-verify-cta__sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .motor-verify-cta__inner {
    flex-direction: column;
    text-align: center;
  }

  .motor-hero__actions .motor-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════
   HEADER — SOMBRA AL HACER SCROLL
   El fondo del header ya es sólido por defecto;
   añadimos sombra al hacer scroll para dar
   sensación de capa flotante (referencia: sitios
   de rifas líderes en México).
   ═══════════════════════════════════════════ */
.motor-header {
  transition: box-shadow var(--transition-base);
}

.motor-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

/* Logo redondo con borde de marca */
.motor-logo-img {
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  padding: 3px;
  background: var(--color-bg);
  object-fit: cover;
  aspect-ratio: 1;
  box-shadow: var(--shadow-md);
}

.motor-footer-logo {
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  padding: 3px;
  object-fit: cover;
  aspect-ratio: 1;
}

/* Logo legacy (sorteo.html, verificar.html, resultado.html, live.html) —
   mismo tratamiento que .motor-logo-img para consistencia visual entre
   todas las páginas públicas. */
.motor-header__logo {
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  padding: 3px;
  background: var(--color-bg);
  object-fit: cover;
  aspect-ratio: 1;
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════
   HERO — FONDO DINÁMICO (parallax ligero)
   Se activa cuando existe un sorteo con
   showInHero:true. Sin imagen, el hero conserva
   el degradado de marca definido arriba.
   ═══════════════════════════════════════════ */
.motor-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.motor-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.motor-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
}

.motor-hero--has-bg .motor-hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.motor-hero__inner {
  position: relative;
  z-index: 2;
}

.motor-hero__price {
  font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-2xl));
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  opacity: 0.95;
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .motor-hero--has-bg .motor-hero__bg {
    background-attachment: fixed;
  }
}

/* ── Entrada del hero — en cascada, solo cuando el contenido real ya
   está listo (home.js agrega .is-visible a #heroSection). Nunca se
   anima el placeholder "Cargando…". Cada elemento parte de opacity:0 +
   translateY, nunca de scale(0). ── */
.motor-hero__tagline,
.motor-hero__title,
.motor-hero__price,
.motor-hero__sub,
.motor-hero__actions {
  opacity: 0;
  transform: translateY(14px);
}

.motor-hero.is-visible .motor-hero__tagline,
.motor-hero.is-visible .motor-hero__title,
.motor-hero.is-visible .motor-hero__price,
.motor-hero.is-visible .motor-hero__sub,
.motor-hero.is-visible .motor-hero__actions {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.motor-hero.is-visible .motor-hero__tagline  { transition-delay: 0ms; }
.motor-hero.is-visible .motor-hero__title    { transition-delay: 60ms; }
.motor-hero.is-visible .motor-hero__price    { transition-delay: 120ms; }
.motor-hero.is-visible .motor-hero__sub      { transition-delay: 160ms; }
.motor-hero.is-visible .motor-hero__actions  { transition-delay: 200ms; }

/* Imagen de fondo: leve escala hacia adentro al revelarse (no es un pop,
   es un asentamiento — refuerza la sensación de "llegada" de la foto). */
.motor-hero__bg {
  transform: scale(1.04);
  transition: transform 900ms var(--ease-out);
}

.motor-hero.is-visible .motor-hero__bg {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .motor-hero__tagline,
  .motor-hero__title,
  .motor-hero__price,
  .motor-hero__sub,
  .motor-hero__actions,
  .motor-hero__bg {
    transform: none;
    transition-property: opacity;
  }
}

/* ═══════════════════════════════════════════
   FAQ — ACORDEÓN
   ═══════════════════════════════════════════ */
.motor-faq__list {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.motor-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
}

.motor-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  text-align: left;
  color: var(--color-text);
}

.motor-faq__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  transition: transform var(--transition-base);
  line-height: 1;
}

.motor-faq__item.is-open .motor-faq__icon {
  transform: rotate(45deg);
}

.motor-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
  padding-inline: var(--space-5);
}

.motor-faq__answer p {
  padding-block: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.motor-faq__item.is-open .motor-faq__answer {
  max-height: 320px;
}

/* ═══════════════════════════════════════════
   GARANTÍA — CONFIANZA
   Solo visible si settings/legal.garantiaText
   está configurado.
   ═══════════════════════════════════════════ */
.motor-guarantee {
  background: var(--color-surface);
}

.motor-guarantee__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.motor-guarantee__item {
  text-align: center;
}

.motor-guarantee__icon {
  font-size: 2.25rem;
  margin-bottom: var(--space-2);
}

.motor-guarantee__label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.motor-guarantee__text {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  white-space: pre-line;
}

/* ═══════════════════════════════════════════
   QUIÉNES SOMOS
   Solo visible si settings/branding.aboutText
   está configurado.
   ═══════════════════════════════════════════ */
.motor-about {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 800px) {
  .motor-about {
    grid-template-columns: 1fr 1.1fr;
  }
}

/* Sin aboutImageUrl configurado: sin esto el texto quedaba encajonado en
   la primera columna y la segunda se veía en blanco (DEC-0097). */
.motor-about.motor-about--no-image {
  grid-template-columns: 1fr;
}

.motor-about.motor-about--no-image .motor-about__text {
  max-width: 70ch;
  margin: 0 auto;
}

.motor-about__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.motor-about__text {
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  white-space: pre-line;
}

/* ── Reveal on scroll (genérico, perf.js → revealOnScroll) ──
   Estado oculto por defecto; .is-visible lo agrega el observer la
   primera vez que el elemento entra al viewport, una sola vez. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* La imagen de "Quiénes somos" se revela desde abajo con clip-path en vez
   de solo fade — más foto, se siente como que "aparece", no que solo se
   desvanece. Se retrasa un poco respecto al texto para dar sensación de
   profundidad (no todo entra a la vez). */
img.motor-about__img.reveal-on-scroll {
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 600ms var(--ease-out) 120ms, opacity 300ms var(--ease-out);
}

img.motor-about__img.reveal-on-scroll.is-visible {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    transform: none;
    transition-property: opacity;
  }
  img.motor-about__img.reveal-on-scroll {
    clip-path: none;
  }
}

/* ═══════════════════════════════════════════
   REDES SOCIALES — SECCIÓN DESTACADA
   Complementa (no reemplaza) los links compactos
   del footer. Incluye el canal de difusión de
   WhatsApp cuando está configurado.
   ═══════════════════════════════════════════ */
.motor-social-section {
  text-align: center;
}

.motor-social-section__grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.motor-social-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.motor-social-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════
   WHATSAPP FLOTANTE
   Visible en toda la página cuando la empresa
   tiene WhatsApp de soporte o pagos configurado.
   ═══════════════════════════════════════════ */
.motor-wa-float {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: #25D366;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-sticky);
  transition: transform var(--transition-fast);
}

.motor-wa-float:hover {
  transform: scale(1.08);
}

@media (max-width: 640px) {
  .motor-wa-float {
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    right: var(--space-4);
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }
}

/* ═══════════════════════════════════════════
   PÁGINAS LEGALES (bases.html/terminos.html/privacidad.html)
   Nunca tuvieron CSS propio — el <main class="motor-page legal-main">
   ya trae el offset del header fijo; estas reglas son solo el contenido.
   ═══════════════════════════════════════════ */

.legal-main {
  max-width: 720px;
  margin-inline: auto;
  /* El atajo "padding" fija los 4 lados, incluido el top — sin calc() aquí
     esto pisa el padding-top:var(--header-height) de .motor-page (misma
     especificidad, esta regla carga después) y el contenido queda tapado
     por el header fijo, cortando el título. */
  padding: calc(var(--header-height) + var(--space-12)) var(--space-4) var(--space-16);
  flex: 1;
  width: 100%;
}

.legal-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* [hidden] del navegador y .legal-loader tienen la MISMA especificidad
   (selector de atributo vs. de clase) — sin esto, "display:flex" de arriba
   gana por venir después en la cascada y el loader nunca desaparece aunque
   JS sí ponga loader.hidden = true. Mismo problema puede afectar a
   .legal-article si algún día define su propio display. */
.legal-loader[hidden] {
  display: none;
}

.legal-title {
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl));
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
}

.legal-body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

.legal-body p {
  margin-bottom: var(--space-4);
}

.legal-body h2,
.legal-body h3 {
  font-weight: var(--font-weight-bold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal-body ul,
.legal-body ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.legal-error {
  text-align: center;
  padding: var(--space-16) var(--space-4);
}

.legal-error p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}