/* Premios Pa Food — customer pages. Brand system from Pafood2:
   deep purple gradient with berry speckle, gold hairline frame, Playfair Display + Inter. */
:root {
  --deep: #1a0a2b;
  --deep-2: #2d1247;
  --berry: #4a1f6e;
  --gold: #c8a24a;
  --gold-2: #eccb84;
  --cream: #f7f1fb;
  --muted: rgba(247, 241, 251, .72);
  --error: #ffb4b4;
  --ok: #a8e6b0;
  --radio: 20px;
  --sombra: 0 18px 50px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--deep); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--cream);
  background:
    radial-gradient(circle at 12% 18%, rgba(236, 203, 132, .10) 0 2px, transparent 3px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 60%, rgba(166, 76, 196, .22) 0 1.5px, transparent 2.5px) 0 0 / 38px 38px,
    radial-gradient(120% 80% at 50% -10%, #4a1f6e 0%, var(--deep-2) 38%, var(--deep) 75%);
  background-attachment: fixed;
  line-height: 1.5;
}

a { color: var(--gold-2); }
strong { color: #fff; }

.marco {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

/* Header + step indicator */
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.logo { width: 56px; height: 56px; display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
.pasos { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--muted); }
.pasos li { display: flex; align-items: center; gap: 5px; }
.pasos li span {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(200, 162, 74, .5); font-weight: 700; font-size: 11px;
}
.pasos li.hecho span { background: rgba(200, 162, 74, .25); color: var(--gold-2); }
.pasos li.actual { color: var(--gold-2); font-weight: 600; }
.pasos li.actual span { background: var(--gold); color: var(--deep); border-color: var(--gold); }

/* Main card with gold hairline frame */
.contenido { flex: 1; }
.panel {
  position: relative;
  padding: 28px 22px 24px;
  border-radius: var(--radio);
  background: linear-gradient(180deg, rgba(45, 18, 71, .92), rgba(26, 10, 43, .94));
  border: 1px solid rgba(200, 162, 74, .55);
  box-shadow: var(--sombra), inset 0 0 0 5px rgba(26, 10, 43, .9), inset 0 0 0 6px rgba(200, 162, 74, .25);
  text-align: center;
}
.antetitulo {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; color: var(--gold-2); line-height: 1.15; }
h1 { font-size: clamp(28px, 8vw, 36px); margin: 0 0 10px; }
h2 { font-size: 21px; margin: 26px 0 8px; }
h3 { font-size: 17px; margin: 18px 0 6px; }
.bajada { margin: 0 auto 18px; color: var(--muted); max-width: 34ch; }
.ayuda { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.secundario { margin: 18px 0 0; font-size: 14px; }
.saludo { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 22px; color: var(--cream); margin: 0 0 4px; }

.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(200, 162, 74, .6);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .06em; color: var(--gold-2); font-size: 13px;
}

/* Forms */
.formulario { text-align: left; }
label { display: block; font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
input[type=text], input[type=tel] {
  width: 100%; padding: 14px; font-size: 18px; color: var(--cream);
  background: rgba(10, 3, 18, .6); border: 1px solid rgba(200, 162, 74, .6); border-radius: 14px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(236, 203, 132, .25); }
.campo-codigo {
  text-align: center; text-transform: uppercase; letter-spacing: .18em;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 24px !important; font-weight: 700;
}
.casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 18px; }
.casilla input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--gold); }

/* Buttons */
.boton {
  display: block; width: 100%; margin-top: 20px; padding: 15px 20px; border: 0; border-radius: 999px;
  font: 700 17px/1.2 Inter, system-ui, sans-serif; text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(.97); }
