/* ================= Tokens ================= */
:root {
  --navy-deep:   #0F1A2E;
  --navy-panel:  #16233D;
  --gold:        #F2B705;
  --gold-deep:   #C6960C;
  --paper-shadow:#E9DCB8;
  --coral:       #E4572E;
  --green-ok:    #7BE0A0;
  --ink:         #241C10;
  --ink-soft:    #5B5240;
  --cream-text:  #F5EFDC;

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", -apple-system, sans-serif;
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  width: 100%;
  background:
    radial-gradient(circle at 15% 20%, rgba(242,183,5,0.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(228,87,46,0.12), transparent 45%),
    var(--navy-deep);
  font-family: var(--font-body);
  color: var(--cream-text);
  padding: 40px 20px 64px;
  position: relative;
  overflow-x: hidden;
}

/* subtle spotlight bulbs strung along the top, carnival-marquee style */
.confetti {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;
  background-image: radial-gradient(circle, var(--gold) 2.5px, transparent 3px);
  background-size: 34px 6px;
  background-repeat: repeat-x;
  opacity: 0.55;
  z-index: 5;
}

/* ================= Luces (focos) sobre el header ================= */
.luces-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 920px;
  z-index: 0;
  pointer-events: none;
}

.luces-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ================= Layout ================= */
.wrap {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ================= Header / brand ================= */
.brand-header {
  text-align: center;
  margin-bottom: 4px;
}

.brand-logo {
  width: 270px;
  height: auto;
  margin: 0 auto;
  display: block;
  animation: logoFloat 3.6s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ================= Promo ================= */
.promo {
  text-align: center;
  margin-bottom: 28px;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(242,183,5,0.4);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 16px;
  animation: fadeUp 0.6s ease-out both;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 9vw, 56px);
  letter-spacing: 0.02em;
  margin: 0 0 14px;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(242,183,5,0.35);
  line-height: 1;
  animation: fadeUp 0.6s ease-out 0.15s both;
}

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

.price-line {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 7px 18px;
  border-radius: 8px;
  margin: 0 0 8px;
  animation:
    priceEntrance 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
    pricePulse 2s ease-in-out 0.9s infinite;
}

@keyframes priceEntrance {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pricePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,183,5,0.55); }
  50%      { box-shadow: 0 0 0 9px rgba(242,183,5,0); }
}

/* ================= Hero visual ================= */
.hero-visual {
  position: relative;
  max-width: 380px;
  margin: 24px auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-glow {
  position: absolute;
  bottom: 10%;
  width: 78%;
  height: 36px;
  background: radial-gradient(ellipse at center, rgba(90,170,255,0.45), transparent 70%);
  filter: blur(2px);
  z-index: 0;
  opacity: 0;
  animation: glowIn 0.5s ease-out 1.1s both;
}

@keyframes glowIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Recorta la animación de entrada del carro para que nunca amplíe el ancho de la
   página mientras vuela desde fuera de la pantalla (a diferencia de las insignias,
   que sí se salen un poco del borde a propósito, este contenedor no debe hacerlo). */
.car-clip {
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 1;
}

.car-img {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,0.5));
  animation: carEntrance 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
}

/* Entra deslizando, frena con un pequeño sobrepaso, y "aterriza" con un par de
   rebotes de suspensión que se van apagando hasta asentarse. */
@keyframes carEntrance {
  0%   { transform: translateX(160%) translateY(0); }
  45%  { transform: translateX(-4%) translateY(0); }
  56%  { transform: translateX(1%) translateY(-16px); }
  66%  { transform: translateX(0) translateY(3px); }
  76%  { transform: translateX(0) translateY(-7px); }
  86%  { transform: translateX(0) translateY(1px); }
  100% { transform: translateX(0) translateY(0); }
}

.badge-sorteo,
.badge-winner {
  position: absolute;
  z-index: 2;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.45));
  opacity: 0;
}

.badge-sorteo {
  left: -10px;
  top: 2%;
  width: 108px;
  animation:
    badgePopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.85s both,
    badgeWiggle 3s ease-in-out 2.5s infinite;
}

.badge-winner {
  right: -10px;
  top: 14%;
  width: 98px;
  animation:
    badgePopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.05s both,
    badgePulse 2.4s ease-in-out 2.7s infinite;
}

@keyframes badgePopIn {
  0%   { opacity: 0; transform: scale(0.3) rotate(-18deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* El badge de "Gran Sorteo" es el más importante: además del pop, queda con un
   vaivén sutil para que no pase desapercibido. */
@keyframes badgeWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(-5deg) scale(1.05); }
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* ================= Date bar ================= */
.date-bar {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
  animation: fadeUp 0.6s ease-out 2.3s both;
}

/* ================= Panels (form + side cards) ================= */
.panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}

@media (min-width: 760px) {
  .panels {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
  }
}

/* ================= Form card ================= */
.form-card {
  background: var(--navy-panel);
  border: 1px solid rgba(242,183,5,0.35);
  border-radius: 18px;
  padding: 26px 24px 28px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.6);
}

.form-ribbon {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.form-card h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(245,239,220,0.65);
  margin: 0 0 20px;
}

/* ================= Form fields ================= */
.field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(245,239,220,0.55);
}

.field-input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 8px;
  border: 1.5px solid var(--paper-shadow);
  padding: 0 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-input .icon {
  font-size: 15px;
  opacity: 0.75;
}

