/* ============================================
   Ofpicwall Design System
   Based on DESIGN.md
   ============================================ */

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: #212529;
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Typography */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    line-height: 1.3;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
p { margin-bottom: 1rem; }

/* Container */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 768px) { .container { padding: 0 2rem; } }
@media (min-width: 1024px) { .container { padding: 0 4rem; } }

/* Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    padding: 1rem 0;
}
.site-header.scrolled {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (min-width: 768px) { .header-inner { padding: 0 2rem; } }
@media (min-width: 1024px) { .header-inner { padding: 0 4rem; } }

.logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
}
.scrolled .logo { color: #1a1a2e; }

.main-nav { display: none; }
@media (min-width: 768px) {
    .main-nav {
        display: flex;
        gap: 2rem;
    }
    .main-nav a {
        font-family: 'DM Sans', sans-serif;
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(255,255,255,0.85);
        transition: color 0.2s;
    }
    .scrolled .main-nav a { color: #212529; }
    .main-nav a:hover { color: #ffffff; }
    .scrolled .main-nav a:hover { color: #e94560; }
}

.header-actions { display: flex; align-items: center; gap: 1rem; }

.cart-link {
    position: relative;
    color: #ffffff;
    transition: color 0.2s;
}
.scrolled .cart-link { color: #212529; }
.cart-link:hover { color: #e94560; }
.cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #e94560;
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
@media (min-width: 768px) { .mobile-toggle { display: none; } }
.mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    transition: 0.3s;
}
.scrolled .mobile-toggle span { background: #1a1a2e; }

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: #1a1a2e;
}
.hero-bg {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,26,46,0.9) 0%, rgba(26,26,46,0.3) 50%, rgba(26,26,46,0.1) 100%);
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 640px;
    padding: 0 1.5rem;
    margin-top: 4rem;
}
@media (min-width: 768px) { .hero-content { padding: 0 4rem; } }
.hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.2;
}
@media (min-width: 768px) { .hero h1 { font-size: 3.5rem; } }
.hero p {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 2rem;
    max-width: 480px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-primary {
    background: #e94560;
    color: #ffffff;
}
.btn-primary:hover { background: #d63850; }
.btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.6);
}
.btn-secondary:hover { border-color: #ffffff; background: rgba(255,255,255,0.1); }
.btn-outline {
    background: transparent;
    color: #212529;
    border: 1px solid #212529;
}
.btn-outline:hover { background: #212529; color: #ffffff; }

/* Sections */
.section {
    padding: 4rem 0;
}
@media (min-width: 768px) { .section { padding: 6rem 0; } }
.section-title {
    text-align: center;
    margin-bottom: 3rem;
}
.section-title h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.section-title p {
    color: #6c757d;
    max-width: 480px;
    margin: 0 auto;
}

.section-light { background: #f8f9fa; }
.section-dark { background: #1a1a2e; color: #ffffff; }

/* Grids */
.grid {
    display: grid;
    gap: 1.5rem;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Work Cards */
.work-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f0f0;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.work-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.work-card-image {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
}
.work-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.work-card:hover .work-card-overlay { opacity: 1; }
.work-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.work-card-photographer {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
}
.work-card-price {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #e94560;
    margin-top: 0.5rem;
}

/* Gallery Cards */
.gallery-card {
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
}
.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem;
    background: linear-gradient(to top, rgba(26,26,46,0.9), transparent);
    color: #ffffff;
}
.gallery-card h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

/* Form Elements */
.form-group { margin-bottom: 1.5rem; }
.form-group label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #212529;
}
.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #ffffff;
}
.form-control:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15);
}
select.form-control { appearance: none; background-image: url("data:image/svg+xml,..."); }

/* Filters Bar */
.filters-bar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 1.5rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e9ecef;
}

/* Cart */
.cart-page { padding: 8rem 0 4rem; }
.cart-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e9ecef;
}
.cart-item-image {
    width: 120px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}
.cart-item-info { flex: 1; }

/* Checkout */
.checkout-page { padding: 8rem 0 4rem; }
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
}
@media (max-width: 1023px) { .checkout-grid { grid-template-columns: 1fr; } }

