/* Permanent identity. Official masters are centralized in one versioned directory.
   Existing variables are semantic UI aliases; logo artwork keeps its original fills. */
:root{--brand-primary:url("assets/brand/gula-cafe-v1/primary.svg");--brand-signature:url("assets/brand/gula-cafe-v1/signature.svg");--brand-wordmark:url("assets/brand/gula-cafe-v1/wordmark.svg");--brand-isotype:url("assets/brand/gula-cafe-v1/isotype.svg");--brand-plate:url("assets/brand/gula-cafe-v1/plate.svg")}
html,body,.site-shell{background:#fff}
.brand{min-width:110px;height:58px}
.brand-logo{display:block;width:116px;height:46px;object-fit:contain;object-position:left center;transform:none}
.topbar-name small{color:var(--blue)}
.desktop-nav a.is-active{border-color:var(--pink)}
.mobile-nav{background:#fff;border-top:1px solid #e0e8f6}
.mobile-nav button.is-active{color:var(--blue)}
.mobile-nav .scan-nav-action{position:relative;z-index:4}
.button-primary{background:var(--blue)}
.button-ghost{background:#fff;border-color:var(--blue)}
.button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
.home-intro-copy{position:relative;padding-block:16px 24px}
.home-intro::before{background:radial-gradient(circle at 24% 27%,#cdddff 0 15px,transparent 16px),radial-gradient(circle at 84% 70%,var(--blue) 0 8px,transparent 9px),linear-gradient(145deg,#fff,#ffe6f0)}
.home-intro-copy>.eyebrow{display:inline-flex;padding:7px 12px;border-radius:999px;background:#edf4ff;color:var(--blue)}
.home-intro-copy h1{color:var(--blue)}
.home-intro-copy h1 span{color:var(--pink)}
.home-hours{background:#fff;border:1px solid #dce7fa;box-shadow:0 8px 24px rgba(30,91,215,.06)}
.home-hours-mark{background:#ffe6f0;color:var(--blue)}
.daily-promo-ring.daily-promo-frame{background:linear-gradient(145deg,var(--blue),var(--pink));box-shadow:0 12px 28px rgba(30,91,215,.16),0 0 0 5px #fff}
.daily-promo-core.daily-promo-surface{background:#fff;border-color:#fff}
.daily-promo-core.daily-promo-surface video{background:transparent}
.daily-promo-core.daily-promo-surface #daily-promo-placeholder{padding:28px;object-fit:contain}
.featured-home-card{position:relative;border-color:#dce6f7;box-shadow:0 10px 28px rgba(30,91,215,.07)}
.featured-home-copy{margin:12px 0 22px}
.featured-card-body{background:#fff}
.featured-card-photo{background:radial-gradient(circle at 12% 18%,#dce9ff 0 9px,transparent 10px),radial-gradient(circle at 88% 82%,#ffd7e8 0 14px,transparent 15px),#fff}
.featured-card-photo::before{background:linear-gradient(150deg,transparent,#f2f7ff)}
.featured-card-photo::after{border-color:var(--blue);opacity:.2}
.featured-card-photo.is-empty::before{content:"";width:64px;height:64px;inset:auto;background:var(--brand-isotype) center/contain no-repeat}
.featured-card-price,.menu-pill{background:#ffe6f0;color:var(--ink)}
.visit-banner{background:radial-gradient(circle at 97% 8%,rgba(255,90,158,.5) 0 75px,transparent 76px),radial-gradient(circle at 90% 100%,rgba(255,255,255,.12) 0 105px,transparent 106px),var(--blue);border:1px solid var(--blue)}
.visit-banner .button{background:#fff;color:var(--blue)}
/* Community retains its original renderer, scroll root and September photo fix. */
#comunidad{position:relative;isolation:isolate;background:#fff}
#comunidad .post-user{background:#f7faff;border-color:#d8e5f9}
#comunidad .post-meta{min-width:0;flex-wrap:wrap}
#comunidad .post-meta>span{flex:1 1 120px;min-width:0;overflow-wrap:anywhere}
#comunidad .post-author-avatar{flex:0 0 31px}
#comunidad :is(.post-like,.post-delete){flex:0 0 auto;min-height:44px}
#comunidad .post>p{overflow-wrap:anywhere}
#comunidad .user-visit-photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center;transform:none}
#comunidad .community-photo-fallback{position:relative;aspect-ratio:9/16}
.community-member-count{border-color:#d7e5fa;background:#fff;box-shadow:4px 4px 0 #ffe0ec}
.community-member-count-mark{font-size:0;background:var(--brand-isotype) center/contain no-repeat;box-shadow:none;animation:none}
.community-member-count strong{color:var(--blue)}
.community-member-count small{color:#53617b}
/* Real .done / .gift classes alone control the eight bubble states. */
.loyalty-card{position:relative;background:#fff;color:var(--ink);border:2px solid var(--blue);box-shadow:8px 9px 0 #ffe0ec}
.loyalty-card::after{content:none}
.club-brand{display:flex;align-items:center;gap:10px}
.club-brand img{display:block;width:94px;height:47px;object-fit:contain}
.club-brand small{color:var(--blue);font-size:.72rem;letter-spacing:.14em}
.loyalty-card h2{color:var(--blue);margin-top:30px}
.loyalty-card h2+p{color:#53617b}
.stamp{border:2px solid #b7cef5;background:#fff;color:var(--blue);box-shadow:inset 0 -4px 0 #edf4ff}
.stamp.done{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:inset 0 -5px 0 rgba(24,54,92,.18)}
.stamp.done::before{content:"";position:absolute;left:19%;top:13%;width:24%;height:13%;border-radius:50%;background:rgba(255,255,255,.65);transform:rotate(-28deg)}
.stamp.gift{border-color:var(--pink);background:#ffe6f0;color:var(--blue);box-shadow:inset 0 -4px 0 #ffd2e4}
.stamp.gift.done{background:var(--pink);color:#18365c}
.progress{background:#edf3fd}.progress span{background:linear-gradient(90deg,var(--blue),var(--pink))}
.progress-copy{color:var(--ink)}
.reward-unlocked{background:var(--blue);border-color:var(--pink);color:#fff;box-shadow:4px 4px 0 #ffe0ec}
.reward-unlocked strong{color:#fff}
.reward-unlocked .button{background:#fff;color:var(--blue)}
.visit-cooldown{background:#f4f8ff;border-color:#dce6f7}
.visit-cooldown strong{color:var(--blue)}
.how-it-works article,.club-terms,.profile-card,.notification-card{background:#fff;border-color:#dce6f7}
.how-it-works span{background:#ffe6f0;color:var(--blue)}
.profile-header{background:#fff;border-bottom:1px solid #dce6f7}
.profile-header .avatar-large{background:#edf4ff}
.notification-mark{background:var(--blue);color:#fff}
.menu-dialog,.credential-dialog,.install-dialog,.avatar-dialog,.share-dialog{background:#fff}
/* Preserve the existing close buttons, with a dedicated gutter at every scroll depth. */
:is(#menu-dialog,#reward-catalog-dialog){isolation:isolate;padding-right:68px}
:is(#menu-dialog,#reward-catalog-dialog)>.dialog-close{position:sticky;float:right;top:6px;right:auto;z-index:6;display:grid;place-items:center;width:44px;height:44px;margin:-14px -44px 0 0;border:1px solid #dce6f7;border-radius:50%;background:#fff;color:var(--blue);box-shadow:0 3px 0 #ffe0ec;line-height:1}
:is(#menu-dialog,#reward-catalog-dialog)>:not(.dialog-close){position:relative;z-index:1}
.reward-catalog-media{background:radial-gradient(circle at 14% 21%,#ffd6e7 0 8px,transparent 9px),radial-gradient(circle at 88% 75%,#dce9ff 0 9px,transparent 10px),#fff}
.reward-catalog-media::before{background:#f0f6ff}
.reward-catalog-card[data-category="bebidas"] .reward-catalog-media,.reward-catalog-card[data-category="crepa"] .reward-catalog-media{background:radial-gradient(circle at 15% 18%,#ffe0ec 0 8px,transparent 9px),#fff}
.reward-catalog-card[data-category="bebidas"] .reward-catalog-media::before{background:#e7f0ff}
.reward-catalog-card[data-category="crepa"] .reward-catalog-media::before{background:#ffe6f0}
.reward-catalog-card[data-category="cupones"] .reward-catalog-photo{width:96%;height:96%;padding:0;filter:none;transform:none}
.reward-catalog-brand{background:#fff;border-color:#d1dff4}
.reward-catalog-brand img{object-fit:contain}
.reward-cost{background:#ffe6f0;color:var(--ink)}
.reward-catalog-photo,.reward-catalog-card[data-category="bebidas"] .reward-catalog-photo,.reward-catalog-card[data-category="crepa"] .reward-catalog-photo{background:transparent}
.reward-catalog-placeholder{background:linear-gradient(145deg,#fff,#ffe6f0)}
.catalog-photo-workspace{background:#fff}
.admin-promo-card{background:radial-gradient(circle at 91% 13%,#ffe0ec 0 38px,transparent 39px),radial-gradient(circle at 7% 88%,#e3eeff 0 44px,transparent 45px),#fff}
#gula-game .gm-welcome{background:rgba(255,255,255,.97)}
@media(min-width:801px){#comunidad .page-heading>div{max-width:72%}}
@media(max-width:800px){
 html{scroll-padding-top:84px;scroll-padding-bottom:140px}
 #open-menu{scroll-margin-top:84px;scroll-margin-bottom:140px}
 .brand-logo{width:104px;height:40px}
 #comunidad{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:12px;padding:12px 12px calc(82px + env(safe-area-inset-bottom));background:#fff}
 #comunidad.is-visible{display:grid}
 #comunidad>.page-heading{position:relative;inset:auto;width:100%;max-width:none;min-width:0;z-index:4}
 #comunidad .community-member-count{position:relative;inset:auto;width:100%;max-width:none;min-width:0;margin:0;background:#fff;border-color:#c8daf8;box-shadow:3px 3px 0 #ffe0ec}
 #comunidad #share-visit{background:var(--blue);border-color:var(--blue);box-shadow:0 5px 15px rgba(30,91,215,.12)}
 #comunidad .feed-grid{position:relative;z-index:1;grid-column:1/-1;min-height:0;background:#fff;scroll-snap-type:y mandatory}
 #comunidad .post{display:flex;flex-direction:column;height:100%;min-height:0;margin:0;padding:0 0 10px;border:1px solid #dce7fa;border-radius:16px;background:#fff;scroll-snap-align:start;scroll-snap-stop:always}
 #comunidad .post:after{content:none}
 #comunidad .community-photo-fallback{flex:1 1 auto;height:auto;width:100%;max-width:100%;min-height:0;aspect-ratio:auto;margin:0;border-radius:14px 14px 0 0}
 #comunidad .community-photo-fallback.has-image:before{content:none}
 #comunidad .community-photo-fallback.has-image{background:#f4f8ff}
 #comunidad .post-meta{position:relative;inset:auto;flex:0 0 auto;gap:8px;margin:8px 14px 6px;color:var(--ink);text-shadow:none}
 #comunidad .post-delete{color:var(--blue);text-shadow:none}
 #comunidad .post>p{position:relative;inset:auto;display:-webkit-box;flex:0 0 auto;margin:0 14px;overflow:hidden;overflow-wrap:anywhere;-webkit-line-clamp:2;color:var(--ink);text-shadow:none}
 #comunidad .community-empty{margin:12px 0;background:#f4f8ff;color:var(--ink);border-color:#b7cef5}
 .loyalty-card .stamps{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 .loyalty-card .stamp{width:min(100%,72px);justify-self:center;aspect-ratio:1;font-size:1rem}
 .daily-promo-core.daily-promo-surface #daily-promo-placeholder{padding:22px}
}