/* ============================================
   DTF Utopía - Design System & Main Styles
   ============================================ */

/* ── Google Font ───────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Custom Properties ─────────────────────── */
:root {
    /* Brand Colors */
    --primary: #6C3CE0;
    --primary-light: #8B5CF6;
    --primary-dark: #5521C6;
    --primary-glow: rgba(108, 60, 224, 0.3);

    --secondary: #06D6A0;
    --secondary-light: #34E0B5;
    --secondary-dark: #05B88A;

    --accent: #FF6B6B;
    --accent-light: #FF8A8A;

    /* Neutral */
    --dark-900: #0A0A0F;
    --dark-800: #12121A;
    --dark-700: #1A1A2E;
    --dark-600: #232340;
    --dark-500: #2D2D50;
    --gray-400: #6B7280;
    --gray-300: #9CA3AF;
    --gray-200: #D1D5DB;
    --gray-100: #F3F4F6;
    --white: #FFFFFF;

    /* Status Colors */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* Typography */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 30px rgba(108, 60, 224, 0.2);
    --shadow-glow-strong: 0 0 60px rgba(108, 60, 224, 0.35);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Container */
    --container-max: 1200px;
    --container-narrow: 800px;
}

/* ── Reset & Base ──────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--gray-100);
    background: var(--dark-900);
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--secondary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Container ─────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
}
.container-narrow {
    max-width: var(--container-narrow);
}

/* ── Navbar ────────────────────────────────────── */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(108, 60, 224, 0.15);
    transition: background var(--transition-base), box-shadow var(--transition-base);
}
.navbar.scrolled {
    background: rgba(10, 10, 15, 0.95);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    gap: var(--space-6);
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--white);
    text-decoration: none;
    letter-spacing: -0.5px;
}
.navbar-brand:hover {
    color: var(--white);
}
.navbar-brand .brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: var(--font-size-lg);
}
.navbar-brand .brand-highlight {
    background: linear-gradient(135deg, var(--primary-light), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
}
.nav-links a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--gray-300);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active {
    color: var(--white);
    background: rgba(108, 60, 224, 0.15);
}
.nav-links a.active {
    color: var(--primary-light);
}

.nav-cta {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(108, 60, 224, 0.3);
}
.nav-cta:hover {
    box-shadow: 0 4px 20px rgba(108, 60, 224, 0.5) !important;
    transform: translateY(-1px);
}

/* Mobile menu toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: var(--font-size-2xl);
    cursor: pointer;
    padding: var(--space-2);
}

/* ── Hero Section ──────────────────────────────── */
.hero {
    position: relative;
    padding: calc(80px + var(--space-20)) 0 var(--space-20);
    overflow: hidden;
    min-height: 85vh;
    display: flex;
    align-items: center;
}
.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 50%, rgba(108, 60, 224, 0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 30%, rgba(6, 214, 160, 0.08) 0%, transparent 50%);
    pointer-events: none;
    animation: heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.05); }
}
.hero-content {
    position: relative;
    z-index: 1;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(108, 60, 224, 0.15);
    border: 1px solid rgba(108, 60, 224, 0.3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--primary-light);
    font-weight: 600;
    margin-bottom: var(--space-6);
    animation: fadeInUp 0.6s ease;
}
.hero-badge .badge-dot {
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.85); }
}
.hero h1 {
    font-size: var(--font-size-5xl);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: var(--space-6);
    animation: fadeInUp 0.6s ease 0.1s both;
}
.hero h1 .gradient-text {
    background: linear-gradient(135deg, var(--primary-light), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--gray-300);
    max-width: 500px;
    margin-bottom: var(--space-8);
    animation: fadeInUp 0.6s ease 0.2s both;
}
.hero-actions {
    display: flex;
    gap: var(--space-4);
    animation: fadeInUp 0.6s ease 0.3s both;
}
.hero-stats {
    display: flex;
    gap: var(--space-10);
    margin-top: var(--space-12);
    animation: fadeInUp 0.6s ease 0.4s both;
}
.hero-stat {
    text-align: center;
}
.hero-stat .stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--white);
}
.hero-stat .stat-label {
    font-size: var(--font-size-sm);
    color: var(--gray-400);
    margin-top: var(--space-1);
}

