:root{--bg-color: #f7f4f0;--primary-color: #666645;--primary-hover: #666645;--primary-text: #ffffff;--text-main: #000000;--text-secondary: #5e5e62;--card-bg: #f2f2f7;--border-radius-card: 6px;--border-radius-btn: 9999px;--font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Helvetica Neue", sans-serif;--transition-smooth: all .2s cubic-bezier(.2, .8, .2, 1)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-main);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{max-width:680px;margin:0 auto;min-height:100vh;padding:0 12px 12px;display:flex;flex-direction:column}.header-hero{position:relative;width:100%;height:66vh;min-height:400px;border-radius:24px;overflow:hidden;margin-top:12px;margin-bottom:16px;box-shadow:0 10px 30px #00000014;border:1px solid rgba(0,0,0,.05)}.header-hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url(/fondo-novios.jpeg) center/cover no-repeat;opacity:.35;z-index:0}.header-hero>*{position:relative;z-index:1}.header-overlay{width:100%;height:100%;padding:32px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.header-tag{font-size:13px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}.header-title{font-size:34px;font-weight:800;letter-spacing:-.5px;color:var(--text-main);margin-bottom:10px;line-height:1.15}.header-info-text{font-size:14px;font-weight:400;color:var(--text-secondary);max-width:440px;line-height:1.55;margin-top:4px;margin-bottom:12px;text-align:center}.scroll-indicator{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text-secondary);animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-6px)}60%{transform:translateY(-3px)}}.sticky-upload-bar{position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:12px 0;margin-bottom:16px;display:flex;justify-content:center}.btn-upload-wrapper{position:relative;width:100%;max-width:280px}.file-input-hidden{display:none}.btn-upload{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;background-color:var(--primary-color);color:var(--primary-text);border:none;border-radius:var(--border-radius-btn);font-size:15px;font-weight:600;font-family:var(--font-family);cursor:pointer;box-shadow:0 4px 14px #0000002e;transition:var(--transition-smooth)}.btn-upload:active{transform:scale(.96);background-color:var(--primary-hover)}.btn-upload svg{width:18px;height:18px}.notification-banner{margin:8px 0;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:500;text-align:center;animation:fadeIn .3s ease}.notification-banner.error{background-color:#ffe5e5;color:#d32f2f}.notification-banner.info{background-color:#e3f2fd;color:#1976d2}.loading-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:8px}.spinner{width:24px;height:24px;border:2.5px solid rgba(0,0,0,.1);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s infinite linear}@keyframes spin{to{transform:rotate(360deg)}}.gallery-section{flex:1}.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.photo-card{position:relative;width:100%;aspect-ratio:1 / 1;border-radius:var(--border-radius-card);overflow:hidden;background-color:var(--card-bg);cursor:pointer;transition:var(--transition-smooth)}.photo-card:active{transform:scale(.94);opacity:.85}.photo-img{width:100%;height:100%;object-fit:cover;display:block}.photo-card-skeleton{width:100%;aspect-ratio:1 / 1;border-radius:var(--border-radius-card);background:linear-gradient(90deg,#f0f0f2 25%,#e6e6ea,#f0f0f2 75%);background-size:200% 100%;animation:loadingSkeleton 1.5s infinite}@keyframes loadingSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.empty-gallery{text-align:center;padding:48px 16px;color:var(--text-secondary)}.empty-gallery p{font-size:14px;margin-top:8px}.app-footer{text-align:center;padding:36px 16px 16px;margin-top:auto}.footer-link{color:var(--text-secondary);font-size:13px;font-weight:500;text-decoration:none;transition:var(--transition-smooth)}.footer-link:hover{color:var(--text-main);text-decoration:underline}.fullscreen-viewer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background-color:#000000f0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s ease}.fullscreen-img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:10px;box-shadow:0 10px 30px #00000080;-webkit-user-select:none;user-select:none}.viewer-counter{position:absolute;top:24px;left:50%;transform:translate(-50%);background:#ffffff26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;letter-spacing:.5px}.close-btn{position:absolute;top:20px;right:20px;background:#ffffff40;border:none;color:#fff;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1002;transition:var(--transition-smooth)}.close-btn:active{transform:scale(.9);background:#fff6}.close-btn svg{width:22px;height:22px}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:1001;background:#fff3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:none;color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-smooth)}.nav-btn:active{transform:translateY(-50%) scale(.9);background:#ffffff59}.nav-btn-prev{left:16px}.nav-btn-next{right:16px}.nav-btn svg{width:24px;height:24px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
