/* Original interactive product scene; all example state stays in the browser. */
.celaje-studio { --play-ease:cubic-bezier(.2,.8,.2,1); --play-hero-accent:#0069b5; overflow-x:clip; }
.celaje-studio .celaje-live-scene{min-height:710px;display:flex;justify-content:center;align-items:flex-start;padding:12px 0 24px}
.celaje-live-window{position:relative;z-index:3;width:620px;max-width:100%;border:1px solid #5984b85c;border-radius:25px;overflow:hidden;background:#1c1c21;box-shadow:0 30px 80px -30px #0a84ff35,0 0 0 5px #699cda0b;text-align:left}
.celaje-live-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 19px;border-bottom:1px solid #ffffff17;color:#aab6cb;font-size:10px;background:#161b26}
.celaje-live-bar>span:first-child{letter-spacing:3px;color:#708caf}.celaje-live-bar a{color:#b8d9ff;font-size:11px;white-space:nowrap}
.celaje-live-frame{display:block;width:100%;height:640px;border:0;color-scheme:normal;background:#0b0b10}
.celaje-live-scene .side-client{left:0;top:75px}.celaje-live-scene .side-owner{right:0;top:300px}
@media(max-width:1100px){.celaje-live-scene .celaje-side-card{display:none}}
@media(max-width:750px){.celaje-studio .celaje-live-scene{min-height:0;padding:5px 0 12px;margin-top:24px}.celaje-live-window{border-radius:20px}.celaje-live-bar{padding:11px 12px;font-size:9px}.celaje-live-bar>span:first-child{display:none}.celaje-live-frame{height:620px}}
.celaje-studio main { max-width:1280px; padding-inline:24px; }
.celaje-studio .nav { max-width:1232px; border-radius:16px; box-shadow:none; border-color:var(--line); }
.celaje-studio .celaje-menu-toggle { display:none; }
.celaje-studio .hero { display:block; min-height:0; padding:32px 0 30px; text-align:center; }
.celaje-studio .hero-copy { max-width:none; }
.celaje-studio .hero h1 { font-size:clamp(65px,5.5vw,86px); line-height:1; letter-spacing:-.07em; font-weight:650; margin:20px 0; }
.celaje-studio .hero h1 em { color:var(--play-hero-accent); }
.celaje-studio .hero .lead { margin:0 auto; max-width:57ch; font-size:16px; line-height:1.7; }
.celaje-studio .hero-actions { justify-content:center; margin-top:25px; }
.celaje-studio .hero-note { margin-top:15px; }
.celaje-studio .product-scene { margin:24px auto 0; min-height:415px; max-width:1120px; perspective:1400px; }
.celaje-scene-ground { position:absolute; z-index:-1; inset:12% 2% -2%; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse,#8ebfec30,transparent 62%); }
.celaje-scene-ground::before { content:""; position:absolute; inset:0; background:linear-gradient(#63795316 1px,transparent 1px),linear-gradient(90deg,#63795316 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(ellipse,black,transparent 68%); transform:perspective(600px) rotateX(58deg); }
.celaje-preview { position:relative; z-index:3; width:540px; max-width:100%; padding:0 25px 15px; border:1px solid #cdd7c7; border-radius:23px; background:#fffefb; color:#1c3931; box-shadow:0 30px 65px -40px #163b2b99; transform:rotateX(var(--play-pitch,3deg)) rotateY(var(--play-yaw,-5deg)); transition:transform .6s var(--play-ease),box-shadow .4s; text-align:left; }
.celaje-window-bar { display:flex; align-items:center; justify-content:space-between; margin:0 -25px; padding:12px 23px; border-bottom:1px solid #e3e8dd; color:#687563; font-size:9px; }
.celaje-window-bar > span:first-child { color:#b9c6ad; letter-spacing:3px; font-size:7px; }
.celaje-play-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:18px 0 16px; border-bottom:1px solid #e8ebdf; }
.celaje-studio .celaje-play-tabs button { background:transparent; box-shadow:none; color:#66775e; border:1px solid transparent; border-radius:9px; min-height:40px; padding:10px 8px; font-size:10px; white-space:nowrap; }
.celaje-play-tabs button b { font-size:9px; margin-right:8px; opacity:.75; }
.celaje-studio .celaje-play-tabs button[aria-pressed="true"] { background:#e9efdf; color:#244532; border-color:#dce5cf; }
.celaje-play-panel { position:relative; min-height:250px; padding-top:21px; }
.celaje-play-panel .eyebrow { color:#58725f; font-size:8px; }
.celaje-play-panel h2 { color:#1c3931; font-size:29px; margin:8px 0 20px; line-height:1.1; letter-spacing:-.055em; }
.play-services { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.celaje-studio .play-services button { display:flex; align-items:center; gap:10px; min-height:88px; text-align:left; padding:14px; color:#1c3931; background:#f7f8f1; border:1px solid #e0e5d7; box-shadow:none; border-radius:12px; }
.celaje-studio .play-services button[aria-pressed="true"] { background:#edf3e2; border-color:#75975c; }
.play-services strong,.play-services small { display:block; }
.play-services strong { font-size:12px; }.play-services small { color:#65735b; font-size:10px; margin-top:6px; }
.play-service-icon { color:#466d3d; font-size:22px; }
.play-check { margin-left:auto; opacity:0; color:#355c37; }.play-services [aria-pressed="true"] .play-check { opacity:1; }
.celaje-studio .play-next { justify-content:space-between; width:100%; min-height:44px; margin-top:19px; padding:12px 17px; font-size:12px; color:#fff; background:#284d38; box-shadow:none; border-radius:10px; }
.celaje-studio .play-next:disabled { opacity:1; background:#e8f0db; color:#355b35; }
.play-days,.play-hours { display:flex; gap:8px; }
.celaje-studio .play-days button,.celaje-studio .play-hours button { min-height:39px; padding:9px 17px; color:#617158; border:1px solid #dfe5d6; border-radius:9px; background:#f7f8f0; box-shadow:none; font-size:11px; }
.celaje-studio .play-days button[aria-pressed="true"],.celaje-studio .play-hours button[aria-pressed="true"] { color:#fff; background:#284d38; border-color:#284d38; }
.play-hours { margin-top:12px; }.celaje-studio .play-hours button { flex:1; padding-inline:7px; }
.celaje-studio .play-hours button:disabled { color:#737e6e; background:#f1f2eb; text-decoration:line-through; opacity:.6; }
.play-availability { color:#637258; font-size:10px; margin:12px 0 0; }
.play-request { display:flex; align-items:center; gap:12px; background:#f4f5eb; border:1px solid #e0e6d6; border-radius:12px; padding:17px; }
.play-request-avatar { display:grid; place-items:center; width:35px; height:35px; border-radius:11px; flex:none; background:#e5ebd8; color:#395d36; font-size:14px; }
.play-request strong { display:block; font-size:12px; }.play-request-summary { display:block; color:#66775c; font-size:10px; margin-top:5px; }
.play-request-state { margin-left:auto; color:#795620; background:#ede4cc; font-size:8px; border-radius:20px; padding:5px 8px; white-space:nowrap; }
.play-request-help { font-size:11px; line-height:1.6; color:#65775d; margin:16px 0 0; }
.celaje-studio .play-reset { display:block; padding:7px 0; min-height:32px; margin:4px auto 0; border:0; background:none; color:#38583c; box-shadow:none; font-size:10px; }
.celaje-simulation-note { text-align:center; font-size:8px; color:#6b7761; padding-top:11px; border-top:1px solid #e8ebdf; margin:6px 0 0; }
.celaje-side-card { position:absolute; z-index:1; width:225px; min-height:205px; padding:22px; border:1px solid #cdddf1; border-radius:18px; background:#e7f0fc; color:#1c3931; text-align:left; box-shadow:0 20px 45px -35px #24493199; }
.side-client { left:0; top:42px; rotate:-8deg; }
.side-owner { right:0; top:122px; rotate:7deg; background:#eeebf7; border-color:#dcd5ed; }
.side-card-symbol { display:grid; place-items:center; width:34px; height:34px; font-size:22px; border-radius:11px; color:#355c39; background:#fff9; margin-bottom:17px; }
.celaje-side-card .eyebrow { display:block; font-size:7px; letter-spacing:.11em; color:#5d7053; }
.celaje-side-card strong { display:block; margin-top:10px; font-size:22px; line-height:1.15; letter-spacing:-.04em; color:#20334e; }
.celaje-side-card p { margin:13px 0 0; font-size:11px; line-height:1.6; color:#617256; }.side-card-line { display:block; margin-top:20px; width:70%; height:3px; border-radius:4px; background:#b5c697; }
.celaje-play-feedback { min-height:24px; margin:16px auto 0; font-size:11px; color:var(--muted); max-width:65ch; }
.celaje-playground.is-confirmed .play-request { background:#eaf2de; border-color:#a7c485; }
.celaje-playground.is-confirmed .play-request-state { background:#d6e8bc; color:#375e27; }
.celaje-playground.is-confirmed .side-owner { background:#e4edd4; border-color:#c2d5a8; }
.play-celebration { position:absolute; inset:0; pointer-events:none; overflow:clip; border-radius:12px; }
.play-celebration i { position:absolute; left:50%; top:60%; width:5px; height:8px; background:#668e45; opacity:0; }
.is-confirmed .play-celebration i { animation:play-confetti .8s var(--play-ease) both; --confetti-x:-80px; --confetti-y:-130px; }
.play-celebration i:nth-child(2) { --confetti-x:80px!important; --confetti-y:-150px!important; background:#c1ac68; }.play-celebration i:nth-child(3) { --confetti-x:-160px!important; --confetti-y:-60px!important; }.play-celebration i:nth-child(4) { --confetti-x:150px!important; --confetti-y:-90px!important; background:#ba865d; }.play-celebration i:nth-child(5) { --confetti-x:-30px!important; --confetti-y:-170px!important; background:#ba865d; }.play-celebration i:nth-child(6) { --confetti-x:35px!important; --confetti-y:-190px!important; }
@keyframes play-confetti { 0% { opacity:0; transform:translate(0,0); } 15% { opacity:1; } 100% { opacity:0; transform:translate(var(--confetti-x),var(--confetti-y)) rotate(150deg); } }
.celaje-studio .value-strip { margin-top:30px; padding:32px 0; }.celaje-studio .value-strip strong { font-size:19px; }
.celaje-studio .section { padding:85px 0; }
.celaje-studio .section-heading { max-width:800px; }
.celaje-studio .section-heading h2,.celaje-studio .faq-section h2 { font-size:clamp(40px,4vw,64px); letter-spacing:-.06em; line-height:1.08; }
.celaje-studio .steps { gap:38px; }.celaje-studio .step-art { height:165px; border-radius:19px; transition:translate .3s,box-shadow .3s; }
.celaje-studio .steps article:hover .step-art { translate:0 -6px; box-shadow:0 20px 40px -25px #37532c55; }
.celaje-studio .steps h3 { font-size:23px; }.celaje-studio .steps p { font-size:14px; }
.celaje-studio .step-number { font-size:16px; position:relative; }
.celaje-studio .step-number::after { content:""; position:absolute; bottom:0; left:0; height:2px; width:100%; transform-origin:left; transform:scaleX(var(--workflow-progress,0)); background:#7d9a60; }
.celaje-studio .feature-bento { gap:23px; }.celaje-studio .detail-panel { transition:border-color .3s,translate .3s; }.celaje-studio .detail-panel:hover { translate:0 -4px; border-color:#a1b58a; }
.celaje-studio .focus-panel { overflow:clip; }
.celaje-studio .pricing-grid { gap:24px; }.celaje-studio .pricing-grid .card { border-radius:22px; padding:35px; }

/* A polished blue subscription and champagne finish for the separate onsite service. */
body.celaje-studio .pricing-grid .price-premium {
  --premium-glow:#5d9dee35; --premium-edge:#84b7ef; --premium-shine:#e7f3ff;
  --premium-ink:#183e67; --premium-accent:#2468a5; --premium-base:#f8fbff; --premium-bottom:#edf4fd;
  position:relative; isolation:isolate; overflow:hidden; border:1px solid transparent;
  background:radial-gradient(ellipse at 90% 0%,var(--premium-glow),transparent 62%) padding-box,linear-gradient(145deg,var(--premium-base),var(--premium-bottom)) padding-box,linear-gradient(125deg,var(--premium-edge),var(--premium-shine) 38%,var(--premium-edge) 64%,var(--premium-shine)) border-box;
  color:var(--premium-ink);
  box-shadow:0 18px 48px -25px var(--premium-glow),0 0 28px -15px var(--premium-edge),inset 0 1px 0 var(--premium-shine);
  transition:box-shadow .35s,transform .35s;
}
body.celaje-studio .pricing-grid .price-premium-gold { --premium-glow:#c59a4538; --premium-edge:#cfb578; --premium-shine:#fff1c9; --premium-ink:#46371c; --premium-accent:#89651d; --premium-base:#fffbf1; --premium-bottom:#f6efdf; }
body.celaje-studio .pricing-grid .price-premium > :not(.premium-glint) { position:relative; z-index:1; }
body.celaje-studio .pricing-grid .price-premium .premium-emblem { position:absolute; top:28px; right:28px; width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--premium-edge); border-radius:9px; color:var(--premium-accent); background:linear-gradient(145deg,var(--premium-shine),var(--premium-base)); box-shadow:0 0 22px -7px var(--premium-edge); font-size:20px; }
body.celaje-studio .pricing-grid .price-premium .eyebrow { padding-right:35px; color:var(--premium-accent); }
body.celaje-studio .pricing-grid .price-premium h3,body.celaje-studio .pricing-grid .price-premium .price,body.celaje-studio .pricing-grid .price-premium .price-subtitle { color:var(--premium-ink); }
body.celaje-studio .pricing-grid .price-premium .price { text-shadow:0 0 35px var(--premium-glow); }
body.celaje-studio .pricing-grid .price-premium .price-subtitle { border-color:color-mix(in srgb,var(--premium-edge) 35%,transparent); }
body.celaje-studio .pricing-grid .price-premium .feature-list li::before { color:var(--premium-accent); }
body.celaje-studio .pricing-grid .price-premium .text-link { color:var(--premium-accent); border:1px solid var(--premium-edge); background:color-mix(in srgb,var(--premium-shine) 22%,transparent); border-radius:10px; padding:12px 16px; }
body.celaje-studio .pricing-grid .price-premium:hover,body.celaje-studio .pricing-grid .price-premium:focus-within { box-shadow:0 24px 55px -22px var(--premium-glow),0 0 36px -12px var(--premium-edge),inset 0 1px 0 var(--premium-shine); }
body.celaje-studio .pricing-grid .price-premium > .premium-glint { position:absolute; z-index:0; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 32%,color-mix(in srgb,var(--premium-shine) 14%,transparent) 49%,transparent 66%); transform:translateX(-140%); }
.celaje-studio .price-premium.is-visible > .premium-glint { animation:celaje-price-glint 1.6s .25s ease-out both; }
@keyframes celaje-price-glint { to { transform:translateX(140%); } }
@media(prefers-color-scheme:dark) {
  body.celaje-studio .pricing-grid .price-premium { --premium-glow:#3c7cc657; --premium-edge:#638ab9; --premium-shine:#b7d9ff; --premium-ink:#f1f6ff; --premium-accent:#a6ceff; --premium-base:#18243a; --premium-bottom:#101725; }
  body.celaje-studio .pricing-grid .price-premium-gold { --premium-glow:#ae874c4d; --premium-edge:#b9a06a; --premium-shine:#f4e4bc; --premium-ink:#fff6df; --premium-accent:#e9cd8d; --premium-base:#29251f; --premium-bottom:#191817; }
}
@media(prefers-reduced-motion:reduce) { body.celaje-studio .pricing-grid .price-premium { transition:none; }.celaje-studio .price-premium > .premium-glint { display:none; } }
.celaje-studio .faq-list details { padding:23px 0; }.celaje-studio .faq-list summary { font-size:15px; }.celaje-studio .faq-list details[open] { background:#e8eedc66; padding-inline:17px; border-radius:12px; }
.celaje-studio .closing-panel { padding:85px 28px; }.celaje-studio .closing-panel h2 { font-size:clamp(48px,5.2vw,80px); }
.celaje-studio button:active,.celaje-studio a.button:active { transform:scale(.97); }
.celaje-studio .nav::after { content:""; position:absolute; bottom:0; left:22px; right:22px; height:2px; background:#698a50; transform:scaleX(var(--play-read,0)); transform-origin:left; pointer-events:none; }
/* Scope overrides to this example; the shared app stylesheet forces blue on every button. */
body.celaje-studio .celaje-preview button { box-shadow:none; }
body.celaje-studio #contenido .celaje-play-tabs button { background:#f4f6fb!important; color:#52667f; box-shadow:none; }
body.celaje-studio #contenido .celaje-play-tabs button[aria-pressed="true"] { background:#e3effe!important; color:#14588a; border-color:#a6c9ef; }
body.celaje-studio #contenido .play-services button { background:#f6f8fc!important; color:#20334e; border-color:#dce5ef; box-shadow:none; }
body.celaje-studio #contenido .play-services button[aria-pressed="true"] { background:#eaf3ff!important; border-color:#6a9fd5; }
body.celaje-studio .play-services small { color:#586b83; }.celaje-studio .play-service-icon,.celaje-studio .play-check { color:#1b689f; }
body.celaje-studio #contenido .play-days button,body.celaje-studio #contenido .play-hours button { background:#f5f7fb!important; color:#52667f; border-color:#dce5ef; box-shadow:none; }
body.celaje-studio #contenido .play-days button[aria-pressed="true"],body.celaje-studio #contenido .play-hours button[aria-pressed="true"] { background:#0869ba!important; color:#fff; border-color:#0869ba; }
body.celaje-studio #contenido .play-hours button:disabled { background:#f0f2f6!important; color:#6a7485; }
body.celaje-studio #contenido .play-next { background:#0869ba!important; color:#fff; box-shadow:none; }
body.celaje-studio #contenido .play-next:disabled { background:#e5f0fa!important; color:#245981; }
body.celaje-studio #contenido .play-reset { background:transparent!important; color:#1b689f; box-shadow:none; }
body.celaje-studio .celaje-preview .eyebrow { color:#49698b; }
body.celaje-studio .side-card-symbol { color:#24628f; }.celaje-studio .side-card-line { background:#a6bfdf; }
@media(prefers-color-scheme:dark) { body.celaje-studio { --play-hero-accent:#68b8ff; }.celaje-studio .faq-list details[open] { background:#ffffff06; } }
@media(max-width:1100px) {
  .celaje-side-card { width:190px; padding:20px; }.celaje-preview { width:500px; }.side-client { left:0; }.side-owner { right:0; }.celaje-side-card strong { font-size:19px; }
}
@media(max-width:900px) {
  .celaje-side-card { width:155px; padding:17px; min-height:180px; }.celaje-side-card strong { font-size:17px; }.celaje-side-card p { font-size:10px; }
  .celaje-preview { width:470px; }.side-client { top:20px; left:-8px; }.side-owner { top:160px; right:-8px; }
}
@media(max-width:750px) {
  .celaje-studio .nav { flex-wrap:wrap; }
  .celaje-studio .celaje-menu-toggle { display:inline-flex; min-height:40px; border-radius:10px; padding:9px 13px; font-size:12px; }
  .celaje-studio .nav .row { display:none; flex:1 0 100%; flex-direction:column; align-items:stretch; gap:6px; padding-top:8px; }
  .celaje-studio .nav.menu-open .row { display:flex; }
  .celaje-studio .nav .nav-link { display:block; padding:12px; text-align:left; }
  .celaje-studio main { padding-inline:20px; }.celaje-studio .hero { padding-top:47px; }
  .celaje-studio .hero h1 { font-size:clamp(45px,8.2vw,66px); letter-spacing:-.06em; line-height:1.05; }
  .celaje-studio .hero .lead { font-size:15px; }.celaje-studio .hero-actions { gap:14px; }
  .celaje-studio .hero-actions .button { padding:14px 18px; font-size:12px; }
  .celaje-studio .product-scene { min-height:0; margin-top:28px; max-width:none; display:block; }
  .celaje-preview { width:100%; transform:none; border-radius:18px; padding:0 18px 14px; }
  .celaje-side-card { display:none; }.celaje-window-bar { margin-inline:-18px; padding:12px 17px; }
  .celaje-play-panel { min-height:280px; padding-top:24px; }.celaje-play-panel h2 { font-size:27px; margin-bottom:21px; }
  .celaje-studio .celaje-play-tabs button { padding:9px 3px; font-size:9px; }.celaje-play-tabs button b { font-size:8px; margin-right:4px; }
  .celaje-studio .play-services button { padding:12px 9px; gap:8px; }.play-service-icon { font-size:18px; }.play-services strong { font-size:11px; }.play-services small { font-size:9px; }.play-check { font-size:10px; }
  .play-request { padding:14px 11px; gap:9px; flex-wrap:wrap; }.play-request strong { font-size:10px; }.play-request-summary { font-size:9px; }.play-request-state { margin-left:auto; }
  .celaje-simulation-note { font-size:7px; }.celaje-play-feedback { font-size:10px; padding-inline:15px; }
  .celaje-studio .value-strip { padding:24px 0; }.celaje-studio .value-strip strong { font-size:13px; }
  .celaje-studio .section { padding:55px 0; }.celaje-studio .section-heading h2,.celaje-studio .faq-section h2 { font-size:40px; }
  .celaje-studio .steps { gap:35px; }.celaje-studio .pricing-grid .card { padding:30px; }.celaje-studio .closing-panel { padding:60px 22px; }
}
@media(max-width:370px) {
  .celaje-studio main { padding-inline:16px; }.celaje-studio .hero h1 { font-size:42px; }.celaje-studio .hero-actions { flex-direction:column; align-items:center; }
  .play-service-icon { display:none; }.play-request-state { margin-left:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .celaje-preview { transform:none; }.celaje-studio .play-celebration { display:none; }
  .celaje-studio .steps article:hover .step-art,.celaje-studio .detail-panel:hover { translate:none; }
}
@media print { .celaje-playground,.celaje-play-feedback { display:none; }.celaje-studio .hero h1 { font-size:50px; } }