/* Hero promo card */
.hero-promo {
    position: relative;
    animation: fadeInRight 0.8s ease 0.3s both;
}
.promo-card {
    position: relative;
    background: linear-gradient(145deg, var(--dark-700), var(--dark-800));
    border: 1px solid rgba(108, 60, 224, 0.2);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    text-align: center;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
}
.promo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.promo-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    background: linear-gradient(135deg, var(--accent), #FF3366);
    color: var(--white);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
}
.promo-card h3 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    margin-bottom: var(--space-4);
    color: var(--white);
}
.promo-price {
    margin-bottom: var(--space-6);
}
.promo-price .old-price {
    font-size: var(--font-size-lg);
    color: var(--gray-400);
    text-decoration: line-through;
    margin-right: var(--space-2);
}
.promo-price .new-price {
    font-size: var(--font-size-4xl);
    font-weight: 900;
    color: var(--secondary);
}
.promo-price .price-unit {
    font-size: var(--font-size-lg);
    color: var(--gray-300);
    font-weight: 400;
}
.promo-price .price-note {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    margin-top: var(--space-1);
}
.promo-features {
    list-style: none;
    margin-bottom: var(--space-8);
    text-align: left;
}
.promo-features li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--gray-200);
    font-size: var(--font-size-sm);
}
.promo-features li svg {
    width: 18px;
    height: 18px;
    color: var(--secondary);
    flex-shrink: 0;
}

/* ── Buttons ───────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    box-shadow: 0 4px 15px rgba(108, 60, 224, 0.3);
}
.btn-primary:hover {
    box-shadow: 0 6px 25px rgba(108, 60, 224, 0.5);
    transform: translateY(-2px);
    color: var(--white);
}
.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--gray-100);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--white);
}
.btn-success {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: var(--dark-900);
    font-weight: 700;
}
.btn-success:hover {
    box-shadow: 0 6px 25px rgba(6, 214, 160, 0.4);
    transform: translateY(-2px);
    color: var(--dark-900);
}
.btn-danger {
    background: linear-gradient(135deg, var(--danger), #DC2626);
    color: var(--white);
}
.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-base);
    border-radius: var(--radius-xl);
}
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}
.btn-block {
    width: 100%;
}

/* ── Product Cards ─────────────────────────────── */
.products-section {
    padding: var(--space-24) 0;
    position: relative;
}
.products-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(108, 60, 224, 0.3), transparent);
}
.section-header {
    text-align: center;
    margin-bottom: var(--space-16);
}
.section-tag {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-4);
}
.section-title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -1px;
}
.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--gray-400);
    margin-top: var(--space-3);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.product-card {
    position: relative;
    background: linear-gradient(160deg, var(--dark-700), var(--dark-800));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    transition: all var(--transition-slow);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-glow-strong);
    border-color: rgba(108, 60, 224, 0.3);
}
.product-card.featured {
    border-color: rgba(108, 60, 224, 0.3);
    box-shadow: var(--shadow-glow);
    transform: scale(1.05);
}
.product-card.featured:hover {
    transform: scale(1.05) translateY(-8px);
}
.product-card.coming-soon {
    opacity: 0.7;
}
.product-card .card-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}
.badge-promo {
    background: linear-gradient(135deg, var(--accent), #FF3366);
    color: var(--white);
}
.badge-coming {
    background: rgba(255, 255, 255, 0.1);
    color: var(--gray-300);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.badge-popular {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
}
.product-card .card-image {
    position: relative;
    height: 220px;
    background: linear-gradient(135deg, var(--dark-600), var(--dark-700));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-card .card-image .placeholder-icon {
    font-size: 4rem;
    opacity: 0.3;
}
.product-card .card-body {
    padding: var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-card .card-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-2);
}
.product-card .card-desc {
    font-size: var(--font-size-sm);
    color: var(--gray-400);
    margin-bottom: var(--space-4);
    flex: 1;
}
.product-card .card-price {
    margin-bottom: var(--space-4);
}
.product-card .card-price .price-old {
    font-size: var(--font-size-sm);
    color: var(--gray-400);
    text-decoration: line-through;
}
.product-card .card-price .price-current {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--secondary);
}
.product-card .card-price .price-current.no-promo {
    color: var(--white);
}
.product-card .card-price .per-unit {
    font-size: var(--font-size-sm);
    color: var(--gray-400);
    font-weight: 400;
}

/* ── Flat Rate Banner ──────────────────────────── */
.flat-rate-banner {
    background: linear-gradient(135deg, var(--dark-700), var(--dark-600));
    border: 1px solid rgba(6, 214, 160, 0.2);
    border-radius: var(--radius-2xl);
    padding: var(--space-10) var(--space-12);
    text-align: center;
    margin: var(--space-16) 0;
    position: relative;
    overflow: hidden;
}
.flat-rate-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
}
.flat-rate-banner h2 {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--white);
    margin-bottom: var(--space-3);
}
.flat-rate-banner h2 span {
    color: var(--secondary);
}
.flat-rate-banner p {
    font-size: var(--font-size-lg);
    color: var(--gray-300);
    max-width: 600px;
    margin: 0 auto;
}

