:root{color-scheme:dark;--gold:#d8b575;--muted:#b2bdc6;--line:#d8b57555;--bg:#081725}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#081725;color:#f2eee6;font:14px/1.4 Arial,sans-serif;background-image:radial-gradient(ellipse at top,#29404c80,transparent 70%)}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.card{width:100%;height:var(--visible-height,100dvh);padding: max(5px,env(safe-area-inset-top)) 0 max(5px,env(safe-area-inset-bottom));display:grid;grid-template-rows:22px minmax(0,1fr) 42px 174px 78px 84px 26px 25px;gap:6px;background:linear-gradient(180deg,#08172500,#081725 52%)}.card> :not(.hero){width:min(92%,500px);justify-self:center;min-width:0;min-height:0}.topline{display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:8px;letter-spacing:1.4px}.topline button{background:none;border:0;font-size:10px;letter-spacing:0;padding:0}.hero{width:100%;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:3px 0 16px;isolation:isolate;overflow:hidden}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(#08172535,#08172570),url('baam.png') center 40%/cover;opacity:.35;z-index:-2}.portrait{height:100%;max-height:205px;aspect-ratio:1;max-width:55vw;border-radius:50%;border:3px solid var(--gold);padding:4px;background:#081725;box-shadow:0 0 0 3px #d8b57520,0 0 25px #d8b57525;overflow:hidden;z-index:1}.portrait img{width:100%;height:100%;border-radius:50%;object-fit:contain;background:#081725}.crescent{position:absolute;width:115%;height:80%;left:-7.5%;bottom:0;border-bottom:4px solid var(--gold);border-radius:0 0 50% 50%;z-index:-1;box-shadow:0 5px 0 #d8b57512}.person{text-align:center;align-self:center}.person h1{font:23px/1.15 Georgia,serif;font-weight:400;margin:0 0 5px}.person p{font-size:10px;color:var(--muted);margin:0}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px}.action{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(115deg,#c19a5614,#ffffff02);padding:4px 8px;text-align:left;font-size:12px;min-width:0}.icon{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#edcf8b,#af813a);color:#14212a;border-radius:5px;width:28px;height:28px;flex:none}.icon svg{width:20px;height:20px}.arrow{margin-left:auto;color:var(--gold);font:24px Georgia,serif}.appointment{grid-column:1/-1;background:linear-gradient(105deg,#b18a49,#e4c789);color:#081725;justify-content:center;font-weight:600;font-size:14px}.appointment .arrow{margin-left:8px;color:#081725}.appointment .icon{background:none}.service-strip{display:flex;flex-direction:column;gap:6px;padding-top:3px}.strip-heading{display:flex;align-items:center;gap:10px;color:var(--gold);font-size:8px;letter-spacing:2px;text-align:center;justify-content:center}.strip-heading:before,.strip-heading:after{content:'';height:1px;background:var(--line);flex:1}.mini-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-height:0;flex:1}.service-mini{background:none;border:0;border-right:1px solid var(--line);display:flex;align-items:center;flex-direction:column;gap:3px;padding:0 2px;min-width:0;text-align:center}.service-mini:last-child{border-right:0}.service-mini svg{width:25px;height:25px;color:var(--gold);flex:none}.service-mini strong{font-size:9px;line-height:1.1;color:var(--gold)}.service-mini small{font-size:7px;color:var(--muted);line-height:1.1}.share-row{display:grid;grid-template-columns:70px 1fr 1.2fr;align-items:center;gap:9px;background:linear-gradient(105deg,#050b10,#17242d);border:1px solid var(--gold);border-radius:14px;padding:7px;box-shadow:0 0 14px #d8b5750e}.qr{background:#fff;padding:3px;line-height:0;border:2px solid #f1d7a5;border-radius:8px;box-shadow:0 0 0 2px #99703d,0 0 10px #d9a75880;width:65px;height:65px}.qr img{width:100%;height:100%}.qr-invite{display:flex;flex-direction:column;align-items:flex-start;gap:1px}.qr-invite strong{font-size:15px;letter-spacing:.6px}.qr-invite em{color:var(--gold);font:italic 14px Georgia,serif;white-space:nowrap}.qr-invite button{background:none;border:0;padding:4px 0 0;font-size:8px;color:var(--muted);text-align:left}.promises{border-left:1px solid var(--line);padding-left:9px;display:flex;flex-direction:column;gap:6px;font-size:7px;color:var(--gold)}.future{display:grid;grid-template-columns:1fr 1fr;gap:8px}.future button{border:1px solid #d8b57525;border-radius:5px;background:#ffffff03;font-size:9px;padding:2px;color:#c0c8ce}.future small{font-size:7px;color:#a68b5c;margin-left:3px}footer{display:flex;align-items:center;justify-content:space-around;border-top:1px solid var(--line);font-size:10px;color:var(--gold)}footer a{flex:1;text-align:center;border-right:1px solid var(--line)}footer a:last-child{border:0}dialog{position:fixed;width:min(92vw,520px);max-height:calc(var(--visible-height,100dvh) - 24px);overflow:auto;overscroll-behavior:contain;padding:0;border:1px solid var(--gold);border-radius:14px;background:#0d1e2c;color:#f2eee6}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;background:#102635;position:sticky;top:0;border-bottom:1px solid var(--line)}h2{font:23px Georgia,serif;margin:0}.close{background:none;border:0;font-size:27px;color:var(--gold);width:32px;height:32px}.dialog-body{padding:22px;font-size:14px;line-height:1.7}.dialog-body p,.dialog-body li{color:#b9c3cc}.dialog-body h3{color:var(--gold);font:21px Georgia,serif}.dialog-body li{margin-bottom:12px}.service{border-bottom:1px solid var(--line)}.service summary{display:flex;align-items:center;gap:12px;cursor:pointer;padding:17px 0;list-style:none;font-size:15px}.service summary::-webkit-details-marker{display:none}.num{font-size:10px;color:var(--gold)}.plus{margin-left:auto;font-size:21px;color:var(--gold)}details[open] .plus{transform:rotate(45deg)}.big-qr{width:min(100%,280px);display:block;margin:auto;border:10px solid white;border-radius:7px}.center{text-align:center;overflow-wrap:anywhere}#toast{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--gold);color:#071522;padding:12px 18px;border-radius:8px;max-width:90%;width:max-content;font-size:12px;z-index:5}.compact .card{grid-template-rows:18px minmax(0,1fr) 34px 148px 65px 66px 22px 21px;gap:4px}.compact .hero{padding-bottom:10px}.compact .person h1{font-size:20px}.compact .person p{font-size:8px}.compact .action{font-size:10px;padding:2px 6px}.compact .icon{width:24px;height:24px}.compact .service-mini svg{width:20px;height:20px}.compact .service-strip{gap:4px}.compact .share-row{grid-template-columns:53px 1fr 1.2fr;padding:5px}.compact .qr{width:51px;height:51px}.compact .qr-invite strong{font-size:13px}.compact .qr-invite em{font-size:12px}.compact .promises{gap:4px;font-size:6.5px}@media(min-width:750px) and (min-height:590px){.card{grid-template-rows:24px minmax(0,1fr) 48px 190px 84px 90px 28px 30px;gap:8px}.portrait{max-height:240px}.person h1{font-size:27px}.action{font-size:14px}.service-mini strong{font-size:11px}.service-mini small{font-size:8px}}@media(orientation:landscape) and (max-height:500px){.card{padding:8px 16px;grid-template-columns:minmax(160px,1fr) minmax(320px,1.5fr);grid-template-rows:18px 32px minmax(0,1fr) 64px 60px 22px 20px;gap:4px 20px}.card>:not(.hero){width:100%}.topline{grid-column:1/-1}.hero{grid-column:1;grid-row:2/6}.person{grid-column:2;grid-row:2}.actions{grid-column:2;grid-row:3;min-height:115px!important}.service-strip{grid-column:2;grid-row:4}.share-row{grid-column:2;grid-row:5}.future{grid-column:2;grid-row:6}footer{grid-column:1/-1;grid-row:7}.portrait{height:auto;width:75%;max-width:190px}.crescent{height:60%}}

/* Services inspired by the supplied white-and-gold reference panel. */
.card,.compact .card{grid-template-rows:18px minmax(0,1fr) 34px clamp(124px,22vh,174px) clamp(116px,19vh,146px) 66px 50px 23px;gap:4px}
.service-strip{padding:0;gap:4px}.strip-heading{font-size:7px;letter-spacing:1.5px}
.mini-grid{background:#f8f5ee;border:1px solid #e0cfab;border-radius:12px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr .62fr;padding:5px 8px;gap:0;min-height:0}
.service-mini.service-tile{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:7px;border:0;border-bottom:1px solid #c5aa724f;padding:4px 5px;text-align:left;background:none;color:#14212c}
.service-tile:nth-child(odd):not(.labor){border-right:1px solid #c5aa7270}.service-mini.service-tile svg,.compact .service-mini.service-tile svg{width:27px;height:27px;flex:none;color:#97713d}
.tile-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.service-mini.service-tile strong{font-size:10px;line-height:1.05;color:#122435;text-transform:uppercase;letter-spacing:-.15px}.tile-lines{display:flex;flex-direction:column;gap:1px;color:#33414c;font-size:8px;line-height:1.15}.tile-lines>span:before{content:'• ';color:#97713d}.service-mini.service-tile.labor{grid-column:1/-1;border-bottom:0;justify-content:center;gap:8px;padding:2px}.labor .tile-copy{flex-direction:row;align-items:center;gap:8px}.service-mini.service-tile.labor svg{width:19px;height:19px}.service-mini.service-tile.labor strong{font-size:9px}.labor .tile-lines{font-size:7px}
.future{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:4px}.future button{display:flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(100deg,#c3bba7,#ede8dc);border:1px solid #ae8d56;border-radius:8px;color:#4c4a43;font-size:10px;padding:0 7px}.future button strong{font-weight:600;font-size:10px}.future button small{color:#635f53;font-size:8px;margin:0}.future-icon{font-size:16px;color:#726448}.future button:hover{filter:brightness(1.07)}
.share-row,.compact .share-row{grid-template-columns:53px 1fr 1.2fr;padding:5px;gap:8px}.qr,.compact .qr{width:51px;height:51px}.qr-invite strong{font-size:13px}.qr-invite em{font-size:12px}.promises{font-size:6.8px;gap:4px}.person h1{font-size:21px}.hero{padding-bottom:11px}.portrait{border-width:2px;padding:3px}.action{font-size:11px}.icon{width:25px;height:25px}
@media(max-width:350px){.service-mini.service-tile{gap:4px;padding:3px}.service-mini.service-tile svg{width:22px;height:22px}.service-mini.service-tile strong{font-size:9px}.tile-lines{font-size:7px}.future button small{font-size:7px}.labor .tile-copy{gap:5px}.labor .tile-lines{font-size:6px}.person h1{font-size:19px}}
@media(min-width:750px) and (min-height:590px){.card{grid-template-rows:22px minmax(0,1fr) 42px 174px 146px 72px 56px 26px;gap:5px}.service-mini.service-tile strong{font-size:12px}.tile-lines{font-size:9px}.future button strong{font-size:12px}.future button small{font-size:9px}}
@media(orientation:landscape) and (max-height:500px){.card,.compact .card{grid-template-rows:16px 30px minmax(110px,1fr) 112px 48px 45px 18px;gap:3px 20px}.hero{grid-row:2/7}.actions{grid-row:3}.service-strip{grid-row:4}.share-row{grid-row:5;padding:3px;grid-template-columns:39px 1fr 1.2fr}.qr,.compact .qr{width:39px;height:39px}.future{grid-row:6}.future button strong{font-size:9px}.future button small{font-size:7px}}

/* Fondo proporcionado por el cliente, detrás del logo. */
.hero:before{background:linear-gradient(180deg,rgba(8,23,37,.08),rgba(8,23,37,.23)),url('fondo-baam.png') center 48%/cover no-repeat;opacity:1}

/* V8: single services entry, circular supplied logo, curved image boundary. */
.card,.compact .card{grid-template-columns:minmax(0,1fr);grid-template-rows:18px minmax(0,1fr) 36px clamp(144px,24vh,180px) 36px 78px 26px;gap:6px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 12% 65%,#26313b38,transparent 40%),linear-gradient(135deg,#101b25,#07111a 65%)}
.card> :not(.hero){width:min(94%,500px);grid-column:1;grid-row:auto}
.hero{grid-column:1;grid-row:2;display:block;padding:0;overflow:visible;isolation:isolate;min-height:0}
.hero:before{inset:0 0 46px;z-index:-1;border-bottom:5px solid #dabc79;border-radius:0 0 50% 50% / 0 0 16% 16%;background:linear-gradient(180deg,#08172500,#0817250a),url('fondo-baam.png') center 44%/cover no-repeat;opacity:1;box-shadow:0 2px 0 #806332}
.crescent{display:none}
.portrait{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100px;width:100px;max-height:none;max-width:none;aspect-ratio:1;border:3px solid #debe7c;border-radius:50%;padding:0;background:#091723;box-shadow:0 0 0 2px #8e743e,0 5px 18px #0006;overflow:hidden}
.portrait img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.person h1,.compact .person h1{font-size:22px}.person p,.compact .person p{font-size:9px}
.future{grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:8px}.future button{flex-wrap:wrap;column-gap:4px;row-gap:0;align-content:center;background:#0a151e;border:1px solid var(--line);color:#e2c68f;padding:2px 4px}.future button strong{font-size:10px;color:#e2c68f}.future button small{flex-basis:100%;font-size:7px;color:#a8a79f}.future-icon{font-size:14px;color:var(--gold)}
.share-row,.compact .share-row{grid-template-columns:65px 1fr 1.2fr;padding:6px;gap:9px}.qr,.compact .qr{width:61px;height:61px}.qr-invite strong{font-size:15px}.qr-invite em{font-size:13px}.promises{font-size:7px}
@media(max-height:590px){.card,.compact .card{grid-template-rows:16px minmax(0,1fr) 31px 136px 32px 63px 22px;gap:4px}.portrait{height:76px;width:76px}.hero:before{bottom:34px}.person h1,.compact .person h1{font-size:19px}.share-row,.compact .share-row{grid-template-columns:49px 1fr 1.2fr;padding:4px}.qr,.compact .qr{width:47px;height:47px}.qr-invite strong{font-size:13px}.qr-invite em{font-size:11px}.promises{font-size:6px}.future button strong{font-size:9px}.future button small{font-size:6px}}
@media(min-width:750px) and (min-height:590px){.portrait{width:120px;height:120px}.hero:before{bottom:54px}.card{grid-template-rows:22px minmax(0,1fr) 42px 180px 40px 82px 28px;gap:7px}}
@media(orientation:landscape) and (max-height:500px){.card,.compact .card{grid-template-columns:minmax(140px,1fr) minmax(300px,1.3fr);grid-template-rows:16px 30px minmax(116px,1fr) 32px 56px 20px;padding:5px 12px;gap:3px 14px}.card>.topline{grid-column:1/-1;grid-row:1}.card>.hero{grid-column:1;grid-row:2/6}.card>.person{grid-column:2;grid-row:2}.card>.actions{grid-column:2;grid-row:3}.card>.future{grid-column:2;grid-row:4}.card>.share-row{grid-column:2;grid-row:5}.card>footer{grid-column:1/-1;grid-row:6}.portrait{width:76px;height:76px}.hero:before{bottom:34px}.share-row,.compact .share-row{grid-template-columns:44px 1fr 1.2fr}.qr,.compact .qr{width:42px;height:42px}}

/* QR with a white quiet zone, high contrast and no glare effect. */
.card,.compact .card{grid-template-rows:18px minmax(0,1fr) 36px clamp(144px,24vh,180px) 36px 102px 26px}
.share-row,.compact .share-row{grid-template-columns:88px 1fr 1.2fr;padding:6px;gap:8px}
.qr,.compact .qr{width:88px;height:88px;padding:0;border:0;border-radius:0;box-shadow:none;background:#fff;overflow:visible}
.qr img{display:block;width:100%;height:100%;border:0;border-radius:0;image-rendering:pixelated}
.qr-invite .expand-qr{font-size:8px;color:#ead2a4;padding-top:4px}
.big-qr{width:min(100%,340px);aspect-ratio:1;height:auto;background:white;border:0;border-radius:0;image-rendering:pixelated}
#qrDialog .dialog-body{background:#fff;color:#111;padding:20px}#qrDialog .dialog-body p{color:#222;font-size:12px}
@media(max-height:590px){.card,.compact .card{grid-template-rows:16px minmax(0,1fr) 31px 136px 32px 88px 22px}.share-row,.compact .share-row{grid-template-columns:76px 1fr 1.2fr;padding:4px}.qr,.compact .qr{width:76px;height:76px}}
@media(min-width:750px) and (min-height:590px){.card{grid-template-rows:22px minmax(0,1fr) 42px 180px 40px 102px 28px}}
@media(orientation:landscape) and (max-height:500px){.card,.compact .card{grid-template-rows:16px 30px minmax(116px,1fr) 32px 76px 20px}.share-row,.compact .share-row{grid-template-columns:64px 1fr 1.2fr;padding:4px}.qr,.compact .qr{width:64px;height:64px}}

/* Solo el fondo de la imagen QR en crema; panel y ventana conservan su diseño. */
.qr,.compact .qr,.qr img,.big-qr{background:#FAF0E6}
#qrDialog .dialog-body{background:#0d1e2c;color:#f2eee6}
#qrDialog .dialog-body p{color:#b9c3cc}

/* Esquinas suaves dentro del margen libre del QR. */
.qr,.compact .qr{border-radius:8px;overflow:hidden}
.qr img{border-radius:8px}
.big-qr{border-radius:16px}
