/* La tarjeta personal ocupa el centro de la vista sin encabezado adicional. */
.public-shell>.card-page{
 width:100%;
 max-width:none;
 margin:0;
 padding:40px 28px 36px;
 min-height:calc(100svh - 66px);
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:auto auto;
 justify-items:center;
 align-content:center;
 align-items:start;
 gap:26px;
 text-align:center;
}
.card-page .card-showcase{display:block;width:100%;max-width:760px;min-width:0;margin:0;padding:0}
.card-page .loyalty-stage{
 container-type:inline-size;
 width:100%;
 max-width:none;
 min-width:0;
 aspect-ratio:1.5;
 margin:0;
 flex:none;
 position:relative;
 perspective:1600px;
 animation:float 8s ease-in-out infinite;
}
.loyalty-stage .loyalty-card{width:100%;height:100%;border-radius:clamp(16px,3cqw,25px);transform-style:preserve-3d}
.loyalty-stage .card-face{
 inset:0;
 width:100%;
 height:100%;
 border-radius:clamp(16px,3cqw,25px);
 padding:clamp(14px,4.5cqw,34px);
 backface-visibility:hidden;
 -webkit-backface-visibility:hidden;
}
.loyalty-stage .card-front .card-top .eyebrow{font-size:clamp(9px,1.9cqw,14px);letter-spacing:.27em}
.loyalty-stage .card-edition{font-size:clamp(6px,1.45cqw,10px);letter-spacing:.12em;color:#617066}
.loyalty-stage .card-logo{left:33%;top:9%;width:34%;height:56%;object-fit:contain;filter:none}
.loyalty-stage .front-holder{position:absolute;left:8%;right:8%;top:68%;min-width:0;text-align:center}
.loyalty-stage .front-holder .eyebrow{font-size:clamp(6px,1.35cqw,9px);line-height:1.4;letter-spacing:.2em;color:#617066;margin-bottom:4px}
.loyalty-stage .front-name{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(13px,var(--holder-size,4.4cqw),32px);line-height:1.12;letter-spacing:-.02em;overflow-wrap:anywhere;color:#617066}
.loyalty-stage .card-bottom p{font-size:clamp(12px,2.8cqw,21px);line-height:1.2}
.loyalty-stage .card-chip{width:clamp(30px,8cqw,58px);height:auto;aspect-ratio:1.35;border-radius:clamp(4px,.8cqw,7px)}
.loyalty-stage .card-chip:after{top:32%;height:34%}

/* El reverso reserva el espacio para cuatro filas de sellos y el mensaje. */
.loyalty-stage .loyalty-back{
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:minmax(0,1fr) auto;
 gap:clamp(6px,1.7cqw,13px);
 padding:clamp(12px,3.4cqw,26px) clamp(14px,5cqw,38px);
 justify-content:normal;
 align-content:stretch;
 min-width:0;
 min-height:0;
 text-align:left;
}
.loyalty-stage .card-state{font-family:inherit;font-size:clamp(7px,1.5cqw,10px);font-weight:600;line-height:1.45;letter-spacing:.16em;text-transform:uppercase;color:#617066}
.loyalty-stage .stamp-grid{
 container-type:size;
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:minmax(0,1fr);
 width:100%;
 height:100%;
 min-width:0;
 min-height:0;
 margin:0;
 padding:0;
 flex:none;
 gap:0;
 justify-items:center;
 align-items:center;
}
.stamp-matrix{
 --stamp-gap:clamp(12px,7cqh,28px);
 --stamp-size:min(calc((100cqw - 4 * var(--stamp-gap)) / 5),calc((100cqh - 3 * var(--stamp-gap)) / 4));
 display:grid;
 grid-template-columns:repeat(5,var(--stamp-size));
 grid-template-rows:repeat(4,var(--stamp-size));
 gap:var(--stamp-gap);
 justify-items:center;
 align-items:center;
 width:max-content;
 height:max-content;
 margin:0;
 padding:0;
}
.loyalty-stage .stamp{
 width:100%;
 height:100%;
 max-width:100%;
 max-height:100%;
 min-width:0;
 min-height:0;
 aspect-ratio:1;
 padding:0;
 border-radius:50%;
 display:grid;
 place-items:center;
}
.loyalty-stage .stamp.earned{
 background:transparent;
 border:0;
 box-shadow:none;
 position:relative;
}
.stamp-glass{
 position:relative;
 width:100%;
 height:100%;
 display:grid;
 place-items:center;
 border-radius:50%;
 border:1px solid #fff3c48c;
 border-bottom-color:#ffffff42;
 background:radial-gradient(circle at 29% 10%,#ffffff32,transparent 42%),linear-gradient(145deg,#ffffff10,#ffffff02 60%,#f2d15b09);
 box-shadow:inset 0 1px 1px #ffffffe0,inset 0 -1px 1px #ffffff16,0 4px 8px #0008,0 0 9px #f2d15b1c;
 animation:stamp-piece-float 6s ease-in-out infinite;
 pointer-events:none;
}
.stamp.earned .stamp-glass{opacity:1}
.stamp-glass:before{content:"";position:absolute;inset:4%;border-radius:50%;border:1px solid #DFE8DF;pointer-events:none}
.stamp-glass:after{content:"";position:absolute;top:5%;left:20%;width:34%;height:5%;border-radius:50%;background:linear-gradient(160deg,#ffffff85,transparent);transform:rotate(-24deg);pointer-events:none}
.stamp-logo{position:static;width:86%;height:86%;object-fit:contain;border-radius:50%;filter:none;opacity:1;pointer-events:none;user-select:none}
.loyalty-stage .stamp.earned:focus-visible{outline:2px solid #063D1E;outline-offset:4px}
.loyalty-stage .stamp.pending{background:#ffffff03;border:1px solid #ffffff25;box-shadow:inset 0 1px 2px #0005}
.loyalty-stage .stamp.pending:after{display:none;content:none}
.loyalty-stage .card-state{text-align:center;margin:0;padding:0}
.card-page .card-page-actions{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:760px;margin:0}
.card-page .stamp-detail-hint{font-size:11px;line-height:1.5;color:#617066;margin:0;letter-spacing:0}
.card-page .stamp-detail-hint[hidden]{display:none}
.card-page .reward-banner{max-width:none;margin:4px 0 0}
.card-page #other-card{font-size:12px;padding:8px 12px;margin:0}
.modal .earned-seal{background:transparent;border:0;box-shadow:none}
@keyframes stamp-piece-float{0%,100%{translate:0 -.4px}50%{translate:0 -1.4px}}

@media(max-width:760px){
 .public-shell>.card-page{padding:28px 16px 30px;gap:22px;min-height:calc(100svh - 64px)}
 .card-page .card-showcase{max-width:650px}
 .card-page .loyalty-stage{aspect-ratio:1.4}
 .card-page .card-page-actions{gap:10px}
}
@media(max-width:380px){
 .public-shell>.card-page{padding-inline:12px;gap:20px}
 .loyalty-stage .card-edition{font-size:6px}
 .card-page .stamp-detail-hint{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.card-page .loyalty-stage,.stamp-glass{animation:none}}