@font-face{font-family:Inter;src:url('/inter-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/inter-black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#101815;--panel:#17231f;--line:#3d5148;--text:#f1eee3;--muted:#b7bcae;--accent:#c6a66a;--green:#23bd7d;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}
body{margin:0;padding:32px 16px;min-height:var(--visible-viewport-height,100dvh);display:grid;place-items:center;background:radial-gradient(ellipse at 50% 0,#284638 0,transparent 65%),var(--bg)}
main{width:min(100%,480px);padding:28px;background:linear-gradient(155deg,#1a2b23,#131e19 70%);border:1px solid #c6a66a80;border-radius:22px;box-shadow:0 24px 75px #0005;overflow-wrap:anywhere}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--text);font-size:24px;font-weight:900;letter-spacing:-1px;line-height:1.15;text-decoration:none}
.brand small{display:block;margin-top:5px;color:var(--muted);font-size:8px;font-weight:400;letter-spacing:1.6px}
.chat-avatar{width:28px;height:28px;flex:0 0 28px;object-fit:cover;object-position:50% 30%;border:1px solid #c6a66a80;border-radius:50%;background:var(--panel)}
.brand-avatar{width:48px;height:48px;flex-basis:48px}
.tag{display:block;margin:26px 0 12px;color:var(--accent);font:500 10px/1.5 ui-monospace,Consolas,monospace;letter-spacing:1.4px}
h1{margin:0 0 8px;color:var(--text);font-size:29px;line-height:1.08;font-weight:900;letter-spacing:-1px}
p{color:var(--muted);line-height:1.6}
#description{margin:0 0 20px;font-size:12px;color:var(--muted)}
.bubble{position:relative;margin:10px 0 10px 37px;padding:13px 14px;background:#202a28;border:1px solid #3d5148;border-radius:14px 14px 14px 4px;color:var(--text);font-size:14px;line-height:1.55;white-space:pre-line}
.bubble:not(.customer)::before{content:"";position:absolute;left:-37px;top:7px;width:27px;height:27px;background:var(--panel) url('/duque-brand.png') center 30%/cover no-repeat;border:1px solid #c6a66a80;border-radius:50%}
.bubble.customer{margin-left:37px;border-color:#9d885e;background:#2c3528;border-radius:14px 14px 4px 14px}
.button{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:11px 0;padding:13px 16px;border:1px solid #a9f1ca;border-radius:999px;background:var(--green);color:#08291b;font:900 14px/1.4 Inter,"Segoe UI",Arial,sans-serif;text-align:center;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s,border-color .15s}
.button:hover{background:#49d797;transform:translateY(-1px)}
.button.secondary{border-color:#89978e;background:transparent;color:var(--text)}
.button.secondary:hover{background:#24372d;border-color:var(--accent)}
.button.card-payment{background:#dbc18a;border-color:#f1dfb5;color:#252014}
.button.card-payment:hover{background:#ead5a9}
.button:disabled{opacity:.55;cursor:wait;transform:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #f0d9a3;outline-offset:4px}
.email-label{display:block;margin:18px 0 8px;font-size:13px;color:var(--text)}
input[type=email]{width:100%;min-height:49px;padding:13px 14px;border:1px solid #687e70;border-radius:12px;background:#101a15;color:var(--text);font:400 16px/1.4 Inter,"Segoe UI",Arial,sans-serif;scroll-margin-block:90px}
input::placeholder{color:#a3afa5}
.adult-consent{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:12px;line-height:1.5;cursor:pointer}
.adult-consent input{width:20px;height:20px;flex-shrink:0;accent-color:var(--green)}
.help{margin:22px 0 17px;padding-top:17px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.help summary{cursor:pointer;min-height:25px;color:var(--muted)}
.help p{margin:8px 0;font-size:12px}
.back{display:inline-block;padding:4px 0;color:var(--accent);font-size:12px;text-underline-offset:4px}
#error{color:#ffb2b2;font-size:13px;line-height:1.5}
#error:empty{display:none}
.price{font-size:28px;font-weight:900}
.status{padding:18px;border:1px solid var(--line);border-radius:14px}
.typing{display:flex;align-items:center;gap:8px;padding:9px 0;color:var(--muted);font-size:12px}
.typing-dots{color:var(--accent);letter-spacing:3px;animation:typingPulse .8s ease-in-out infinite alternate}
.composing>:not(.shown):not(.typing){display:none}
.shown{animation:messageIn .18s ease-out}
.pix-code{width:100%;min-height:64px;padding:12px;border:1px solid #687e70;border-radius:12px;background:#101a15;color:var(--text);font:12px/1.6 ui-monospace,Consolas,monospace;resize:vertical;overflow-wrap:anywhere}
.pix-copy-status,.pix-expiry{margin:7px 0;color:var(--muted);font-size:12px;line-height:1.5}
.pix-qr{margin:16px 0;font-size:13px}
.pix-qr summary{cursor:pointer;color:var(--accent)}
.pix-qr img{display:block;width:200px;max-width:100%;height:auto;margin:12px auto;border:8px solid white;border-radius:8px;background:white}
body.email-editing{place-items:start center;padding-top:12px;padding-bottom:calc(var(--keyboard-inset,0px) + 24px)}
body.email-editing main{margin-top:0;margin-bottom:0}
@keyframes typingPulse{from{opacity:.35}to{opacity:1}}
@keyframes messageIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:520px){body{padding:18px 12px}main{padding:23px 20px;border-radius:20px}.brand{font-size:22px}h1{font-size:26px}.tag{font-size:9px;letter-spacing:1px;margin-top:22px}.bubble{padding:12px}.button{min-height:48px}}
@media(max-height:650px){body{padding:12px}main{padding:20px}.tag{margin-top:17px}h1{font-size:26px}#description{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}