.boton.principal {
  color: var(--deep);
  background: linear-gradient(180deg, #f3d99b, var(--gold) 55%, #a8842f);
  box-shadow: 0 8px 22px rgba(200, 162, 74, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.boton.whatsapp { color: #fff; background: #1f9e55; box-shadow: 0 8px 22px rgba(31, 158, 85, .3); margin-top: 12px; }
.boton[disabled] { opacity: .6; cursor: default; }
.boton.peligro { color: #fff; background: #b3261e; box-shadow: 0 8px 22px rgba(179, 38, 30, .3); }
.boton.contorno { margin-top: 12px; color: var(--gold-2); background: transparent; border: 1px solid rgba(236, 203, 132, .6); }

.aviso {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; font-size: 14px; text-align: left;
  background: rgba(236, 203, 132, .1); border: 1px solid rgba(236, 203, 132, .5);
}
.aviso.error { background: rgba(255, 120, 120, .1); border-color: var(--error); color: var(--error); }

/* Tier badge */
.nivel { display: inline-block; vertical-align: middle; font: 700 12px/1 Inter, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; padding: 7px 11px; border-radius: 999px; margin-left: 4px; }
.nivel-morada { background: #6b2fa0; color: var(--cream); border: 1px solid var(--gold); }
.nivel-plata { background: linear-gradient(135deg, #f4f4f6, #a9acb4); color: #2a2a33; }
.nivel-dorada { background: linear-gradient(135deg, #f3d99b, var(--gold)); color: var(--deep); }
.nivel-bienvenida { background: linear-gradient(135deg, var(--cream), #e2c6f4); color: var(--deep); border: 1px solid var(--gold); }

/* Wheel */
.ruleta-panel { padding-bottom: 20px; }
.rueda { position: relative; width: min(84vw, 360px); margin: 6px auto 0; aspect-ratio: 1; }
.rueda-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .5)); overflow: visible; }
.rueda-svg text { font-family: Inter, system-ui, sans-serif; font-weight: 700; }
.aro { fill: #12061f; stroke: var(--gold); stroke-width: 2; }
.radio { stroke: rgba(26, 10, 43, .55); stroke-width: .8; }
.rueda-giro { will-change: transform; }
.foco { fill: var(--gold-2); opacity: .95; }
.foco.par { fill: #fff6df; opacity: .6; }
.rueda.esperando .foco { animation: titilar .5s steps(2) infinite; }
.rueda.gano .foco { animation: titilar .25s steps(2) 8; }
@keyframes titilar { 50% { opacity: .2; } }
.centro { fill: var(--deep); stroke: var(--gold); stroke-width: 2.5; }
.centro-texto { fill: var(--gold-2); font-family: "Playfair Display", Georgia, serif !important; font-size: 13px; font-style: italic; }
.puntero {
  position: absolute; left: 50%; top: -6px; z-index: 2; width: 30px; height: 38px; transform: translateX(-50%);
  background: linear-gradient(180deg, #fff1c9, var(--gold) 60%, #93712a);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
}
.girar { max-width: 280px; margin: 22px auto 0; font-size: 20px; letter-spacing: .04em; }
.estado { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; }
/* Welcome (mystery) wheel: gifts and question marks instead of prize names. */
.rueda-svg text.icono { font-size: 30px; font-weight: 400;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", Inter, sans-serif; }
.rueda-svg text.icono.pregunta { font: italic 700 38px "Playfair Display", Georgia, serif; }
/* Sound toggle, in the wheel's corner so it takes no vertical space. */
.sonido { position: absolute; top: 0; right: 0; z-index: 3; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(200, 162, 74, .6); background: rgba(10, 3, 18, .75); color: var(--cream); font-size: 18px; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sonido[aria-pressed="false"] { opacity: .75; }
.sonido:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* Wheel step: the whole wheel and the Girar button fit the first screen of a phone
   (360×640 and up). Compact header, wheel limited by the viewport height too. */
.paso-ruleta .marco { padding-top: max(8px, env(safe-area-inset-top)); }
.paso-ruleta .cabecera { margin-bottom: 8px; }
.paso-ruleta .logo { width: 44px; height: 44px; }
.paso-ruleta .ruleta-panel { padding: 14px 14px 12px; }
.paso-ruleta .saludo { font-size: 18px; margin: 0; }
.paso-ruleta .ruleta-panel h1 { font-size: clamp(22px, 6.6vw, 30px); margin: 0 0 2px; }
.paso-ruleta .ruleta-panel .nivel { font-size: 11px; padding: 6px 9px; }
.paso-ruleta .ruleta-panel .bajada { margin: 0 auto 8px; font-size: 14px; max-width: none; }
.paso-ruleta .rueda { width: min(84vw, 360px, calc(100vh - 262px)); width: min(84vw, 360px, calc(100svh - 262px)); }
.paso-ruleta .girar { margin-top: 12px; padding: 14px 20px; }
.paso-ruleta .estado { margin-top: 8px; }
.paso-ruleta .ruleta-panel > .secundario { margin-top: 6px; }
.estado.error { color: var(--error); }

/* Result overlay */
.resultado-flotante {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px;
  background: rgba(10, 3, 18, .78); opacity: 0; transition: opacity .3s ease;
}
.resultado-flotante[hidden] { display: none; }
.resultado-flotante.visible { opacity: 1; }
.resultado-caja {
  position: relative; width: 100%; max-width: 380px; padding: 30px 22px 24px; text-align: center; border-radius: var(--radio);
  background: radial-gradient(120% 90% at 50% 0%, #4a1f6e, var(--deep) 70%); border: 1px solid var(--gold);
  box-shadow: var(--sombra), 0 0 60px rgba(200, 162, 74, .25);
  transform: scale(.9); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.resultado-flotante.visible .resultado-caja { transform: scale(1); }
.resultado-caja h2 { margin-top: 0; font-size: 26px; }
.destellos i {
  position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 2px; background: var(--gold-2); opacity: 0;
}
.resultado-flotante.visible .destellos i { animation: destello 1.1s ease-out forwards; }
.destellos i:nth-child(2n) { background: #b57be0; }
.destellos i:nth-child(1) { --x: -140px; --y: -150px; }
.destellos i:nth-child(2) { --x: 130px; --y: -160px; animation-delay: .05s; }
.destellos i:nth-child(3) { --x: -170px; --y: 10px; animation-delay: .1s; }
.destellos i:nth-child(4) { --x: 170px; --y: 30px; }
.destellos i:nth-child(5) { --x: -90px; --y: 170px; animation-delay: .08s; }
.destellos i:nth-child(6) { --x: 100px; --y: 160px; animation-delay: .12s; }
.destellos i:nth-child(7) { --x: 0; --y: -200px; }
.destellos i:nth-child(8) { --x: 20px; --y: 200px; animation-delay: .06s; }
@keyframes destello {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(320deg); }
}

/* Result page */
.medalla {
  width: 96px; height: 96px; margin: 8px auto 14px; border-radius: 50%; display: grid; place-items: center;
  font: 700 40px/1 "Playfair Display", Georgia, serif; color: var(--deep);
  background: radial-gradient(circle at 35% 30%, #fff1c9, var(--gold) 60%, #93712a);
  box-shadow: 0 10px 26px rgba(200, 162, 74, .4), inset 0 0 0 4px rgba(26, 10, 43, .25);
}
.insignia { display: inline-block; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.estado-girado { background: rgba(168, 230, 176, .15); color: var(--ok); border: 1px solid rgba(168, 230, 176, .5); }
.estado-canjeado { background: rgba(236, 203, 132, .15); color: var(--gold-2); border: 1px solid rgba(236, 203, 132, .5); }
.estado-vencido { background: rgba(255, 180, 180, .12); color: var(--error); border: 1px solid rgba(255, 180, 180, .5); }
.condiciones { margin: 0 0 6px; text-align: left; }
.condiciones div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed rgba(200, 162, 74, .3); }
.condiciones dt { color: var(--muted); font-size: 14px; }
.condiciones dd { margin: 0; font-weight: 600; text-align: right; }
.cupon {
  margin: 20px 0 4px; padding: 16px 14px; border-radius: 16px; border: 2px dashed var(--gold);
  background: rgba(200, 162, 74, .08);
}
.cupon p { margin: 0; }
.cupon-codigo {
  margin: 8px 0 !important; font: 700 clamp(30px, 10vw, 40px)/1.1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .1em; color: #fff; user-select: all;
}
.acciones { margin-top: 6px; }
.aviso-prueba { margin: 0 0 16px; padding: 10px 12px; border-radius: 12px; background: #c0262d; color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: .02em; text-align: center; }
.resultado-caja .aviso-prueba { margin-bottom: 12px; }
.aviso-prueba[hidden] { display: none; }
.canje { margin: 22px 0 4px; text-align: left; }
.canje h2 { margin: 0 0 6px; text-align: center; }
.canje > .ayuda { text-align: center; }
.forma { margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px solid rgba(200, 162, 74, .5); background: rgba(10, 3, 18, .5); }
.forma h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 18px; }
.forma p { margin: 0; font-size: 14px; }
.nro { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold);
  color: var(--deep); font: 700 13px/1 Inter, sans-serif; }
.observaciones-texto { width: 100%; margin-top: 10px; resize: none; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--gold);
  background: #12061f; color: #fff; font: 600 16px/1.4 Inter, system-ui, sans-serif; }
.boton.copiar { margin-top: 10px; padding: 12px; color: var(--deep); background: var(--gold-2); }
.forma .enlaces-apps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.boton.whatsapp.grande { margin-top: 14px; padding: 18px 20px; font-size: 19px; }
.boton.chico { display: inline-block; width: auto; margin-top: 8px; padding: 9px 16px; font-size: 14px; }
.lista-premios { list-style: none; margin: 8px 0 0; padding: 0; text-align: left; }
.lista-premios li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px dashed rgba(200, 162, 74, .3); }
.lista-premios span { color: var(--muted); font-size: 14px; }

/* Long text (bases) */
.texto-largo { text-align: left; }
.texto-largo h1 { text-align: left; }
.texto-largo ul { padding-left: 20px; }
.texto-largo li { margin: 6px 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.tabla th, .tabla td { padding: 8px 6px; border-bottom: 1px solid rgba(200, 162, 74, .28); vertical-align: top; text-align: left; }
.tabla th { color: var(--gold); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.tabla .num { text-align: right; white-space: nowrap; }

/* Footer */
.pie { margin-top: 22px; text-align: center; font-size: 13px; color: var(--muted); }
.pie nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.pie p { margin: 10px 0 0; opacity: .7; }

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

/* Monthly raffle box inside the result popup */
.resultado-sorteo{margin:14px 0 16px;padding:12px 14px;border-radius:14px;
  border:1px solid rgba(200,162,74,.45);background:rgba(200,162,74,.10);text-align:center}
.resultado-sorteo .llevas{font-size:17px;margin:0 0 6px;color:var(--gold-2,#eccb84)}
.resultado-sorteo .llevas strong{font-size:20px}
.resultado-sorteo .sorteo-info{font-size:14px;line-height:1.45;margin:0;color:var(--cream,#f7f1fb)}
.resultado-caja .otro-codigo:not([hidden]) { display: block; margin-top: 14px; font-size: 14px; color: inherit; opacity: .85; }

/* Online order page (/pedido/{token}) */
.pedido { text-align: left; }
.pedido h1, .pedido .antetitulo { text-align: center; }
.estado-pedido { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; text-align: center; font-weight: 600;
  background: rgba(236, 203, 132, .1); border: 1px solid rgba(236, 203, 132, .5); }
.estado-espera { animation: pedido-pulso 2.4s ease-in-out infinite; }
.estado-accion { background: rgba(200, 162, 74, .2); border-color: var(--gold); }
.estado-ok { background: rgba(31, 158, 85, .15); border-color: #1f9e55; }
.estado-mal { background: rgba(255, 120, 120, .1); border-color: var(--error); color: var(--error); }
@keyframes pedido-pulso { 50% { box-shadow: 0 0 0 4px rgba(236, 203, 132, .15); } }
@media (prefers-reduced-motion: reduce) { .estado-espera { animation: none; } }
.pagar { margin: 6px 0 18px; padding: 16px; border-radius: 16px; border: 1px solid var(--gold); background: rgba(10, 3, 18, .45); }
.pagar-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 15px; }
.pagar-total b { font-size: 26px; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.pedido-lineas { list-style: none; margin: 0; padding: 0; }
.pedido-lineas li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(200, 162, 74, .2); }
.pedido-lineas li span { overflow-wrap: anywhere; }
.pedido-lineas small { display: block; color: var(--muted); }
.pedido-lineas b, .pedido-totales dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pedido-totales { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 0; }
.pedido-totales dt { color: var(--muted); }
.pedido-totales dd { margin: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
.pedido-acciones { margin-top: 8px; }