/* Footer */
.site-footer {
    background: #1a1a2e;
    color: #ffffff;
    padding: 4rem 0 2rem;
}
.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
}
@media (max-width: 767px) { .footer-inner { grid-template-columns: 1fr; } }
@media (min-width: 768px) { .footer-inner { padding: 0 2rem; } }
@media (min-width: 1024px) { .footer-inner { padding: 0 4rem; } }
.footer-brand h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.875rem; }
.footer-nav h4, .footer-social h4 {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.5);
}
.footer-nav a, .footer-social a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    transition: color 0.2s;
}
.footer-nav a:hover, .footer-social a:hover { color: #ffffff; }
.footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 3rem;
    text-align: center;
}
.footer-bottom p { color: rgba(255,255,255,0.4); font-size: 0.75rem; }
@media (min-width: 768px) { .footer-bottom { padding: 2rem 2rem 0; } }
@media (min-width: 1024px) { .footer-bottom { padding: 2rem 4rem 0; } }

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Detail Page */
.detail-page { padding: 8rem 0 4rem; }
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}
@media (max-width: 1023px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-image {
    width: 100%;
    border-radius: 4px;
}
.detail-info h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.detail-photographer {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}
.detail-description {
    font-size: 1rem;
    color: #495057;
    margin-bottom: 2rem;
    line-height: 1.8;
}
.detail-price {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #e94560;
    margin-bottom: 0.5rem;
}

/* Format Selector */
.format-selector {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.format-option {
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
}
.format-option:hover { border-color: #e94560; }
.format-option.selected {
    border-color: #e94560;
    background: #fff5f5;
}
.format-option .format-name { font-weight: 500; display: block; }
.format-option .format-price { color: #e94560; font-size: 0.75rem; }

/* Photographer Profile */
.profile-header {
    padding: 8rem 0 3rem;
    text-align: center;
    background: #f8f9fa;
}
.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1.5rem;
}
.profile-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.profile-bio {
    max-width: 600px;
    margin: 0 auto;
    color: #6c757d;
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 2rem;
}
.breadcrumbs a { color: #6c757d; }
.breadcrumbs a:hover { color: #e94560; }

/* Tags */
.tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #f0f0f0;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #495057;
    margin: 0.25rem;
}
.tag:hover { background: #e94560; color: #ffffff; }

/* ============================================
   HERO FULL-BLEED CON IMAGEN
   ============================================ */
.hero.has-image { background: #1a1a2e; }
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* ============================================
   MASONRY GRID
   ============================================ */
.masonry {
    column-count: 2;
    column-gap: 1rem;
}
.masonry .masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
    display: inline-block;
    width: 100%;
}
@media (min-width: 640px) { .masonry { column-count: 3; column-gap: 1.25rem; } }
@media (min-width: 1024px) { .masonry { column-count: 4; column-gap: 1.5rem; } }
.masonry-item .work-card { margin-bottom: 0; }
.masonry-item .work-card-image { aspect-ratio: auto; }

/* ============================================
   SKELETON SCREENS
   ============================================ */
@keyframes skeleton-pulse {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.skeleton {
    background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.8s ease-in-out infinite;
    border-radius: 4px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.skeleton-card {
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.skeleton-card-image {
    aspect-ratio: 4 / 5;
    width: 100%;
    background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.8s ease-in-out infinite;
}
.skeleton-card-body {
    padding: 1rem;
}
.skeleton-line {
    height: 0.75rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.8s ease-in-out infinite;
    border-radius: 4px;
}
.skeleton-line:last-child { width: 60%; }
.skeleton-line-sm { width: 40%; height: 0.5rem; }

/* ============================================
   MOBILE NAV SLIDE-IN
   ============================================ */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.6);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.mobile-nav-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.mobile-nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    background: #ffffff;
    z-index: 160;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
.mobile-nav-panel.open {
    transform: translateX(0);
}
.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}
.mobile-nav-logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a2e;
}
.mobile-nav-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0.25rem;
    line-height: 1;
}
.mobile-nav-links {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}
.mobile-nav-links a {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    transition: background 0.2s, color 0.2s;
    border-left: 3px solid transparent;
}
.mobile-nav-links a:hover,
.mobile-nav-links a:active {
    background: #f8f9fa;
    color: #e94560;
    border-left-color: #e94560;
}
.mobile-nav-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #e9ecef;
}
.mobile-nav-footer .btn {
    width: 100%;
    justify-content: center;
}
body.nav-open {
    overflow: hidden;
}

/* ============================================
   STAGGERED FADE-IN ANIMATIONS
   ============================================ */
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.fade-in-scale.visible {
    opacity: 1;
    transform: scale(1);
}
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }
.stagger-7 { transition-delay: 0.35s; }
.stagger-8 { transition-delay: 0.4s; }
.stagger-9 { transition-delay: 0.45s; }
.stagger-10 { transition-delay: 0.5s; }

/* ============================================
   PRICE TAG BADGE
   ============================================ */
.price-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #e94560;
    background: rgba(233, 69, 96, 0.08);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
}

/* ============================================
   ENHANCED CARD HOVER
   ============================================ */
.work-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f0f0;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.work-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.work-card-image {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-card:hover .work-card-image {
    transform: scale(1.05);
}
.work-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    color: #ffffff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.work-card:hover .work-card-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE ENHANCEMENTS
   ============================================ */
@media (max-width: 767px) {
    .hero h1 { font-size: 1.75rem; }
    .hero p { font-size: 1rem; }
    .section { padding: 2.5rem 0; }
    .section-title { margin-bottom: 1.5rem; }
    .section-title h2 { font-size: 1.5rem; }
    .cart-page { padding: 6rem 0 2rem; }
    .detail-page { padding: 6rem 0 2rem; }
    .checkout-page { padding: 6rem 0 2rem; }
    .detail-grid { gap: 1.5rem; }
    .breadcrumbs { font-size: 0.75rem; margin-bottom: 1rem; }
    .filters-bar { flex-direction: column; align-items: stretch; }
    .filters-bar select { width: 100% !important; }
    .checkout-grid { gap: 1.5rem; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .format-selector { flex-direction: column; }
    .format-option { width: 100%; }
}

@media (max-width: 359px) {
    .hero h1 { font-size: 1.5rem; }
    .container { padding: 0 1rem; }
}

/* Scrollbar suave */
@media (hover: hover) {
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #f1f1f1; }
    ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
}

/* ============================================
   OFPICWALL PREMIUM REDESIGN — Open Design import
   Dirección: galería editorial, grafito, blanco cálido, dorado y terracota
   ============================================ */
:root {
    --ow-bg: oklch(98% 0.003 85);
    --ow-surface: #ffffff;
    --ow-ink: oklch(18% 0.012 275);
    --ow-ink-deep: oklch(14% 0.015 270);
    --ow-muted: oklch(50% 0.01 275);
    --ow-soft: oklch(92% 0.005 85);
    --ow-border: oklch(88% 0.006 85);
    --ow-gold: oklch(68% 0.12 80);
    --ow-gold-bright: oklch(72% 0.12 80);
    --ow-clay: oklch(58% 0.12 40);
    --ow-red: oklch(52% 0.18 25);
    --ow-display: 'Playfair Display', Georgia, serif;
    --ow-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --ow-accent: 'DM Sans', sans-serif;
}

body {
    font-family: var(--ow-body);
    color: var(--ow-ink);
    background: var(--ow-bg);
}

h1, h2, h3, h4,
.logo,
.mobile-nav-logo,
.footer-brand h3 {
    font-family: var(--ow-display);
    letter-spacing: -0.015em;
}

p { color: var(--ow-muted); line-height: 1.72; }

.container, .header-inner, .footer-inner, .footer-bottom { max-width: 1280px; }
@media (min-width: 1024px) {
    .container, .header-inner, .footer-inner, .footer-bottom { padding-left: 3rem; padding-right: 3rem; }
}

.section { padding: clamp(3rem, 6vw, 6rem) 0; }
.section-light { background: oklch(95% 0.006 85); }
.section-dark { background: var(--ow-ink); color: #fff; }
.section-dark p { color: oklch(70% 0.01 275); }
.section-label {
    font-family: var(--ow-accent);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ow-gold);
    font-weight: 600;
    margin-bottom: 0.65rem;
}
.section-title { max-width: 700px; }
.section-title h2 { font-size: clamp(1.85rem, 3vw, 2.75rem); }

/* Header premium */
.site-header {
    padding: 1.15rem 0;
    transition: background .3s ease, box-shadow .3s ease, padding .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled,
.site-header.static-header {
    background: oklch(98% 0.003 85 / 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 var(--ow-border);
    padding: 0.72rem 0;
}
.logo {
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
}
.scrolled .logo { color: var(--ow-ink); }
.main-nav { gap: 2rem; align-items: center; }
.main-nav a {
    font-family: var(--ow-body);
    font-size: 0.86rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: oklch(92% 0.005 275);
    position: relative;
}
.main-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 1.5px;
    background: var(--ow-gold);
    transition: width .3s ease;
}
.main-nav a:hover::after { width: 100%; }
.scrolled .main-nav a { color: oklch(45% 0.01 275); }
.scrolled .main-nav a:hover { color: var(--ow-ink); }
.cart-link { color: #fff; }
.scrolled .cart-link { color: var(--ow-ink); }
.cart-count { background: var(--ow-clay); }
.mobile-toggle span { background: #fff; }
.scrolled .mobile-toggle span { background: var(--ow-ink); }

/* Hero editorial */
.hero {
    min-height: 100vh;
    background: var(--ow-ink);
}
.hero-overlay {
    background: linear-gradient(135deg, oklch(18% 0.012 275 / 0.87) 0%, oklch(14% 0.015 270 / 0.70) 52%, oklch(18% 0.012 275 / 0.38) 100%);
}
.hero-content { max-width: 740px; margin-top: 4rem; }
.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}
.hero h1 em { color: var(--ow-gold-bright); font-style: normal; }
.hero p {
    color: oklch(82% 0.005 275);
    font-weight: 300;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: oklch(80% 0.005 275);
    font-size: 0.68rem;
    font-family: var(--ow-accent);
    text-transform: uppercase;
    letter-spacing: 0.13em;
}
.scroll-indicator .line { width: 1px; height: 40px; background: linear-gradient(to bottom, oklch(80% 0.005 275), transparent); }

/* Botones */
.btn {
    font-family: var(--ow-accent);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 0.86rem 2rem;
    transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ow-clay); color: #fff; }
.btn-primary:hover { background: oklch(52% 0.14 40); }
.btn-secondary { background: #fff; color: var(--ow-ink); border-color: #fff; }
.btn-secondary:hover { background: oklch(95% 0.005 85); color: var(--ow-ink); }
.btn-outline, .btn-outline-dark { background: transparent; border: 1px solid oklch(18% 0.012 275 / 0.28); color: var(--ow-ink); }
.btn-outline:hover, .btn-outline-dark:hover { background: var(--ow-ink); color: #fff; }
.btn-ghost { background: transparent; border: 1px solid oklch(100% 0 0 / 0.28); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--ow-ink); }

/* Stats y bloques editoriales */
.stats-bar { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; text-align: center; }
@media (min-width:768px){ .stats-bar { grid-template-columns: repeat(4,1fr); } }
.stat-item .number { font-family: var(--ow-display); font-size: clamp(1.8rem,3vw,2.8rem); font-weight: 700; color:#fff; line-height:1.2; }
.stat-item .label { font-family: var(--ow-accent); font-size:.78rem; color:oklch(65% 0.01 275); text-transform:uppercase; letter-spacing:.08em; margin-top:.3rem; }
.steps-grid { display:grid; grid-template-columns:1fr; gap:2rem; max-width:960px; margin:0 auto; }
@media(min-width:768px){ .steps-grid{ grid-template-columns:repeat(3,1fr); } }
.step-card { text-align:center; padding:2rem 1.5rem; }
.step-number { font-family:var(--ow-display); font-size:3rem; font-weight:700; color:oklch(68% 0.12 80 / 0.34); line-height:1; margin-bottom:1rem; }

/* Cards de obra y galería */
.featured-grid, .gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem; }
@media(min-width:1024px){ .featured-grid{ grid-template-columns:repeat(3,1fr); } .work-card.featured-large{ grid-column:span 2; aspect-ratio:16/9; } }
.work-card, .gallery-card, .catalog-card {
    border-radius: 4px;
    background: var(--ow-soft);
    box-shadow: none;
    border: 1px solid oklch(88% 0.006 85 / 0.65);
    transition: transform .3s ease, box-shadow .3s ease;
}
.work-card:hover, .gallery-card:hover, .catalog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.10); }
.work-card-image, .gallery-card img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.work-card:hover .work-card-image, .gallery-card:hover img { transform: scale(1.05); }
.work-card-overlay, .gallery-card-content {
    background: linear-gradient(to top, oklch(18% 0.012 275 / .88) 0%, transparent 72%);
}
.work-card-title { font-size: 1.1rem; }
.work-card-price, .format-option .format-price, .detail-price { color: var(--ow-gold); }

/* Catálogo */
.page-header {
    padding: 8rem 0 2.5rem;
    background: var(--ow-ink);
    color: #fff;
}
.page-header p { color: oklch(70% 0.01 275); max-width: 620px; }
.filters-bar {
    background: var(--ow-bg);
    border-bottom: 1px solid var(--ow-border);
    padding: 1.1rem 0;
}
.filters-inner { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.form-control { border-color: var(--ow-border); background:#fff; font-family: var(--ow-accent); font-size:.86rem; }
.form-control:focus { border-color: var(--ow-gold); box-shadow: 0 0 0 3px oklch(68% 0.12 80 / .14); }
.results-count { margin-left:auto; font-family:var(--ow-accent); font-size:.82rem; color:var(--ow-muted); }

/* Detalle de obra */
.detail-page, .product-page { padding: 7rem 0 4rem; }
.detail-grid, .product-layout { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:1024px){ .detail-grid, .product-layout { grid-template-columns:1.15fr .85fr; gap:3.5rem; align-items:start; } .detail-info { position: sticky; top: 6rem; } }
.detail-image { border-radius:4px; background:var(--ow-soft); border:1px solid var(--ow-border); }
.detail-info h1 { font-size:clamp(2rem,3.2vw,3rem); }
.detail-photographer a { color: var(--ow-clay) !important; font-weight:500; }
.detail-description { color:oklch(45% 0.01 275); line-height:1.85; }
.detail-price { font-family:var(--ow-display); font-size:2rem; font-weight:700; color:var(--ow-ink); padding:1.2rem 0; border-top:1px solid var(--ow-border); }
.format-selector { gap:.6rem; }
.format-option { background:#fff; border-color:var(--ow-border); min-width:92px; }
.format-option:hover { border-color:oklch(68% 0.12 80 / .55); }
.format-option.selected { border-color:var(--ow-gold); background:oklch(68% 0.12 80 / .08); }
.tag { background:oklch(92% 0.005 85); color:oklch(42% 0.01 275); border-radius:999px; }
.tag:hover { background:var(--ow-clay); color:#fff; }

/* Testimonios y fotógrafos */
.testimonials-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:768px){ .testimonials-grid{ grid-template-columns:repeat(3,1fr); } }
.testimonial-card { background:#fff; border:1px solid var(--ow-border); border-radius:4px; padding:2rem; display:flex; flex-direction:column; gap:1rem; }
.testimonial-card .stars { color:var(--ow-gold); letter-spacing:2px; }
.testimonial-card blockquote { color:oklch(45% 0.01 275); font-style:italic; line-height:1.75; }
.author-info { display:flex; align-items:center; gap:.8rem; padding-top:1rem; border-top:1px solid var(--ow-border); }
.author-info .avatar { width:42px; height:42px; border-radius:50%; background:var(--ow-border); display:flex; align-items:center; justify-content:center; font-family:var(--ow-accent); color:var(--ow-muted); }
.author-info .name { font-weight:600; font-size:.9rem; }
.author-info .role { color:var(--ow-muted); font-size:.8rem; }

/* Navegación móvil y footer */
.mobile-nav-panel { background:#fff; }
.mobile-nav-logo { color:var(--ow-ink); font-weight:700; }
.mobile-nav-links a:hover { color:var(--ow-clay); border-left-color:var(--ow-clay); background:oklch(95% 0.006 85); }
.site-footer { background:var(--ow-ink-deep); color:oklch(75% 0.005 275); }
.footer-brand p, .footer-nav a, .footer-social a { color:oklch(64% 0.01 275); }
.footer-nav h4, .footer-social h4 { color:#fff; }

/* ============================================
   SUBIR OBRA — REDISEÑO PREMIUM
   ============================================ */

/* ── Hero oscuro ── */
.upload-hero {
  background: var(--ow-ink);
  padding: 9rem 1.5rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.upload-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 80%, oklch(68% 0.12 80 / 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 20%, oklch(58% 0.12 40 / 0.04) 0%, transparent 60%);
  pointer-events: none;
}
.upload-hero-inner {
  max-width: 580px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.upload-hero-badge {
  display: inline-block;
  font-family: var(--ow-accent);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ow-gold);
  border: 1px solid oklch(68% 0.12 80 / 0.3);
  padding: 0.35rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.upload-hero-title {
  font-family: var(--ow-display);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.upload-hero-desc {
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  color: oklch(68% 0.01 275);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto;
}

/* ── Cuerpo del formulario ── */
.upload-body {
  padding: 3rem 1.5rem 5rem;
  background: var(--ow-bg);
}
.upload-container {
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .upload-body { padding: 3.5rem 2rem 6rem; }
}
@media (min-width: 1024px) {
  .upload-body { padding: 4rem 4rem 7rem; }
}

/* ── Alertas ── */
.upload-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-family: var(--ow-accent);
  font-size: 0.88rem;
  margin-bottom: 2rem;
  animation: uploadFadeIn 0.35s ease;
}
.upload-alert--error {
  background: oklch(95% 0.03 25);
  border: 1px solid oklch(65% 0.18 25 / 0.25);
  color: oklch(42% 0.18 25);
}
.upload-alert--success {
  background: oklch(95% 0.025 145);
  border: 1px solid oklch(55% 0.12 145 / 0.25);
  color: oklch(35% 0.12 145);
}
.upload-alert-icon { flex-shrink: 0; }
@keyframes uploadFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Layout formulario ── */
.upload-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px) {
  .upload-form {
    grid-template-columns: 1fr 360px;
  }
  .upload-form-footer { grid-column: 1 / -1; }
}

/* ── Drop Zone ── */
.upload-dropzone {
  position: relative;
  border: 2px dashed var(--ow-border);
  border-radius: 4px;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
  background: var(--ow-surface);
  margin-bottom: 1.5rem;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-dropzone:hover {
  border-color: var(--ow-gold);
  background: oklch(98% 0.003 85);
}
.upload-dropzone.is-dragover {
  border-color: var(--ow-gold);
  background: oklch(96% 0.008 85);
  border-style: solid;
}
.upload-dropzone.has-image {
  border-style: solid;
  border-color: var(--ow-border);
  padding: 0.5rem;
  cursor: default;
}
.upload-dropzone-content { pointer-events: none; }
.upload-dropzone-icon {
  margin-bottom: 1rem;
  opacity: 0.5;
  transition: opacity 0.3s, transform 0.3s;
}
.upload-dropzone:hover .upload-dropzone-icon {
  opacity: 0.8;
  transform: scale(1.05);
}
.upload-dropzone-text {
  font-family: var(--ow-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ow-ink);
  margin-bottom: 0.35rem;
}
.upload-dropzone-hint {
  font-size: 0.85rem;
  color: var(--ow-muted);
  margin-bottom: 0.75rem;
}
.upload-dropzone-formats {
  display: inline-block;
  font-family: var(--ow-accent);
  font-size: 0.72rem;
  color: var(--ow-muted);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--ow-border);
  border-radius: 999px;
}
.upload-input-file {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  z-index: -1;
}

/* ── Preview ── */
.upload-preview {
  position: relative;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
}
.upload-preview img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: oklch(92% 0.005 85);
}
.upload-preview-remove {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: oklch(18% 0.012 275 / 0.7);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  backdrop-filter: blur(4px);
}
.upload-preview-remove:hover {
  background: oklch(52% 0.18 25);
  transform: scale(1.08);
}

/* ── Campos ── */
.upload-field { margin-bottom: 1.35rem; }
.upload-field--half { margin-bottom: 0; }
.upload-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.upload-label {
  display: block;
  font-family: var(--ow-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ow-ink);
  margin-bottom: 0.35rem;
}
.upload-label--sm {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ow-muted);
}
.upload-required { color: var(--ow-red); }

/* ── AI Describe Star ── */
.upload-ai-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  margin-left: 0.5rem;
  cursor: pointer;
  color: var(--ow-muted);
  vertical-align: middle;
  transition: all 0.25s ease;
  position: relative;
  top: -0.1em;
}
.upload-ai-star:hover:not(:disabled) {
  color: var(--ow-gold);
  border-color: color-mix(in srgb, var(--ow-gold) 30%, transparent);
  background: color-mix(in srgb, var(--ow-gold) 8%, transparent);
}
.upload-ai-star:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.upload-ai-star.is-loading {
  pointer-events: none;
  opacity: 1 !important;
  color: var(--ow-gold);
  background: color-mix(in srgb, var(--ow-gold) 12%, transparent);
  border-color: color-mix(in srgb, var(--ow-gold) 45%, transparent);
  box-shadow: inset 0 0 6px color-mix(in srgb, var(--ow-gold) 35%, transparent), 0 0 0 0 color-mix(in srgb, var(--ow-gold) 30%, transparent);
  animation: upload-ai-glow 1s ease-in-out infinite;
}
.upload-ai-star.is-loading .upload-ai-star-icon {
  display: inline-block;
  filter: drop-shadow(0 0 4px var(--ow-gold)) drop-shadow(0 0 8px color-mix(in srgb, var(--ow-gold) 55%, transparent));
  animation: upload-ai-star-pulse 1s ease-in-out infinite;
}
@keyframes upload-ai-glow {
  0%   { box-shadow: inset 0 0 3px color-mix(in srgb, var(--ow-gold) 25%, transparent), 0 0 0 0 color-mix(in srgb, var(--ow-gold) 20%, transparent); }
  50%  { box-shadow: inset 0 0 10px color-mix(in srgb, var(--ow-gold) 60%, transparent), 0 0 12px 4px color-mix(in srgb, var(--ow-gold) 45%, transparent); }
  100% { box-shadow: inset 0 0 3px color-mix(in srgb, var(--ow-gold) 25%, transparent), 0 0 0 0 color-mix(in srgb, var(--ow-gold) 20%, transparent); }
}
@keyframes upload-ai-star-pulse {
  0%   { transform: scale(1) rotate(0deg); opacity: 0.75; }
  50%  { transform: scale(1.24) rotate(7deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 0.75; }
}
.upload-ai-star-icon {
  font-size: 1rem;
  line-height: 1;
}
.upload-ai-status {
  display: none;
  margin-left: 0.45rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ow-gold);
  letter-spacing: 0.01em;
  vertical-align: middle;
}
.upload-ai-status.is-visible {
  display: inline-flex;
  align-items: center;
}
.upload-ai-status.is-error {
  color: var(--ow-red);
}
.upload-ai-dots::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: upload-ai-dots 1.1s steps(4, end) infinite;
}
@keyframes upload-ai-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

.upload-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ow-border);
  border-radius: 4px;
  font-family: var(--ow-body);
  font-size: 0.92rem;
  color: var(--ow-ink);
  background: var(--ow-surface);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.upload-input:focus {
  outline: none;
  border-color: var(--ow-gold);
  box-shadow: 0 0 0 3px oklch(68% 0.12 80 / 0.12);
}
.upload-input::placeholder { color: oklch(72% 0.005 275); }
.upload-textarea { resize: vertical; min-height: 100px; }
.upload-field-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
}
.upload-counter {
  font-family: var(--ow-accent);
  font-size: 0.7rem;
  color: var(--ow-muted);
}
.upload-hint {
  display: block;
  font-family: var(--ow-accent);
  font-size: 0.72rem;
  color: var(--ow-muted);
  margin-top: 0.25rem;
}

/* ── Precio ── */
.upload-price-wrap {
  position: relative;
}
.upload-currency-sign {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ow-accent);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ow-muted);
  pointer-events: none;
}
.upload-input--price {
  padding-left: 2rem;
}

/* ── Formatos ref ── */
.upload-formatos-ref {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.upload-formato-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--ow-border);
  border-radius: 4px;
  background: var(--ow-surface);
  cursor: pointer;
  font-family: var(--ow-accent);
  font-size: 0.78rem;
  transition: all 0.2s ease;
}
.upload-formato-chip:hover {
  border-color: var(--ow-gold);
  background: oklch(68% 0.12 80 / 0.06);
}
.upload-formato-name { color: var(--ow-ink); font-weight: 500; }
.upload-formato-price { color: var(--ow-gold); font-weight: 600; }

/* ── Orientación ── */
.upload-orient-row {
  display: flex;
  gap: 0.6rem;
}
.upload-orient-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--ow-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--ow-surface);
}
.upload-orient-card:hover {
  border-color: oklch(68% 0.12 80 / 0.4);
}
.upload-orient-card.is-active {
  border-color: var(--ow-gold);
  background: oklch(68% 0.12 80 / 0.06);
}
.upload-orient-card input { display: none; }
.upload-orient-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ow-muted);
  transition: color 0.2s;
}
.upload-orient-card.is-active .upload-orient-icon { color: var(--ow-gold); }
.upload-orient-label {
  font-family: var(--ow-accent);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ow-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Cards laterales ── */
.upload-card {
  background: var(--ow-surface);
  border: 1px solid var(--ow-border);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  transition: box-shadow 0.3s ease;
}
.upload-card:hover {
  box-shadow: 0 4px 16px oklch(18% 0.012 275 / 0.05);
}
.upload-card-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}
.upload-card-title {
  font-family: var(--ow-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ow-ink);
  margin: 0;
}
.upload-card-hint {
  font-size: 0.82rem;
  color: var(--ow-muted);
  margin: -0.75rem 0 1.25rem;
  line-height: 1.5;
}

