/* The planner is a tactile control surface beside a miniature event set. */
.ui-icon { width:20px; height:20px; display:block; flex-shrink:0 }
.ui-icon.back { transform:rotate(180deg) }.ui-icon.down { transform:rotate(90deg) }
.button>span[aria-hidden],.nav-cta>span { display:grid; place-items:center; width:30px; height:30px; border:1px solid currentColor; border-radius:50% }
.explore-tag>span { display:grid; place-items:center; width:36px; height:36px; border:1px solid #fff6; border-radius:50% }
.patio-note .text-button { display:flex; align-items:center; gap:12px }.button .whatsapp-icon { width:26px; height:28px; filter:invert(1) }
.submit-button { background:#183f32; border-radius:12px; padding:20px 22px }.submit-button:hover { background:#245640 }
.builder-layout { grid-template-columns:1fr 1.06fr; gap:60px }
.builder-heading h2 { max-width:550px }.builder-heading>p { font-size:16px }
.event-form legend { font-size:19px; letter-spacing:-.4px }.step { border:0; background:#e8e4dd; width:32px; height:32px; font-size:12px }
.field-caption { display:block; color:#6b6660; font-size:12px; margin:0 0 12px }.occasion-options { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:25px }
.occasion-options button { position:relative; display:flex; align-items:center; gap:10px; text-align:left; padding:14px 12px; border:1px solid #ded9d0; border-radius:12px; background:#fffdfa; font-size:12px; min-height:60px; transition:background .25s,border-color .25s,box-shadow .25s }
.occasion-options button:last-child { grid-column:1/-1 }.occasion-mark svg { width:24px; height:24px }.occasion-tick { margin-left:auto; width:18px; opacity:0 }.occasion-tick svg { width:18px }
.occasion-options button[aria-pressed=true] { background:var(--accent); border-color:#8f806b; box-shadow:inset 0 0 0 1px #fff8 }
.occasion-options button[aria-pressed=true] .occasion-tick { opacity:1 }
.space-choices { gap:12px }.space-choices button { border-radius:16px; background:linear-gradient(145deg,#fff,#eeebe5); border-color:#ddd6cb; position:relative; box-shadow:0 3px 0 #ddd6cb50; min-height:105px }
.space-choices button[aria-pressed=true] { background:#242328; color:#f5efe5; border:1px solid #242328; padding:19px 10px; box-shadow:0 8px 20px #201b1814 }.space-choices button[aria-pressed=true] small { color:#cfc8bb }
.guest-control { margin-top:28px }.guest-control output { font-size:44px }.range-captions { color:#736b61 }
input[type=range] { appearance:none; background:transparent; margin:9px 0; height:32px }
input[type=range]::-webkit-slider-runnable-track { height:5px; border-radius:6px; background:linear-gradient(90deg,#302c33 var(--range-progress,50%),#ded8ce var(--range-progress,50%)) }
input[type=range]::-webkit-slider-thumb { appearance:none; margin-top:-10px; width:25px; height:25px; border:5px solid #fffefa; background:#35303a; border-radius:50%; box-shadow:0 1px 7px #0004; cursor:grab }
input[type=range]::-moz-range-track { height:5px; background:#ded8ce; border-radius:6px }input[type=range]::-moz-range-progress { height:5px; background:#302c33 }input[type=range]::-moz-range-thumb { width:25px; height:25px; box-sizing:border-box; border:5px solid #fffefa; border-radius:50%; background:#35303a; box-shadow:0 1px 7px #0004; cursor:grab }
.shift-picker { display:flex; background:#e9e5df; border-radius:16px; padding:5px; gap:5px; margin-bottom:18px }
.shift-picker button { flex:1; display:flex; gap:12px; align-items:center; padding:14px 12px; border-radius:12px; text-align:left; min-height:68px; color:#5f594f; transition:.25s }
.shift-picker button>span { font-size:14px; font-weight:600 }.shift-picker small { display:block; font-size:10px; font-weight:400; margin-top:2px }
.shift-picker button[aria-pressed=true] { color:#26232b; background:#fffdfa; box-shadow:0 3px 12px #51453614 }.shift-picker .ui-icon { width:24px; height:24px }
.calendar { border:1px solid #dfd8ce; background:#fffdfa; border-radius:22px; padding:22px; box-shadow:0 8px 30px #34261605; margin-bottom:16px }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px }.calendar-heading .field-caption { margin-bottom:2px; font-size:11px }.calendar-heading h3 { font:26px/1.2 var(--display); margin:0; letter-spacing:-.6px }
.calendar-nav { display:flex; gap:4px }.calendar-nav button { width:40px; height:44px; display:grid; place-items:center; border-radius:12px; background:#f2eee7 }.calendar-nav button:hover { background:#e6ddd0 }.calendar button:disabled { cursor:default }.calendar-nav button:disabled { opacity:.3 }
.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px }.calendar-weekdays { text-align:center; font-size:10px; color:#776e64; margin-bottom:9px }
.calendar-day { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:46px; border-radius:12px; font-size:13px; font-weight:500; gap:4px; border:1px solid transparent; transition:background .18s,transform .18s }
.calendar-day i { width:3px; height:3px; border-radius:50%; background:#648e78 }.calendar-day:hover:not(:disabled) { background:#eee7db; transform:translateY(-2px) }.calendar-day:disabled { color:#c9c2b9 }.calendar-day:disabled i { visibility:hidden }.calendar-day.taken { color:#aaa097; text-decoration:line-through; background:#f4f0eb }.calendar-day.taken i { visibility:visible; background:#b6a99c }
.calendar-day.today { border-color:#d8cbb8 }.calendar-day[aria-pressed=true] { color:#fffdfa; background:#302c33; box-shadow:0 4px 12px #302c3320 }.calendar-day[aria-pressed=true] i { background:var(--accent) }.calendar-day[aria-pressed=true]:hover { background:#302c33 }
.calendar-legend { display:flex; gap:18px; align-items:center; font-size:10px; color:#756b5f; padding:15px 0 13px }.calendar-legend span { display:flex; align-items:center; gap:6px }.calendar-legend i { width:5px; height:5px; border-radius:50%; background:#648e78 }.calendar-legend span+span i { background:#b6a99c }
.calendar-caption { margin:0; padding:12px 0; border-top:1px solid #e9e1d5; font-size:12px; color:#5c5144; min-height:44px }
.quick-date-section { border-top:1px solid #e9e1d5; padding-top:15px }.quick-date-section>p { font-size:11px; color:#766b5e; margin-bottom:12px; min-height:18px }.quick-dates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px }
.quick-dates button { text-align:left; position:relative; border:1px solid #dfd4c3; background:#f8f3eb; border-radius:12px; padding:11px 9px; min-height:66px }.quick-dates button>span { font-size:9px; display:block; color:#756550 }.quick-dates strong { font-size:14px; font-weight:500; display:block; margin-top:3px }.quick-dates i { position:absolute; top:7px; right:8px; font-style:normal; font-size:13px; color:#7e6c52 }.quick-dates button[aria-pressed=true] { background:var(--accent); border-color:#9e8b6f }.quick-dates button:hover { border-color:#9e8b6f }
.calendar[data-status=loading] .calendar-days { opacity:.5 }.availability-note { border-radius:12px; font-size:11px; padding:13px 15px }.availability-note[data-state=available] { background:#e7eee7; color:#3d5944 }
.presets { gap:7px }.presets button { border-radius:10px; font-size:11px; padding:10px 12px; background:#eee9e1; border:1px solid #b0a99d }.presets button[aria-pressed=true] { background:#302c33 }
.service-options { gap:10px }.service-option { padding:16px 15px; border-radius:16px; background:#fffdfa; transition:background .25s,border-color .25s,box-shadow .25s }.service-option:hover { border-color:#a99a86; box-shadow:0 4px 18px #48392508 }.service-option:has(input:checked) { background:#ede8df; border-color:#b2a187 }.service-icon { width:40px; height:40px; border-radius:12px; background:#f1ece4; color:#746048 }.service-check { border-radius:6px; width:22px; height:22px; padding:3px }.service-option strong { font-size:13px }.service-option small { font-size:11px }
.field { font-size:12px; color:#62594f; gap:9px }.field input,.field textarea { color:#25222a; border-radius:12px; border:1px solid #a6a096; background:#fffdfa; min-height:56px; padding:16px; box-shadow:inset 0 2px 4px #36271703; transition:border-color .2s,box-shadow .2s }.field input:hover,.field textarea:hover { border-color:#b2a18a }.field input:focus-visible,.field textarea:focus-visible { outline:3px solid #876aac; outline-offset:2px }
.field input:focus,.field textarea:focus { border-color:#6b5480; box-shadow:0 0 0 3px #876aac33 }.field input::placeholder,.field textarea::placeholder { color:#7c7268; font-size:12px }.consent { color:#796e61 }.own-dj { padding:14px; border-radius:12px; background:#eee9e1 }
/* A dark foil invitation frames the illuminated 3D set. */
.invitation-sticky { top:20px }.preview-top { font-size:11px; color:#756a5b; margin-bottom:13px }.preview-top .text-button { font-size:11px }.live-dot { background:#678271; box-shadow:0 0 0 3px #67827118 }
.invitation-stage { padding:1px; border-radius:22px; perspective:none; overflow:hidden; background:linear-gradient(130deg,#cfc2a7,#665f70 35%,#d5c4a3 70%,#63586e); box-shadow:0 22px 55px #23152a24 }
.stage-halo,.paper-confetti,.ticket-shadow { display:none }
.invitation-card,.invitation-stage:hover .invitation-card { border-radius:22px; background:radial-gradient(ellipse at 60% 25%,#37313d,#1c1c23 65%); color:#f6efdf; padding:26px 28px 20px; transform:none; box-shadow:inset 0 1px 0 #ffffff24; min-height:0; overflow:hidden }
.invitation-card:before { display:none }.ticket-head { margin-bottom:22px; position:relative; z-index:2 }.ticket-head .wordmark { font-size:29px; color:#e8d8b6 }.ticket-star { color:var(--accent); font-size:29px }
.invitation-label { color:#a89d91; font-size:10px; text-align:left; margin-bottom:7px }.invitation-card h3 { color:#f5efdf; font-size:37px; max-width:370px; text-align:left; margin:0; min-height:78px; letter-spacing:-1.2px; position:relative; z-index:2 }
.party-scene { height:335px; position:relative; margin:-15px -28px 0; background:radial-gradient(ellipse at 50% 70%,#66587544,transparent 67%); isolation:isolate; overflow:hidden }.party-scene canvas { position:absolute; inset:0; width:100%; height:100%; display:block }.scene-fallback { position:absolute; inset:20px 25px 15px; border-radius:16px; overflow:hidden }.scene-fallback img { width:100%; height:100%; object-fit:cover; opacity:.42 }.scene-fallback span { position:absolute; bottom:20px; left:20px; right:20px; font-size:12px; color:#fff }.scene-corner-label { position:absolute; bottom:12px; left:28px; display:flex; align-items:center; gap:7px; font-size:9px; color:#a99fac; pointer-events:none }.scene-status-dot { width:4px; height:4px; border-radius:50%; background:var(--accent) }.scene-unavailable canvas { visibility:hidden }
.scene-detail-strip { display:flex; gap:12px; justify-content:space-between; align-items:start; font-size:10px; border-top:1px solid #ffffff14; padding:14px 0; color:#d9cdbb; line-height:1.5 }.scene-view-label { color:#918594; font-size:8px; white-space:nowrap }
.ticket-meta { text-align:left; border-top:1px solid #ffffff14; padding:16px 0 2px; position:relative }.ticket-meta strong { font-size:17px; font-weight:500; color:var(--accent) }.ticket-meta span { color:#a69f9f; font-size:11px }.ticket-meta #invite-date { color:#e2d9cb; font-size:13px; margin-top:5px }
.ticket-perforation { border-color:#ffffff26; margin:19px -28px 16px }.ticket-perforation:before,.ticket-perforation:after { background:var(--paper); width:13px; height:13px; top:-7px }
.ticket-services { display:flex; flex-wrap:wrap; gap:7px; min-height:33px }.ticket-services li { font-size:10px; line-height:1.3; border:1px solid #b9a08240; background:#ffffff05; padding:8px 10px; border-radius:8px; color:#e2d6c6; gap:6px }.ticket-services svg { color:var(--accent); width:15px; height:15px }.ticket-services .empty-services { border:0; padding:4px 0; font-style:normal; font-size:11px; color:#a69b90 }.ticket-bottom { border-color:#ffffff14; font-size:9px; color:#928b84; margin-top:16px; padding-top:14px }
.preview-caption { font-size:10px; margin:14px 0 0; color:#756a5b }
@media(min-width:1101px){.builder-section { padding-left:6%; padding-right:6% }.invitation-column { padding-top:2px }}
@media(max-width:1100px){.builder-layout { gap:30px; grid-template-columns:1fr 1fr }.invitation-card { padding:23px 21px 18px }.party-scene { margin-left:-21px; margin-right:-21px; height:300px }.invitation-card h3 { font-size:31px; min-height:68px }.calendar { padding:17px }.occasion-options button { font-size:11px; gap:7px; padding:12px 9px }.scene-view-label { display:none }}
@media(max-width:760px){.builder-layout { gap:36px }.builder-heading>p { font-size:14px; line-height:1.8 }.invitation-column { order:-1 }.invitation-stage { max-width:490px; padding:1px; border-radius:22px }.invitation-card,.invitation-stage:hover .invitation-card { border-radius:22px; padding:24px 22px 18px; transform:none }.ticket-head { margin-bottom:17px }.ticket-head .wordmark { font-size:28px }.invitation-card h3 { font-size:34px; max-width:320px; min-height:70px; margin:0 }.party-scene { height:310px; margin:-8px -22px 0 }.ticket-meta { padding-top:15px }.ticket-meta span { font-size:11px }.ticket-services li { font-size:10px }.ticket-bottom { font-size:9px }.preview-caption { font-size:10px }.event-form legend { font-size:18px }.calendar { padding:19px }.calendar-heading h3 { font-size:25px }.calendar-day { min-height:45px }.occasion-options button { font-size:12px; padding:13px 12px }.field input,.field textarea { font-size:16px }.shift-picker small { font-size:9px }.invitation-dialog .invitation-stage { padding:1px }.invitation-dialog .invitation-sticky { padding:0 10px 18px }.invitation-dialog .party-scene { height:280px }.invitation-dialog .invitation-card { padding:22px 18px 16px }.invitation-dialog .party-scene { margin-left:-18px; margin-right:-18px }.invitation-dialog .invitation-card h3 { font-size:29px; min-height:64px }.invitation-dialog .ticket-services li { font-size:10px }}
@media(max-width:390px){.calendar { padding:14px }.calendar-heading h3 { font-size:23px }.calendar-nav button { width:35px }.quick-dates { gap:5px }.quick-dates button { padding:10px 8px }.quick-dates strong { font-size:13px }.shift-picker button { gap:8px; padding:11px 9px }.invitation-card h3 { font-size:30px }.party-scene { height:280px }.occasion-options button { font-size:11px }.occasion-mark svg { width:21px }.scene-detail-strip { font-size:9px }}
.calendar-heading h3{text-transform:none}#agenda{scroll-margin-top:35px}
.calendar[data-status=error] .calendar-day i{visibility:hidden}.calendar[data-status=error] .calendar-day:not(:disabled){border:1px dashed #d8cdbb}.calendar[data-status=error] .calendar-legend{display:none}

/* --- Escenas de ocasión: viven solo en el elegido y al pasar el mouse --- */
.occasion-mark svg { overflow:visible }
.occasion-mark .llama, .occasion-mark .humo, .occasion-mark .novio, .occasion-mark .novia, .occasion-mark .corazon, .occasion-mark .globo, .occasion-mark .maletin, .occasion-mark .broche, .occasion-mark .destellos circle, .occasion-mark .confeti circle { transform-box:fill-box; transform-origin:50% 100% }
.occasion-mark .bola { transform-box:fill-box; transform-origin:50% 0 }
.occasion-mark .destellos circle, .occasion-mark .confeti circle { transform-origin:50% 50%; opacity:.35 }
.occasion-mark .broche { transform-origin:50% 50% }
.occasion-mark .humo, .occasion-mark .corazon { opacity:0 }
.occasion-options button:is([aria-pressed=true],:hover) .llama { animation:llama 1.1s ease-in-out infinite }
.occasion-options button:is([aria-pressed=true],:hover) .humo { animation:humo 2.6s ease-out infinite }
.occasion-options button:is([aria-pressed=true],:hover) .bola { animation:vaiven 3.6s ease-in-out infinite }
.occasion-options button:is([aria-pressed=true],:hover) .destellos circle { animation:titilar 1.6s ease-in-out infinite }
.occasion-options button:is([aria-pressed=true],:hover) .novio { animation:acercarse 3.2s ease-in-out infinite }
.occasion-options button:is([aria-pressed=true],:hover) .novia { animation:acercarse 3.2s ease-in-out infinite reverse }
.occasion-options button:is([aria-pressed=true],:hover) .corazon { animation:corazon 3.2s ease-out infinite }
.occasion-options button:is([aria-pressed=true],:hover) .globo { animation:flotar 3s ease-in-out infinite }
.occasion-options button:is([aria-pressed=true],:hover) .confeti circle { animation:titilar 2.2s ease-in-out infinite }
.occasion-options button:is([aria-pressed=true],:hover) .maletin { animation:levantar 3.6s ease-in-out infinite }
.occasion-options button:is([aria-pressed=true],:hover) .broche { animation:titilar 1.8s ease-in-out infinite }
.occasion-mark .globo-2 { animation-delay:-1s !important } .occasion-mark .globo-3 { animation-delay:-2s !important }
.occasion-mark .destellos circle:nth-child(2), .occasion-mark .confeti circle:nth-child(2) { animation-delay:-.5s !important }
.occasion-mark .destellos circle:nth-child(3), .occasion-mark .confeti circle:nth-child(3) { animation-delay:-1s !important }
.occasion-mark .destellos circle:nth-child(4) { animation-delay:-1.4s !important }
@keyframes llama { 0%,100% { transform:scale(1,1) skewX(0) } 30% { transform:scale(.9,1.1) skewX(-5deg) } 60% { transform:scale(1.06,.94) skewX(4deg) } }
@keyframes humo { 0% { opacity:0; transform:translateY(0) } 30% { opacity:.7 } 100% { opacity:0; transform:translateY(-4px) } }
@keyframes vaiven { 0%,100% { transform:rotate(-6deg) } 50% { transform:rotate(6deg) } }
@keyframes titilar { 0%,100% { opacity:.25; transform:scale(.7) } 50% { opacity:1; transform:scale(1.15) } }
@keyframes acercarse { 0%,100% { transform:rotate(0) } 50% { transform:rotate(4deg) } }
@keyframes corazon { 0%,15% { opacity:0; transform:translateY(2px) scale(.6) } 45% { opacity:1; transform:translateY(-1px) scale(1) } 80%,100% { opacity:0; transform:translateY(-5px) scale(.9) } }
@keyframes flotar { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-1.6px) } }
@keyframes levantar { 0%,55%,100% { transform:translateY(0) } 25% { transform:translateY(-2px) } }

/* --- Tarde / Noche: la pastilla elegida es un cielo --- */
.shift-picker button { transition:background .6s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease) }
.shift-picker .rayos, .shift-picker .estrellas path { transform-box:fill-box; transform-origin:50% 50% }
.shift-picker button[aria-pressed=true][data-shift=tarde] { background:linear-gradient(135deg,#fff7e6,#f5d9a6); color:#3a2d1c; box-shadow:0 3px 14px #c8963f2e }
.shift-picker button[aria-pressed=true][data-shift=tarde] small { color:#6a5335 }
.shift-picker button[aria-pressed=true][data-shift=tarde] .sol { fill:#f2bf55; stroke:#d9932c }
.shift-picker button[aria-pressed=true][data-shift=tarde] .rayos { stroke:#d9932c; animation:girar 26s linear infinite }
.shift-picker button[aria-pressed=true][data-shift=noche] { background:linear-gradient(135deg,#1c1b2c,#2f2b4d); color:#f2edff; box-shadow:0 3px 14px #1c1b2c66 }
.shift-picker button[aria-pressed=true][data-shift=noche] small { color:#c9c2e6 }
.shift-picker button[aria-pressed=true][data-shift=noche] .luna { fill:#f3e8bf; stroke:#f3e8bf }
.shift-picker button[aria-pressed=true][data-shift=noche] .estrellas path { stroke:#f3e8bf; animation:titilar 2.4s ease-in-out infinite }
.shift-picker button[aria-pressed=true][data-shift=noche] .estrellas path:nth-child(2) { animation-delay:-1.2s }
@keyframes girar { to { transform:rotate(360deg) } }

/* --- La tarjeta siente la hora: cielo detrás de la maqueta --- */
.party-scene { transition:background .9s var(--ease) }
body[data-shift=tarde] .party-scene { background:linear-gradient(180deg,#f6d3aa 0%,#eab98d 58%,#d8a077 100%) }
body[data-shift=tarde] .scene-corner-label { color:#3b2f22 }
body[data-shift=tarde] .scene-status-dot { background:#3b2f22 }