/* ── Forms ─────────────────────────────────────── */
.form-group {
    margin-bottom: var(--space-5);
}
.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-200);
    margin-bottom: var(--space-2);
}
.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--dark-700);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    color: var(--white);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    outline: none;
}
.form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(108, 60, 224, 0.15);
}
.form-control::placeholder {
    color: var(--gray-400);
}
.form-hint {
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    margin-top: var(--space-1);
}
.form-error {
    font-size: var(--font-size-xs);
    color: var(--danger);
    margin-top: var(--space-1);
}
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
textarea.form-control {
    min-height: 100px;
    resize: vertical;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* ── Alerts / Flash Messages ───────────────────── */
.alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    animation: fadeInDown 0.3s ease;
}
.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--success);
}
.alert-danger, .alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger);
}
.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--warning);
}
.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--info);
}

/* ── Cards / Panels ────────────────────────────── */
.card {
    background: linear-gradient(160deg, var(--dark-700), var(--dark-800));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.card-header h2, .card-header h3 {
    font-weight: 700;
    color: var(--white);
}

/* ── Tables ────────────────────────────────────── */
.table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
}
table {
    width: 100%;
    border-collapse: collapse;
}
table th, table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
table th {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-400);
    background: rgba(255, 255, 255, 0.02);
}
table td {
    font-size: var(--font-size-sm);
    color: var(--gray-200);
}
table tbody tr:hover {
    background: rgba(108, 60, 224, 0.05);
}

/* ── Status Badges ─────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}
.status-pending { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.status-paid { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.status-processing { background: rgba(59, 130, 246, 0.15); color: var(--info); }
.status-shipped { background: rgba(139, 92, 246, 0.15); color: var(--primary-light); }
.status-delivered { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.status-cancelled { background: rgba(239, 68, 68, 0.15); color: var(--danger); }

/* ── Features Section ──────────────────────────── */
.features-section {
    padding: var(--space-24) 0;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.feature-card {
    padding: var(--space-8);
    background: linear-gradient(160deg, var(--dark-700), var(--dark-800));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all var(--transition-base);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
    border-color: rgba(108, 60, 224, 0.2);
}
.feature-icon {
    width: 56px;
    height: 56px;
    background: rgba(108, 60, 224, 0.15);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
    font-size: 1.5rem;
}
.feature-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-3);
}
.feature-card p {
    font-size: var(--font-size-sm);
    color: var(--gray-400);
    line-height: 1.6;
}

/* ── Footer ────────────────────────────────────── */
.footer {
    background: var(--dark-800);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--space-16) 0 var(--space-8);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}
.footer-brand {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--white);
    margin-bottom: var(--space-4);
}
.footer-brand .brand-highlight {
    background: linear-gradient(135deg, var(--primary-light), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.footer-desc {
    color: var(--gray-400);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    max-width: 300px;
}
.footer h4 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-5);
}
.footer-links {
    list-style: none;
}
.footer-links li {
    margin-bottom: var(--space-3);
}
.footer-links a {
    color: var(--gray-400);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}
.footer-links a:hover {
    color: var(--primary-light);
}
.footer-bottom {
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--gray-400);
}

/* ── Auth Pages ────────────────────────────────── */
.auth-page {
    padding: calc(80px + var(--space-16)) 0 var(--space-16);
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.auth-container {
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
}
.auth-card {
    background: linear-gradient(160deg, var(--dark-700), var(--dark-800));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
}
.auth-card h1 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--white);
    text-align: center;
    margin-bottom: var(--space-2);
}
.auth-card .auth-subtitle {
    text-align: center;
    color: var(--gray-400);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-8);
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--gray-400);
    font-size: var(--font-size-sm);
    margin: var(--space-6) 0;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}