.field-input input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 11px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  width: 100%;
}

.field-input input::placeholder { color: #B5A986; }

.field-input:focus-within {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(242,183,5,0.25);
}

.total-line {
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(245,239,220,0.7);
}

.total-line strong {
  color: var(--gold);
}

.cantidad-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.chip {
  width: auto;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(242,183,5,0.5);
  background: transparent;
  color: var(--cream-text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
  border-color: var(--gold);
}

.chip.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* ================= Account card (banco elegido) ================= */
.account-card {
  background: #fff;
  border: 1.5px dashed var(--gold-deep);
  border-radius: 10px;
  padding: 14px 16px;
  margin: -6px 0 16px;
  color: var(--ink);
}

.account-card-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.account-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-number {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.03em;
}

.copy-btn {
  width: auto;
  margin: 0;
  border: 1.5px solid var(--gold-deep);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.copy-btn:hover { background: rgba(242,183,5,0.15); }
.copy-btn.copied { border-color: #2E7D32; color: #2E7D32; }

.account-holder {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ================= File input / comprobante ================= */
.file-field input[type="file"] {
  padding: 8px 0;
  font-size: 13px;
}

.file-field input[type="file"]::file-selector-button {
  border: none;
  background: var(--gold);
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  margin-right: 12px;
}

.file-field input[type="file"]::file-selector-button:hover {
  background: var(--gold-deep);
}

.comprobante-preview {
  margin-top: 10px;
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  border: 1px solid var(--paper-shadow);
}

.comprobante-preview:not([hidden]) {
  display: block;
}

button {
  width: 100%;
  margin-top: 8px;
  padding: 15px;
  border: none;
  border-radius: 10px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}

button:hover { background: var(--gold-deep); }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.6; cursor: not-allowed; }
button:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.status {
  min-height: 18px;
  font-size: 13px;
  text-align: center;
  margin: 10px 0 0;
  font-weight: 600;
}
.status.ok   { color: var(--green-ok); }
.status.err  { color: var(--coral); }

/* ================= Side cards ================= */
.side-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-card {
  background: var(--navy-panel);
  border: 1px solid rgba(242,183,5,0.35);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.info-card .icon {
  font-size: 26px;
  display: block;
  margin-bottom: 8px;
}

.price-card p {
  margin: 0;
  font-size: 14px;
  color: rgba(245,239,220,0.75);
}

.price-card strong {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--gold);
  display: block;
  letter-spacing: 0.03em;
}

.price-card em {
  font-style: normal;
  font-size: 13px;
}

.contact-card > p {
  margin: 0 0 10px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-size: 17px;
  color: var(--gold);
}

.contact-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-card li {
  font-size: 14px;
  font-weight: 600;
  border-top: 1px solid rgba(245,239,220,0.12);
  padding-top: 8px;
}

.contact-card li:first-child {
  border-top: none;
  padding-top: 0;
}

.footnote {
  text-align: center;
  font-size: 12px;
  color: rgba(245,241,220,0.45);
  margin-top: 26px;
}

.credit {
  text-align: center;
  font-size: 11px;
  color: rgba(245,241,220,0.3);
  margin-top: 10px;
}

/* ================= Redes sociales ================= */
.social-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(242,183,5,0.35);
  color: var(--gold);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.social-btn svg {
  width: 20px;
  height: 20px;
}

.social-btn:hover {
  transform: translateY(-2px);
  border-color: transparent;
  color: #fff;
}

.social-instagram:hover {
  background: radial-gradient(circle at 30% 110%, #fdf497, #fd5949 26%, #d6249f 61%, #285AEB 90%);
}

.social-facebook:hover {
  background: #1877F2;
}

@media (max-width: 380px) {
  .badge-sorteo { width: 88px; left: -8px; }
  .badge-winner { width: 80px; right: -8px; }
}

/* ================= Mini tutorial (modal de bienvenida) ================= */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,26,46,0.78);
  backdrop-filter: blur(3px);
  padding: 20px;
  animation: overlayIn 0.25s ease-out both;
}

.tutorial-overlay.hidden {
  display: none;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tutorial-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--navy-panel);
  border: 1px solid rgba(242,183,5,0.4);
  border-radius: 18px;
  padding: 28px 24px 24px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.tutorial-modal h2 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--gold);
  margin: 4px 0 16px;
}

.tutorial-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(245,239,220,0.1);
  color: var(--cream-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tutorial-close:hover {
  background: var(--coral);
  color: #fff;
}

.tutorial-steps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tutorial-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(245,239,220,0.85);
}

.tutorial-steps .step-icon {
  flex-shrink: 0;
  font-size: 17px;
}

.tutorial-cta {
  width: 100%;
}

/* ================= Botón fijo de WhatsApp ================= */
.whatsapp-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  animation: whatsappPulse 2.4s ease-in-out infinite;
}

.whatsapp-btn:hover { background: #1ebe57; }

.whatsapp-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.whatsapp-btn .whatsapp-text {
  white-space: nowrap;
}

@media (max-width: 420px) {
  .whatsapp-btn .whatsapp-text { display: none; }
  .whatsapp-btn { padding: 14px; }
}

@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 0 rgba(37,211,102,0.5); }
  50% { box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 10px rgba(37,211,102,0); }
}