@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("fuentes/plus-jakarta-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("fuentes/plus-jakarta-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("fuentes/plus-jakarta-sans-700.woff2") format("woff2"); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(900px 600px at 50% -10%, rgba(145,132,217,.18), transparent 70%), #161826; color: #E9E9ED; font: 16px/1.55 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #9184D9; text-decoration: none; }
.caja { max-width: 440px; margin: 0 auto; padding: 48px 20px 56px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: #E9E9ED; font-weight: 600; letter-spacing: -.02em; margin-bottom: 40px; }
.marca svg { width: 20px; height: 23px; }
.kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9184D9; margin: 0 0 10px; }
h1 { font-size: 34px; line-height: 1.08; letter-spacing: -.03em; font-weight: 600; margin: 0 0 22px; }
.aparato { background: #232532; border: 1px solid rgba(233,233,237,.08); border-radius: 8px; padding: 14px 16px; margin-bottom: 22px; }
.aparato span { display: block; font-size: 12px; color: rgba(233,233,237,.55); }
.aparato b { display: block; font-size: 20px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.aparato small { color: rgba(233,233,237,.55); }
.precio { display: flex; align-items: baseline; gap: 8px; }
.precio b { font-size: 56px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.precio span { font-size: 18px; color: rgba(233,233,237,.6); }
.apagado { color: rgba(233,233,237,.6); margin: 12px 0 26px; }
form { margin: 0 0 10px; }
.boton { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: 8px; border: 1px solid rgba(233,233,237,.2); background: transparent; color: #E9E9ED; font: inherit; font-weight: 600; cursor: pointer; text-align: center; }
.boton:hover { border-color: #9184D9; background: rgba(145,132,217,.1); }
.boton.lleno { background: #9184D9; border-color: #9184D9; color: #161826; font-weight: 700; }
.boton.lleno:hover { background: #B5ABFC; }
.recado { padding: 12px 14px; border-radius: 8px; background: rgba(145,132,217,.14); border: 1px solid rgba(145,132,217,.35); }
.legal { font-size: 13px; color: rgba(233,233,237,.45); margin-top: 22px; }
.sello { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(233,233,237,.25); margin-bottom: 22px; }
.sello.bien { border-color: #9184D9; background: rgba(145,132,217,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D2CEFD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/26px no-repeat; }
.sello.espera { border-color: rgba(145,132,217,.25); border-top-color: #9184D9; animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sello.espera { animation: none; } }