.auth-links {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--gray-400);
}

/* ── User Panel ────────────────────────────────── */
.panel-page {
    padding: calc(80px + var(--space-10)) 0 var(--space-16);
    min-height: 100vh;
}
.panel-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-8);
}
.panel-sidebar {
    background: linear-gradient(160deg, var(--dark-700), var(--dark-800));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: sticky;
    top: calc(80px + var(--space-6));
    height: fit-content;
}
.panel-sidebar-nav {
    list-style: none;
}
.panel-sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--gray-300);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}
.panel-sidebar-nav li a:hover,
.panel-sidebar-nav li a.active {
    background: rgba(108, 60, 224, 0.15);
    color: var(--white);
}
.panel-sidebar-nav li a.active {
    color: var(--primary-light);
}

/* ── Page Sections ─────────────────────────────── */
.page-header {
    padding: calc(80px + var(--space-16)) 0 var(--space-12);
    text-align: center;
    position: relative;
}
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center top, rgba(108, 60, 224, 0.1) 0%, transparent 60%);
    pointer-events: none;
}
.page-header h1 {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--white);
    position: relative;
}
.page-header p {
    color: var(--gray-400);
    font-size: var(--font-size-lg);
    margin-top: var(--space-3);
    position: relative;
}
.page-content {
    padding: 0 0 var(--space-24);
}

/* ── FAQ ───────────────────────────────────────── */
.faq-item {
    background: linear-gradient(160deg, var(--dark-700), var(--dark-800));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);
    overflow: hidden;
}
.faq-question {
    padding: var(--space-5) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 600;
    color: var(--white);
    transition: background var(--transition-fast);
}
.faq-question:hover {
    background: rgba(108, 60, 224, 0.05);
}
.faq-question .faq-icon {
    transition: transform var(--transition-base);
    color: var(--primary-light);
}
.faq-item.open .faq-question .faq-icon {
    transform: rotate(180deg);
}
.faq-answer {
    padding: 0 var(--space-6) var(--space-5);
    color: var(--gray-300);
    font-size: var(--font-size-sm);
    line-height: 1.8;
    display: none;
}
.faq-item.open .faq-answer {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* ── Checkout ──────────────────────────────────── */
.checkout-page {
    padding: calc(80px + var(--space-10)) 0 var(--space-16);
    min-height: 100vh;
}
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-8);
}
.checkout-summary {
    position: sticky;
    top: calc(80px + var(--space-6));
    height: fit-content;
}
.order-summary-card {
    background: linear-gradient(160deg, var(--dark-700), var(--dark-800));
    border: 1px solid rgba(108, 60, 224, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}
.summary-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-3) 0;
    font-size: var(--font-size-sm);
    color: var(--gray-300);
}
.summary-item.total {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--white);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--space-3);
    padding-top: var(--space-4);
}

/* ── Upload Page ───────────────────────────────── */
.upload-zone {
    border: 2px dashed rgba(108, 60, 224, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-16);
    text-align: center;
    transition: all var(--transition-base);
    cursor: pointer;
}
.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--primary-light);
    background: rgba(108, 60, 224, 0.05);
}
.upload-zone .upload-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    color: var(--primary-light);
}
.upload-progress {
    margin-top: var(--space-6);
}
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--dark-600);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
    width: 0%;
}

