/* ============================================================
   BOKU NO MERCH — DROP 001
   Portado 1:1 del prototipo de Claude Design (Landing v3).
   Los estilos base van inline en el HTML, igual que en el original.
   Acá viven solo los estados que el formato .dc.html resolvía con
   style-hover / style-focus, más animaciones y responsive.
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

a { color: #B4FF39; text-decoration: none; }
a:hover { color: #0A0A0A; }

input, textarea { font-family: 'JetBrains Mono', monospace; }
input::placeholder { color: #9a9a9a; }

/* ------------------------------------------------------------
   Animaciones (idénticas al prototipo)
   ------------------------------------------------------------ */
@keyframes mq  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes mqr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.15; } }

.mq  { animation: mq  18s linear infinite; }
.mqr { animation: mqr 20s linear infinite; }
.blink { animation: blink 1.1s steps(1, end) infinite; color: #B4FF39; }

@media (prefers-reduced-motion: reduce) {
  .mq, .mqr, .blink { animation: none; }
}

/* ------------------------------------------------------------
   Estados hover — equivalen a los style-hover del .dc.html
   ------------------------------------------------------------ */

/* CTA principal (hero, cierre) */
.btn-cta:hover {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  box-shadow: 2px 2px 0 #0A0A0A !important;
}

/* CTA del checkout */
.btn-cta-flat:hover { background: #0A0A0A !important; color: #FFFFFF !important; }

/* CTA de la barra fija inferior */
.btn-cta-bar:hover {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  box-shadow: 1px 1px 0 #0A0A0A !important;
}

/* Botones que se "hunden": grilla de números y medios de pago */
.btn-press:hover:not(:disabled) { box-shadow: 1px 1px 0 #0A0A0A !important; }
.btn-press:disabled { cursor: not-allowed; }

/* Botón "Seguinos" */
.btn-follow:hover {
  background: #B4FF39 !important;
  color: #FFFFFF !important;
  box-shadow: 2px 2px 0 #0A0A0A !important;
}

/* Cabecera de cada FAQ */
.faq-q:hover { background: #B4FF39 !important; color: #FFFFFF !important; }

/* ------------------------------------------------------------
   Foco — equivale a los style-focus del .dc.html
   ------------------------------------------------------------ */
.field:focus {
  outline: none;
  box-shadow: 4px 4px 0 #B4FF39;
}

/* Foco visible por teclado en todo lo interactivo (accesibilidad).
   No pisa el look: se dibuja por fuera del borde. */
button:focus-visible,
a:focus-visible,
.field:focus-visible {
  outline: 3px solid #B4FF39;
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   Grilla de números
   ------------------------------------------------------------ */
.num-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}

.num-btn {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 56px;
  background: #FFFFFF;
  border: 3px solid #0A0A0A;
  box-shadow: 4px 4px 0 #0A0A0A;
  padding: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: clamp(20px, 5vw, 30px);
  color: #0A0A0A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Número elegido */
.num-btn .num-sel {
  position: absolute;
  inset: -3px;
  border: 3px solid #0A0A0A;
  background: #B4FF39;
  color: #0A0A0A;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Número no disponible (vendido o reservado) */
.num-btn .num-sold {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9C9C9;
  background-color: #F2F2F2;
  background-image: repeating-linear-gradient(135deg, rgba(10,10,10,0.07) 0 6px, transparent 6px 12px);
}

.num-btn .num-sold .strike {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 4px;
  background: #B4FF39;
  transform: rotate(-16deg);
}

/* ------------------------------------------------------------
   FAQ — el prototipo usaba max-height:300px fijo, lo que cortaba
   respuestas largas. grid-template-rows hace lo mismo visualmente
   pero se adapta a cualquier largo.
   ------------------------------------------------------------ */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}
.faq-a > div { overflow: hidden; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }

/* ------------------------------------------------------------
   Barra fija inferior
   ------------------------------------------------------------ */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  transform: translateY(130%);
  transition: transform 240ms ease;
  background: #FFFFFF;
  border-top: 4px solid #0A0A0A;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
}
.sticky-bar.show { transform: translateY(0); }

/* ------------------------------------------------------------
   Formulario: errores de validación
   ------------------------------------------------------------ */
.field.invalid { border-color: #D42B2B; box-shadow: 4px 4px 0 #D42B2B; }

.field-error {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  color: #D42B2B;
  margin-top: -4px;
}

/* ------------------------------------------------------------
   Pantalla de "pedido cargado" (datos de transferencia)
   ------------------------------------------------------------ */
.pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 3px solid #0A0A0A;
}
.pay-row:last-child { border-bottom: 0; }

.pay-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  color: #6a6a6a;
  flex: none;
}
.pay-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 16px;
  color: #0A0A0A;
  word-break: break-all;
  text-align: right;
}

.copy-btn {
  flex: none;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 12px;
  background: #FFFFFF;
  color: #0A0A0A;
  border: 3px solid #0A0A0A;
  padding: 5px 8px;
  cursor: pointer;
}
.copy-btn:hover { background: #B4FF39; }
.copy-btn.done  { background: #0A0A0A; color: #B4FF39; }

/* ------------------------------------------------------------
   Estados de carga / deshabilitado
   ------------------------------------------------------------ */
.is-busy { opacity: 0.55; pointer-events: none; }

/* Aviso de error global del checkout */
.alert {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 12px;
  border: 3px solid #D42B2B;
  background: #FFF0F0;
  color: #D42B2B;
}

/* Solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nota: el layout de dos columnas de la sección 04 va inline en el HTML
   (grid + auto-fit), igual que en el prototipo. No ponerlo acá: el style
   inline le gana a la clase y la regla queda muerta. */