/* ── Footer / Submit ── */
.upload-form-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ow-border);
}
.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 180px;
  justify-content: center;
}
.upload-btn-text,
.upload-btn-loader {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.upload-btn.is-loading .upload-btn-text { display: none; }
.upload-btn.is-loading .upload-btn-loader { display: inline-flex !important; }
.upload-btn-cancel { font-size: 0.85rem; }

@keyframes uploadSpin {
  to { transform: rotate(360deg); }
}
.upload-spinner {
  animation: uploadSpin 0.8s linear infinite;
}

/* Responsive subir obra */
@media (max-width: 899px) {
  .upload-hero { padding: 7rem 1.25rem 3rem; }
  .upload-orient-row { gap: 0.4rem; }
  .upload-orient-card { padding: 0.6rem 0.4rem; }
}
@media (max-width: 500px) {
  .upload-dropzone { padding: 2rem 1rem; min-height: 200px; }
  .upload-field-row { grid-template-columns: 1fr; }
  .upload-form-footer { flex-direction: column; align-items: stretch; }
  .upload-btn { width: 100%; }
  .upload-btn-cancel { text-align: center; }
}

@media(max-width:767px){
    .hero h1 { font-size:2.25rem; }
    .featured-grid, .gallery-grid { grid-template-columns:repeat(2,1fr); gap:.85rem; }
    .masonry { column-count:2; column-gap:.85rem; }
    .work-card-overlay { opacity:1; transform:none; padding:1rem; }
    .filters-inner { align-items:stretch; }
    .results-count { margin-left:0; width:100%; }
}

/* Photographer dashboard — private panel */
.photo-dash { min-height:100vh; display:grid; grid-template-columns:260px minmax(0,1fr); background:#0c0c0c; color:#f5f5f0; }
.photo-dash * { box-sizing:border-box; }
.photo-dash-side { position:sticky; top:0; height:100vh; background:#171717; border-right:1px solid #2c2c2c; display:flex; flex-direction:column; padding:1rem; }
.photo-dash-brand { display:flex; align-items:center; gap:.75rem; padding:.5rem .35rem 1.25rem; border-bottom:1px solid #2c2c2c; }
.photo-dash-logo { width:34px; height:34px; border-radius:8px; background:#c89b5e; color:#0c0c0c; display:grid; place-items:center; font-family:var(--ow-display); font-weight:700; }
.photo-dash-brand strong { display:block; color:#fff; font-family:var(--ow-display); }
.photo-dash-brand span, .photo-dash-user span { display:block; color:#6b6b66; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.photo-dash-nav { display:flex; flex-direction:column; gap:.35rem; padding:1rem 0; flex:1; }
.photo-dash-nav a { display:flex; align-items:center; gap:.65rem; padding:.72rem .75rem; border-radius:10px; color:#a3a39e; text-decoration:none; font-size:.86rem; transition:.2s ease; }
.photo-dash-nav a:hover, .photo-dash-nav a.is-active { background:#242424; color:#f5f5f0; }
.photo-dash-nav a span { color:#c89b5e; width:1.15rem; text-align:center; }
.photo-dash-user { display:flex; align-items:center; gap:.7rem; border-top:1px solid #2c2c2c; padding-top:1rem; }
.photo-dash-user img, .photo-dash-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; background:#c89b5e33; color:#c89b5e; display:grid; place-items:center; font-size:.78rem; font-weight:700; }
.photo-dash-user strong { color:#f5f5f0; font-size:.85rem; }
.photo-dash-main { min-width:0; padding:1.5rem; }
.photo-dash-top { display:flex; justify-content:space-between; gap:1.5rem; align-items:flex-start; margin-bottom:1.35rem; }
.photo-dash-kicker { color:#c89b5e; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600; margin-bottom:.35rem; }
.photo-dash-top h1 { color:#f5f5f0; font-size:clamp(1.6rem,3vw,2.5rem); margin:0; }
.photo-dash-top p { color:#a3a39e; max-width:620px; margin:.45rem 0 0; }
.photo-dash-actions { display:flex; gap:.65rem; flex-wrap:wrap; }
.photo-dash-btn { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:.65rem .95rem; border:1px solid #363636; border-radius:10px; color:#f5f5f0; background:#1a1a1a; text-decoration:none; font-size:.82rem; font-weight:600; transition:.2s ease; }
.photo-dash-btn:hover { border-color:#c89b5e66; background:#242424; }
.photo-dash-btn.primary { background:#c89b5e; border-color:#c89b5e; color:#0c0c0c; }
.photo-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.photo-kpi-card { background:#1a1a1a; border:1px solid #2c2c2c; border-radius:16px; padding:1.15rem; position:relative; overflow:hidden; }
.photo-kpi-card::after { content:''; position:absolute; right:-40px; top:-40px; width:110px; height:110px; border-radius:50%; background:#c89b5e; opacity:.05; }
.photo-kpi-card span { display:block; color:#6b6b66; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.photo-kpi-card strong { display:block; color:#f5f5f0; font-family:var(--ow-display); font-size:2rem; font-weight:400; margin:.35rem 0 .1rem; }
.photo-kpi-card em { color:#a3a39e; font-style:normal; font-size:.78rem; }
.photo-dash-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr); gap:1rem; margin-bottom:1rem; }
.photo-panel { background:#1a1a1a; border:1px solid #2c2c2c; border-radius:16px; overflow:hidden; }
.photo-panel-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.15rem; border-bottom:1px solid #2c2c2c; }
.photo-panel-head h2 { color:#f5f5f0; font-family:var(--ow-body); font-size:.96rem; margin:0; }
.photo-panel-head a, .photo-panel-head span { color:#c89b5e; text-decoration:none; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; }
.photo-art-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.85rem; padding:1rem; }
.photo-art-card { background:#242424; border:1px solid #2c2c2c; border-radius:12px; overflow:hidden; }
.photo-art-img { position:relative; aspect-ratio:4/5; background:#111; overflow:hidden; }
.photo-art-img img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-status { position:absolute; top:.55rem; left:.55rem; padding:.22rem .5rem; border-radius:999px; background:#0c0c0ccc; color:#fff; font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; }
.status-activo { color:#78c58a; }
.status-pendiente { color:#c89b5e; }
.status-borrador, .status-inactivo { color:#a3a39e; }
.photo-art-info { padding:.75rem; }
.photo-art-info h3 { color:#f5f5f0; font-family:var(--ow-body); font-size:.86rem; margin:0 0 .5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.photo-art-info div { display:flex; justify-content:space-between; gap:.75rem; align-items:center; }
.photo-art-info span { color:#c89b5e; font-family:monospace; }
.photo-art-info small { color:#6b6b66; }
.photo-rank-list { padding:.65rem 1rem 1rem; display:flex; flex-direction:column; gap:.7rem; }
.photo-rank-item { display:grid; grid-template-columns:24px 44px minmax(0,1fr); gap:.7rem; align-items:center; padding:.55rem; background:#242424; border-radius:10px; }
.rank-num { color:#c89b5e; font-family:monospace; }
.photo-rank-item img { width:44px; height:44px; object-fit:cover; border-radius:8px; background:#111; }
.photo-rank-item strong { color:#f5f5f0; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.82rem; }
.photo-rank-item small, .photo-muted { color:#6b6b66; font-size:.75rem; }
.photo-empty { padding:3rem 1rem; text-align:center; }
.photo-sales-table { padding:.5rem 1rem 1rem; }
.photo-sales-row { display:grid; grid-template-columns:minmax(0,1fr) 110px 120px 110px; gap:1rem; padding:.8rem 0; border-bottom:1px solid #2c2c2c; color:#a3a39e; font-size:.84rem; }
.photo-sales-row.head { color:#6b6b66; text-transform:uppercase; font-size:.68rem; letter-spacing:.08em; font-weight:700; }
.photo-sales-row:last-child { border-bottom:none; }
.photo-sales-row span:first-child { color:#f5f5f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:980px){ .photo-dash{grid-template-columns:1fr;} .photo-dash-side{position:relative;height:auto;} .photo-dash-main{padding:1rem;} .photo-dash-top{flex-direction:column;} .photo-kpi-grid,.photo-dash-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .photo-kpi-grid,.photo-dash-grid{grid-template-columns:1fr;} .photo-sales-row{grid-template-columns:1fr 70px 80px;} .photo-sales-row span:last-child{display:none;} }

/* Dashboard fotógrafos — diseño dashboardfotografos.html */
.fd-admin-shell{--bg-base:#0C0C0C;--bg-surface:#1A1A1A;--bg-raised:#242424;--bg-overlay:#2E2E2E;--fg-primary:#F5F5F0;--fg-secondary:#A3A39E;--fg-muted:#6B6B66;--accent-gold:#C89B5E;--accent-gold-dim:#C89B5E33;--accent-stone:#6B8FA3;--success:#4A7C5B;--success-dim:#4A7C5B1A;--error:#B85450;--error-dim:#B854501A;--warning:#C49B4A;--warning-dim:#C49B4A1A;--border:#2C2C2C;--border-light:#363636;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--font-display:'Playfair Display',Georgia,serif;--font-body:'Inter',-apple-system,sans-serif;--font-accent:'DM Sans',sans-serif;--font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;--shadow-card:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);--shadow-elevated:0 4px 12px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3);--sidebar-w:64px;--sidebar-w-expanded:220px;--topbar-h:56px;--transition:200ms ease-out;background:var(--bg-base);color:var(--fg-primary);font-family:var(--font-body);margin-top:-1px}.fd-admin-shell *{box-sizing:border-box}.fd-admin-shell h1,.fd-admin-shell h2,.fd-admin-shell h3{font-family:var(--font-display);font-weight:600;line-height:1.3;letter-spacing:-.01em}.fd-admin-shell p{font-size:.875rem;color:var(--fg-secondary);line-height:1.6}.fd-admin-shell .admin-layout{display:flex;min-height:calc(100vh - 1px);background:var(--bg-base);overflow:hidden}.fd-admin-shell .admin-main{flex:1;display:flex;flex-direction:column;min-width:0;margin-left:var(--sidebar-w);transition:margin var(--transition)}
.fd-admin-shell .sidebar{position:absolute;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:20;transition:width var(--transition);overflow:hidden}.fd-admin-shell .sidebar:hover{width:var(--sidebar-w-expanded)}.fd-admin-shell .sidebar:hover~.admin-main{margin-left:var(--sidebar-w-expanded)}.fd-admin-shell .sidebar-brand{height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--border);flex-shrink:0;overflow:hidden}.fd-admin-shell .logo-icon{width:32px;height:32px;border-radius:6px;background:var(--accent-gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--bg-base);flex-shrink:0}.fd-admin-shell .logo-text{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--fg-primary);white-space:nowrap;opacity:0;transition:opacity var(--transition)}.fd-admin-shell .sidebar:hover .logo-text{opacity:1}.fd-admin-shell .sidebar-nav{flex:1;padding:8px 0;overflow-y:auto}.fd-admin-shell .sidebar-nav a{display:flex;align-items:center;gap:12px;padding:10px 16px;color:var(--fg-secondary);text-decoration:none;font-size:.82rem;font-weight:400;white-space:nowrap;transition:all var(--transition);border-left:2px solid transparent;position:relative}.fd-admin-shell .nav-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;color:var(--fg-muted);transition:all var(--transition)}.fd-admin-shell .nav-label{opacity:0;transition:opacity var(--transition)}.fd-admin-shell .sidebar:hover .nav-label{opacity:1}.fd-admin-shell .sidebar-nav a:hover{background:var(--bg-raised);color:var(--fg-primary)}.fd-admin-shell .sidebar-nav a:hover .nav-icon,.fd-admin-shell .sidebar-nav a.active .nav-icon{color:var(--accent-gold)}.fd-admin-shell .sidebar-nav a.active{background:var(--bg-raised);color:var(--fg-primary);border-left-color:var(--accent-gold)}.fd-admin-shell .nav-group-label{padding:12px 16px 4px;font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-muted);font-family:var(--font-accent);white-space:nowrap;opacity:0;transition:opacity var(--transition)}.fd-admin-shell .sidebar:hover .nav-group-label{opacity:1}.fd-admin-shell .sidebar-footer{height:56px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 16px;flex-shrink:0;overflow:hidden}.fd-admin-shell .admin-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-gold-dim);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;color:var(--accent-gold);flex-shrink:0}.fd-admin-shell .admin-info{white-space:nowrap;opacity:0;transition:opacity var(--transition)}.fd-admin-shell .sidebar:hover .admin-info{opacity:1}.fd-admin-shell .admin-info .name{font-size:.8rem;color:var(--fg-primary);font-weight:500}.fd-admin-shell .admin-info .role{font-size:.65rem;color:var(--fg-muted);font-family:var(--font-accent);text-transform:uppercase;letter-spacing:.06em}
.fd-admin-shell .topbar{height:var(--topbar-h);background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0;gap:16px}.fd-admin-shell .topbar-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.fd-admin-shell .topbar-breadcrumb{font-size:.8rem;color:var(--fg-muted);font-family:var(--font-accent);display:flex;align-items:center;gap:6px}.fd-admin-shell .topbar-breadcrumb span{color:var(--fg-secondary)}.fd-admin-shell .sep{color:var(--fg-muted);font-size:.6rem}.fd-admin-shell .topbar-right{display:flex;align-items:center;gap:12px}.fd-admin-shell .period-select{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px;color:var(--fg-secondary);font-size:.75rem;font-family:var(--font-accent);cursor:pointer}.fd-admin-shell .btn-action{background:var(--accent-gold);color:var(--bg-base);border:none;border-radius:var(--radius-sm);padding:6px 14px;font-size:.75rem;font-family:var(--font-accent);font-weight:600;cursor:pointer;transition:all var(--transition);letter-spacing:.03em;text-decoration:none}.fd-admin-shell .btn-action:hover{background:#D4AF6E;transform:translateY(-1px)}.fd-admin-shell .main-content{flex:1;overflow-y:auto;padding:0;position:relative}.fd-admin-shell .content-panel{padding:24px;display:none}.fd-admin-shell .content-panel.active{display:block;animation:fadeSlideIn .3s ease-out}@keyframes fadeSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fd-admin-shell .welcome-banner{background:linear-gradient(135deg,var(--bg-surface) 0%,#151515 100%);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.fd-admin-shell .wb-left{display:flex;align-items:center;gap:16px}.fd-admin-shell .wb-avatar{width:48px;height:48px;border-radius:50%;background:var(--accent-gold-dim);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:600;color:var(--accent-gold);flex-shrink:0;font-family:var(--font-display)}.fd-admin-shell .wb-info h2{font-size:1.2rem;margin-bottom:2px;color:var(--fg-primary)}.fd-admin-shell .wb-info p{font-size:.8rem;color:var(--fg-muted)}.fd-admin-shell .wb-stats{display:flex;gap:24px}.fd-admin-shell .wb-stat{text-align:center}.fd-admin-shell .wb-stat .num{font-family:var(--font-display);font-size:1.3rem;color:var(--fg-primary)}.fd-admin-shell .wb-stat .lbl{font-size:.65rem;color:var(--fg-muted);font-family:var(--font-accent);text-transform:uppercase;letter-spacing:.06em}
.fd-admin-shell .kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:24px}.fd-admin-shell .kpi-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden;transition:all var(--transition)}.fd-admin-shell .kpi-card:hover{border-color:var(--border-light);box-shadow:var(--shadow-card)}.fd-admin-shell .kpi-bg{position:absolute;top:-40%;right:-20%;width:120px;height:120px;border-radius:50%;opacity:.04;pointer-events:none}.fd-admin-shell .kpi-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.fd-admin-shell .kpi-icon{width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}.fd-admin-shell .kpi-icon.gold{background:var(--accent-gold-dim);color:var(--accent-gold)}.fd-admin-shell .kpi-icon.stone{background:#6B8FA31A;color:var(--accent-stone)}.fd-admin-shell .kpi-icon.green{background:var(--success-dim);color:var(--success)}.fd-admin-shell .kpi-value{font-family:var(--font-display);font-size:1.8rem;font-weight:400;color:var(--fg-primary);line-height:1.2;letter-spacing:-.02em}.fd-admin-shell .kpi-label{font-size:.75rem;color:var(--fg-muted);font-family:var(--font-accent);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}.fd-admin-shell .kpi-sub{font-size:.7rem;color:var(--fg-muted);margin-top:6px;font-family:var(--font-accent)}.fd-admin-shell .fd-totals{display:flex;gap:24px;margin-bottom:24px;flex-wrap:wrap;padding:0 4px}.fd-admin-shell .fd-totals div{display:flex;align-items:baseline;gap:8px}.fd-admin-shell .fd-totals span{font-family:var(--font-display);font-size:1.3rem;color:var(--fg-primary)}.fd-admin-shell .fd-totals small{font-size:.7rem;color:var(--fg-muted);font-family:var(--font-accent)}
.fd-admin-shell .dash-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}@media(min-width:1200px){.fd-admin-shell .dash-grid{grid-template-columns:1.6fr 1fr}}.fd-admin-shell .dash-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.fd-admin-shell .dash-card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}.fd-admin-shell .dash-card-header h3{font-size:.9rem;font-weight:600;font-family:var(--font-body);color:var(--fg-primary);margin:0}.fd-admin-shell .dash-action{font-size:.7rem;color:var(--accent-gold);font-family:var(--font-accent);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;background:none;border:none;text-decoration:none}.fd-admin-shell .dash-card-body{padding:20px}.fd-admin-shell .chart-summary{display:flex;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}.fd-admin-shell .cs-val{font-family:var(--font-display);font-size:1.2rem;color:var(--fg-primary)}.fd-admin-shell .cs-label{font-size:.65rem;color:var(--fg-muted);font-family:var(--font-accent);text-transform:uppercase;letter-spacing:.06em}.fd-admin-shell .chart-bars{display:flex;align-items:flex-end;gap:4px;height:140px;padding:0 4px}.fd-admin-shell .chart-bar{flex:1;border-radius:3px 3px 0 0;min-height:4px;position:relative;transition:all var(--transition)}.fd-admin-shell .bar-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--bg-overlay);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px;font-size:.65rem;color:var(--fg-primary);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--transition);margin-bottom:4px;z-index:5}.fd-admin-shell .chart-bar:hover .bar-tooltip{opacity:1}.fd-admin-shell .chart-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:.6rem;color:var(--fg-muted);font-family:var(--font-accent)}.fd-admin-shell .chart-legend{display:flex;gap:16px;margin-top:12px;font-size:.72rem;color:var(--fg-secondary)}.fd-admin-shell .leg-item{display:flex;align-items:center;gap:6px}.fd-admin-shell .leg-dot{width:8px;height:8px;border-radius:2px}
.fd-admin-shell .activity-timeline{display:flex;flex-direction:column;gap:0}.fd-admin-shell .timeline-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);position:relative}.fd-admin-shell .timeline-item:last-child{border-bottom:none}.fd-admin-shell .timeline-item::before{content:'';position:absolute;left:5px;top:28px;bottom:0;width:1px;background:var(--border)}.fd-admin-shell .timeline-item:last-child::before{display:none}.fd-admin-shell .timeline-dot{width:12px;height:12px;border-radius:50%;background:var(--accent-gold);flex-shrink:0;margin-top:4px;position:relative;z-index:1}.fd-admin-shell .timeline-dot.stone{background:var(--accent-stone)}.fd-admin-shell .timeline-dot.green{background:var(--success)}.fd-admin-shell .timeline-content{flex:1;font-size:.82rem}.fd-admin-shell .tl-title{color:var(--fg-primary);font-weight:500}.fd-admin-shell .tl-desc{font-size:.75rem;color:var(--fg-muted);margin-top:1px}.fd-admin-shell .tl-time{font-size:.65rem;color:var(--fg-muted);font-family:var(--font-accent);margin-top:4px;display:block}
.fd-admin-shell .top-works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.fd-admin-shell .top-work-card{background:var(--bg-raised);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition);cursor:pointer;position:relative}.fd-admin-shell .top-work-card:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}.fd-admin-shell .tw-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg-overlay)}.fd-admin-shell .tw-info{padding:10px 12px}.fd-admin-shell .tw-title{font-size:.78rem;color:var(--fg-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-admin-shell .tw-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.fd-admin-shell .tw-sales{font-size:.65rem;color:var(--fg-muted);font-family:var(--font-accent)}.fd-admin-shell .tw-earnings{font-size:.75rem;color:var(--accent-gold);font-weight:500}.fd-admin-shell .tw-rank{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;background:var(--accent-gold);color:var(--bg-base);font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--font-accent)}.fd-admin-shell .table-wrap{overflow-x:auto}.fd-admin-shell .data-table{width:100%;border-collapse:collapse;font-size:.82rem}.fd-admin-shell .data-table th{text-align:left;padding:10px 12px;font-family:var(--font-accent);font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-muted);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap}.fd-admin-shell .data-table td{padding:12px;border-bottom:1px solid var(--border);color:var(--fg-secondary);white-space:nowrap}.fd-admin-shell .data-table tr:hover td{background:var(--bg-raised)}.fd-admin-shell .td-primary{color:var(--fg-primary)!important;font-weight:500}.fd-admin-shell .td-gold{color:var(--accent-gold)!important;font-weight:500}.fd-admin-shell .status-badge{display:inline-flex;padding:2px 8px;border-radius:20px;font-size:.65rem;font-weight:500;font-family:var(--font-accent)}.fd-admin-shell .status-badge.paid{background:var(--success-dim);color:var(--success)}.fd-admin-shell .status-badge.pending{background:var(--warning-dim);color:var(--warning)}
@media(max-width:1023px){.fd-admin-shell .sidebar{width:var(--sidebar-w)}.fd-admin-shell .logo-text,.fd-admin-shell .nav-label,.fd-admin-shell .nav-group-label,.fd-admin-shell .admin-info{opacity:0!important}.fd-admin-shell .admin-main{margin-left:var(--sidebar-w)!important}.fd-admin-shell .welcome-banner{flex-direction:column;align-items:flex-start}.fd-admin-shell .wb-stats{width:100%;justify-content:space-around}.fd-admin-shell .kpi-grid{grid-template-columns:repeat(2,1fr)}.fd-admin-shell .period-select{display:none}}@media(max-width:767px){.fd-admin-shell .sidebar{display:none}.fd-admin-shell .admin-main{margin-left:0!important}.fd-admin-shell .content-panel{padding:16px}.fd-admin-shell .kpi-grid{grid-template-columns:1fr}.fd-admin-shell .top-works-grid{grid-template-columns:repeat(2,1fr)}.fd-admin-shell .topbar{padding:0 12px}.fd-admin-shell .btn-action{padding:5px 10px;font-size:.7rem}}