/* ── Animations ────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ── Responsive ────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-actions {
        justify-content: center;
    }
    .hero-stats {
        justify-content: center;
    }
    .hero-promo {
        max-width: 440px;
        margin: 0 auto;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-card.featured {
        transform: none;
    }
    .product-card.featured:hover {
        transform: translateY(-8px);
    }
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .checkout-grid {
        grid-template-columns: 1fr;
    }
    .checkout-summary {
        position: static;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-5xl: 2.25rem;
        --font-size-4xl: 1.875rem;
        --font-size-3xl: 1.5rem;
    }
    .nav-links {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        background: var(--dark-800);
        flex-direction: column;
        padding: 80px var(--space-6) var(--space-6);
        align-items: stretch;
        gap: var(--space-1);
        border-left: 1px solid rgba(255, 255, 255, 0.06);
        animation: slideIn 0.3s ease;
        z-index: 999;
        overflow-y: auto;
    }
    .nav-links.open {
        display: flex;
    }
    .nav-toggle {
        display: block;
        z-index: 1001;
    }
    .products-grid {
        grid-template-columns: 1fr;
    }
    .features-grid {
        grid-template-columns: 1fr;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .hero {
        min-height: auto;
        padding: calc(80px + var(--space-12)) 0 var(--space-12);
    }
    .hero-stats {
        gap: var(--space-6);
    }
    .panel-grid {
        grid-template-columns: 1fr;
    }
    .panel-sidebar {
        position: static;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .footer-bottom {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }
    .flat-rate-banner {
        padding: var(--space-8);
    }
}

/* ── Utility Classes ───────────────────────────── */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--gray-400); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary-light); }
.text-white { color: var(--white); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-lg { font-size: var(--font-size-lg); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mr-2 { margin-right: var(--space-2); }
.ml-auto { margin-left: auto; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.hidden { display: none !important; }

/* Mobile overlay for nav */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
}
.nav-overlay.open {
    display: block;
}

/* ── Páginas legales ───────────────────────────────────────────────────────
   Aviso legal, privacidad, cookies y condiciones de compra. Son textos largos
   que la gente lee a disgusto: lo que más ayuda es una medida de línea corta y
   aire entre apartados, no adornos. */
.legal { line-height: 1.75; color: var(--gray-300); }
.legal h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--white);
    margin: var(--space-8) 0 var(--space-3);
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin-bottom: var(--space-4); }
.legal ul { margin: 0 0 var(--space-4) var(--space-6); }
.legal li { margin-bottom: var(--space-2); }
.legal a { color: var(--primary-light, #a78bfa); text-decoration: underline; }
.legal strong { color: var(--white); }
.legal code {
    background: rgba(255, 255, 255, .07);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .9em;
}

/* Los datos identificativos: es lo que alguien viene a buscar aquí, así que se
   separan del texto corrido en vez de esconderse dentro de un párrafo. */
.legal-datos {
    list-style: none;
    margin: 0 0 var(--space-6) 0 !important;
    padding: var(--space-4) var(--space-5);
    background: rgba(255, 255, 255, .04);
    border-left: 3px solid var(--primary, #6c3ce0);
    border-radius: 8px;
}
.legal-datos li { margin-bottom: var(--space-1); }

/* El aviso del desistimiento. Es la letra que más reclamaciones evita, así que
   no puede leerse como una línea más del contrato. */
.legal-aviso {
    padding: var(--space-4) var(--space-5);
    background: rgba(234, 179, 8, .08);
    border: 1px solid rgba(234, 179, 8, .35);
    border-radius: 8px;
}

.legal-tabla { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); }
.legal-tabla th, .legal-tabla td {
    text-align: left;
    padding: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    vertical-align: top;
}
.legal-tabla th { color: var(--white); font-weight: 600; }

.legal-nota {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .92em;
}

/* Consentimiento en registro y checkout. Casilla y texto alineados arriba: con
   dos líneas de texto, centrarla la deja flotando. */
.legal-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--gray-300);
}
.legal-check input[type="checkbox"] { margin-top: .25em; flex: none; width: 18px; height: 18px; }
.legal-check a { color: var(--primary-light, #a78bfa); text-decoration: underline; }

/* ══ RESPONSIVE DEL MÓVIL ═══════════════════════════════════════════════════
   Cuatro averías medidas en un iframe de 393 px contra producción. Va al final
   del fichero a propósito: así gana sobre las reglas de arriba sin tener que
   repartir !important por medio archivo. */

/* ── El carrito, junto al menú ─────────────────────────────────────────────
   Antes sólo existía el botón flotante de abajo a la derecha, que en el hero se
   comía la tercera cifra ("100% profesional") y tapaba contenido al bajar. */
.nav-cart {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    color: var(--white);
    text-decoration: none;
    flex: none;
}
.nav-cart svg { width: 22px; height: 22px; }
.nav-cart-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.nav-cart-badge[hidden] { display: none; }

/* Los dos iconos del botón del menú viven en el HTML y se alterna con CSS.
   Cambiarlos con lucide.createIcons() no funciona: sustituye el <i> por un <svg>
   la primera vez y luego ya no revierte — la X se quedaba clavada. */
.nav-toggle .ico-cerrar { display: none; }
.nav-toggle.abierto .ico-abrir { display: none; }
.nav-toggle.abierto .ico-cerrar { display: block; }

/* Con el menú abierto no se desplaza el fondo. Se hace con una clase, no
   escribiendo en body.style, para que no queden estilos en línea pegados si algo
   falla a mitad. */
body.menu-abierto { overflow: hidden; }

/* ── Que ningún hijo estire la rejilla ────────────────────────────────────
   Una pista `1fr` lleva min-width:auto, así que se NIEGA a encogerse por debajo
   del ancho natural de su contenido: la rejilla del hero medía 472 px en una
   pantalla de 393 y `.hero{overflow:hidden}` recortaba lo que sobraba.

   Se pone min-width:0 en los HIJOS y no minmax(0,1fr) en las pistas: cambiar la
   definición de columnas obligaría a repetir el número de cada rejilla (3 en
   productos, 4 en características, `240px 1fr` en el panel) y equivocarse en una
   sola las rompería en escritorio. */
.hero-grid > *,
.products-grid > *,
.features-grid > *,
.panel-grid > *,
.form-row > * { min-width: 0; }

@media (max-width: 900px) {
    /* Aparece el de la cabecera y desaparece el flotante: dos carritos a la vez
       serían dos sitios donde mirar. */
    .nav-cart { display: inline-flex; }
    #floatingCart { display: none !important; }
}

@media (max-width: 768px) {
    /* EL FALLO DEL MENÚ.  `.navbar` es position:fixed CON backdrop-filter, y un
       backdrop-filter crea BLOQUE CONTENEDOR igual que un transform. Así que el
       panel `.nav-links`, que es position:fixed con top:0;bottom:0, se anclaba a
       la barra en vez de a la pantalla: salía como una caja recortada a la altura
       de la cabecera, tapando el logo. Sin el filtro vuelve a anclarse al
       viewport. El fondo pasa a sólido, que en el móvil además es más barato de
       pintar que un blur a pantalla completa. */
    .navbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #0a0a0f;
    }

    /* El panel, ahora sí, de arriba abajo y por encima de la barra. */
    .nav-links {
        top: 0;
        bottom: 0;
        height: 100dvh;          /* dvh: descuenta la barra del navegador móvil */
        width: min(280px, 82vw); /* en pantallas de 320px, 280 fijos ahogaban */
        z-index: 1002;
        padding-top: var(--space-6);
    }
    .nav-toggle { z-index: 1003; }  /* por encima del panel, para poder cerrarlo */
    .nav-overlay { z-index: 1001; }

    /* El hero ya se apila desde el bloque de 1024 px: eso no había que tocarlo.
       Lo que de verdad se salía por la derecha era la ANIMACIÓN de entrada, que
       traslada la tarjeta 30 px (ver fadeInRight más abajo), más el botón
       flotante del carrito tapando la tercera cifra. Medido: con las animaciones
       terminadas, cero elementos fuera de la pantalla. */
    .hero { min-height: auto; }
    .hero-promo { max-width: 100%; }

    /* La entrada de la tarjeta, sin desplazamiento lateral. Un translateX(30px)
       en una pantalla de 374 px son 30 px fuera mientras dura la animación. */
    .hero-promo { animation-name: aparecer; }

    /* Tres cifras en una fila no caben en 393 px: que bajen en vez de recortarse. */
    .hero-stats { flex-wrap: wrap; justify-content: center; row-gap: var(--space-6); }

    /* Cinturón: nada empuja el ancho de la página. Si algún día vuelve a colarse
       un elemento demasiado ancho, se verá recortado pero NO desplazará la web
       entera hacia la derecha, que es lo que más molesta al leer. */
    html, body { max-width: 100%; overflow-x: hidden; }
    img, video, canvas, svg, table { max-width: 100%; }
}

/* Entrada sin desplazamiento lateral, para el móvil. */
@keyframes aparecer {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Quien pide menos movimiento, menos movimiento ────────────────────────
   No había nada de esto en todo el fichero. Además de ser lo correcto para quien
   marca la preferencia por mareo o migraña, arregla un problema concreto: las
   animaciones de entrada dejan los elementos trasladados hasta que terminan, y
   si no terminan se quedan fuera de sitio —la tarjeta del hero, 30 px a la
   derecha—. Acabándolas al instante, el elemento aterriza donde debe. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}