@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500;600;700&family=Rubik:wght@400;500;600&display=swap');
        
        :root {
            --primary-black: #000000;
            --secondary-white: #FFFFFF;
            --accent-red: #DC143C;
            --deep-red: #B22222;
            --fire-red: #FF0000;
            --accent-orange: #FF6B35;
            --burnt-orange: #CC5500;
            --accent-yellow: #FFB627;
            --golden-yellow: #FFD700;
            --warm-red: #DC2626;
            --dark-gray: #1A1A1A;
            --light-gray: #F5F5F5;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Rubik', sans-serif;   /* textos equilibrados */
            background-color: var(--primary-black);
            color: var(--secondary-white);
            overflow-x: hidden;
        }

        .font-tech {
            font-family: 'Exo 2', sans-serif;   /* títulos con curvas futuristas y originales */
        }

        /* Tattoo-Inspired Hero Background */
        .geometric-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }
        
        .geometric-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 30%, rgba(220, 20, 60, 0.18) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255, 0, 0, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 60% 20%, rgba(255, 107, 53, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(255, 215, 0, 0.10) 0%, transparent 50%);
            animation: pulseGlow 8s ease-in-out infinite alternate;
        }
        
        @keyframes pulseGlow {
            0% { opacity: 0.6; transform: scale(1); }
            100% { opacity: 1; transform: scale(1.05); }
        }
        
        /* Freehand Sketch Lines Effect */
        .tattoo-lines {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        
        .tattoo-lines::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(ellipse 200px 50px at 20% 30%, rgba(220, 20, 60, 0.18) 0%, transparent 70%),
                radial-gradient(ellipse 150px 80px at 70% 60%, rgba(255, 0, 0, 0.15) 0%, transparent 60%),
                radial-gradient(ellipse 180px 40px at 50% 80%, rgba(255, 107, 53, 0.12) 0%, transparent 80%),
                radial-gradient(ellipse 120px 60px at 30% 10%, rgba(255, 215, 0, 0.10) 0%, transparent 85%);
            animation: organicFlow 20s ease-in-out infinite alternate;
        }
        
        .tattoo-lines::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(ellipse 120px 60px at 80% 20%, rgba(255, 69, 0, 0.08) 0%, transparent 90%),
                radial-gradient(ellipse 90px 120px at 30% 70%, rgba(255, 107, 53, 0.06) 0%, transparent 85%);
            animation: organicFlow 25s ease-in-out infinite alternate-reverse;
        }
        
        @keyframes organicFlow {
            0% { 
                transform: rotate(0deg) scale(1);
                opacity: 0.6;
            }
            33% { 
                transform: rotate(2deg) scale(1.1);
                opacity: 0.8;
            }
            66% { 
                transform: rotate(-1deg) scale(0.95);
                opacity: 0.7;
            }
            100% { 
                transform: rotate(1deg) scale(1.05);
                opacity: 0.9;
            }
        }
        
        /* Ink Splatter Effects */
        .ink-splatter {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        
        .splatter-1 {
            position: absolute;
            top: 15%;
            right: 15%;
            width: 80px;
            height: 65px;
            background: radial-gradient(ellipse at 30% 40%, rgba(220, 20, 60, 0.45) 0%, rgba(255, 0, 0, 0.20) 35%, transparent 65%);
            border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%;
            animation: organicFloat 8s ease-in-out infinite;
            filter: blur(0.5px);
        }
        
        .splatter-1::before {
            content: '';
            position: absolute;
            top: -10px;
            right: -15px;
            width: 25px;
            height: 20px;
            background: radial-gradient(ellipse, rgba(255, 0, 0, 0.25) 0%, transparent 70%);
            border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
        }
        
        .splatter-2 {
            position: absolute;
            bottom: 25%;
            left: 10%;
            width: 55px;
            height: 70px;
            background: radial-gradient(ellipse at 60% 30%, rgba(255, 107, 53, 0.40) 0%, rgba(220, 20, 60, 0.15) 40%, transparent 75%);
            border-radius: 45% 55% 70% 30% / 60% 35% 65% 40%;
            animation: organicFloat 10s ease-in-out infinite reverse;
            filter: blur(0.3px);
        }
        
        .splatter-2::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: -12px;
            width: 18px;
            height: 22px;
            background: radial-gradient(ellipse, rgba(255, 107, 53, 0.25) 0%, transparent 80%);
            border-radius: 30% 70% 60% 40% / 70% 30% 70% 30%;
        }
        
        .splatter-3 {
            position: absolute;
            top: 60%;
            right: 25%;
            width: 45px;
            height: 38px;
            background: radial-gradient(ellipse at 70% 60%, rgba(255, 215, 0, 0.35) 0%, rgba(255, 182, 39, 0.12) 50%, transparent 85%);
            border-radius: 65% 35% 25% 75% / 40% 70% 30% 60%;
            animation: organicFloat 9s ease-in-out infinite;
            filter: blur(0.4px);
        }
        
        @keyframes organicFloat {
            0% { 
                transform: translateY(0px) rotate(0deg) scaleX(1) scaleY(1);
                border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%;
            }
            25% { 
                transform: translateY(-15px) rotate(3deg) scaleX(1.1) scaleY(0.9);
                border-radius: 45% 55% 70% 30% / 60% 35% 65% 40%;
            }
            50% { 
                transform: translateY(-25px) rotate(-2deg) scaleX(0.95) scaleY(1.15);
                border-radius: 65% 35% 25% 75% / 40% 70% 30% 60%;
            }
            75% { 
                transform: translateY(-10px) rotate(4deg) scaleX(1.05) scaleY(0.85);
                border-radius: 30% 70% 60% 40% / 70% 30% 70% 30%;
            }
            100% { 
                transform: translateY(0px) rotate(0deg) scaleX(1) scaleY(1);
                border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%;
            }
        }
        
        /* Freehand Ink Strokes */
        .ornamental-border {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        
        .ornamental-border::before {
            content: '';
            position: absolute;
            top: 8%;
            left: 5%;
            width: 90%;
            height: 3px;
            background: radial-gradient(ellipse 200px 3px, rgba(220, 20, 60, 0.45) 0%, transparent 70%),
                        radial-gradient(ellipse 150px 2px at 70% 50%, rgba(255, 0, 0, 0.35) 0%, transparent 80%);
            border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
            animation: inkFlow 6s ease-in-out infinite alternate;
            transform: rotate(-1deg);
        }
        
        .ornamental-border::after {
            content: '';
            position: absolute;
            bottom: 8%;
            right: 5%;
            width: 85%;
            height: 2px;
            background: radial-gradient(ellipse 180px 2px, rgba(255, 182, 39, 0.35) 0%, transparent 75%),
                        radial-gradient(ellipse 120px 3px at 30% 50%, rgba(255, 107, 53, 0.25) 0%, transparent 85%);
            border-radius: 50% 50% 50% 50% / 40% 60% 40% 60%;
            animation: inkFlow 7s ease-in-out infinite alternate-reverse;
            transform: rotate(0.5deg);
        }
        
        /* Additional organic ink strokes */
        .ink-stroke-1 {
            position: absolute;
            top: 25%;
            left: 3%;
            width: 120px;
            height: 2px;
            background: radial-gradient(ellipse, rgba(220, 20, 60, 0.25) 0%, transparent 80%);
            border-radius: 50% 50% 50% 50% / 70% 30% 70% 30%;
            transform: rotate(15deg);
            animation: inkFlow 8s ease-in-out infinite;
        }
        
        .ink-stroke-2 {
            position: absolute;
            bottom: 30%;
            right: 2%;
            width: 100px;
            height: 1px;
            background: radial-gradient(ellipse, rgba(255, 215, 0, 0.30) 0%, transparent 90%);
            border-radius: 50% 50% 50% 50% / 30% 70% 30% 70%;
            transform: rotate(-20deg);
            animation: inkFlow 9s ease-in-out infinite reverse;
        }
        
        @keyframes inkFlow {
            0% { 
                opacity: 0.3; 
                transform: scaleX(0.7) scaleY(1) rotate(var(--rotation, 0deg));
                border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
            }
            50% { 
                opacity: 0.8; 
                transform: scaleX(1.1) scaleY(1.2) rotate(calc(var(--rotation, 0deg) + 2deg));
                border-radius: 40% 60% 70% 30% / 50% 50% 50% 50%;
            }
            100% { 
                opacity: 0.5; 
                transform: scaleX(0.9) scaleY(0.8) rotate(var(--rotation, 0deg));
                border-radius: 60% 40% 30% 70% / 70% 30% 70% 30%;
            }
        }
        
        /* Organic Freehand Patterns */
        .geometric-shape {
            position: absolute;
            background: none;
            border: none;
        }
        
        .shape-1 {
            width: 200px;
            height: 180px;
            top: 12%;
            right: 12%;
            background: radial-gradient(ellipse at 40% 30%, rgba(220, 20, 60, 0.18) 0%, rgba(255, 0, 0, 0.08) 40%, transparent 70%);
            border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
            animation: organicMorph 18s ease-in-out infinite;
            filter: blur(1px);
        }
        
        .shape-1::before {
            content: '';
            position: absolute;
            width: 60%;
            height: 70%;
            top: 15%;
            left: 20%;
            background: radial-gradient(ellipse, rgba(255, 107, 53, 0.1) 0%, transparent 60%);
            border-radius: 45% 55% 70% 30% / 60% 35% 65% 40%;
            animation: organicMorph 22s ease-in-out infinite reverse;
        }
        
        .shape-2 {
            width: 140px;
            height: 160px;
            bottom: 18%;
            left: 8%;
            background: radial-gradient(ellipse at 60% 70%, rgba(255, 182, 39, 0.12) 0%, rgba(255, 182, 39, 0.04) 50%, transparent 80%);
            border-radius: 45% 55% 30% 70% / 65% 40% 60% 35%;
            animation: organicMorph 16s ease-in-out infinite;
            filter: blur(0.8px);
        }
        
        .shape-2::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 60%;
            top: 20%;
            right: 15%;
            background: radial-gradient(ellipse, rgba(255, 107, 53, 0.08) 0%, transparent 70%);
            border-radius: 70% 30% 60% 40% / 50% 60% 40% 50%;
            animation: organicMorph 20s ease-in-out infinite reverse;
        }
        
        .shape-3 {
            width: 280px;
            height: 260px;
            top: 45%;
            left: 45%;
            transform: translate(-50%, -50%);
            background: radial-gradient(ellipse at 50% 40%, rgba(220, 20, 60, 0.10) 0%, rgba(255, 0, 0, 0.08) 20%, rgba(255, 107, 53, 0.06) 40%, rgba(255, 215, 0, 0.05) 70%, transparent 90%);
            border-radius: 40% 60% 70% 30% / 50% 45% 55% 50%;
            animation: organicMorph 24s ease-in-out infinite;
            filter: blur(1.2px);
        }
        
        @keyframes organicMorph {
            0% { 
                transform: rotate(0deg) scale(1);
                border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
            }
            20% { 
                transform: rotate(2deg) scale(1.05);
                border-radius: 45% 55% 70% 30% / 60% 35% 65% 40%;
            }
            40% { 
                transform: rotate(-1deg) scale(0.95);
                border-radius: 70% 30% 40% 60% / 45% 65% 35% 55%;
            }
            60% { 
                transform: rotate(3deg) scale(1.1);
                border-radius: 30% 70% 60% 40% / 70% 30% 70% 30%;
            }
            80% { 
                transform: rotate(-2deg) scale(0.9);
                border-radius: 55% 45% 35% 65% / 40% 70% 30% 60%;
            }
            100% { 
                transform: rotate(0deg) scale(1);
                border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
            }
        }
        
        /* Additional decorative elements */
        .decorative-dots {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        
        .decorative-dots::before {
            content: '';
            position: absolute;
            top: 25%;
            left: 20%;
            width: 4px;
            height: 4px;
            background: rgba(220, 20, 60, 0.7);
            border-radius: 50%;
            box-shadow: 
                20px 10px 0 rgba(255, 0, 0, 0.6),
                40px -5px 0 rgba(255, 107, 53, 0.5),
                -15px 25px 0 rgba(255, 215, 0, 0.4),
                60px 30px 0 rgba(220, 20, 60, 0.5),
                -30px -10px 0 rgba(255, 182, 39, 0.6);
            animation: twinkle 3s ease-in-out infinite alternate;
        }
        
        .decorative-dots::after {
            content: '';
            position: absolute;
            bottom: 30%;
            right: 25%;
            width: 3px;
            height: 3px;
            background: rgba(255, 182, 39, 0.7);
            border-radius: 50%;
            box-shadow: 
                -25px 15px 0 rgba(255, 69, 0, 0.4),
                -45px -8px 0 rgba(255, 107, 53, 0.5),
                10px -20px 0 rgba(255, 182, 39, 0.3),
                -60px -25px 0 rgba(255, 69, 0, 0.4),
                25px 35px 0 rgba(255, 107, 53, 0.6);
            animation: twinkle 4s ease-in-out infinite alternate reverse;
        }
        
        @keyframes twinkle {
            0% { opacity: 0.3; transform: scale(0.8); }
            100% { opacity: 1; transform: scale(1.2); }
        }
        
        /* Angular Design Elements */
        .angular-border {
            position: relative;
        }
        
        .angular-border::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 0%, var(--accent-orange) 1%, transparent 2%);
            clip-path: polygon(0 0, 20px 0, 0 20px);
        }
        
        .angular-border::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: linear-gradient(225deg, transparent 0%, var(--accent-yellow) 1%, transparent 2%);
            clip-path: polygon(100% 0, 100% 20px, calc(100% - 20px) 0);
        }
        
        /* Cards with Angular Design */
        .angular-card {
            background: var(--primary-black);
            border: 1px solid #333;
            position: relative;
            clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .angular-card:hover {
            border-color: var(--accent-red);
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(255, 69, 0, 0.15);
        }
        
        .angular-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, var(--accent-red), var(--accent-orange));
            clip-path: polygon(0 0, 100% 0, 100% 100%);
        }
        
        /* Buttons */
        .btn-primary {
            background: var(--secondary-white);
            color: var(--primary-black);
            font-weight: 600;
            padding: 16px 40px;
            border: none;
            position: relative;
            clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 14px;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, var(--accent-red), var(--fire-red), var(--accent-orange));
            color: var(--secondary-white);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(220, 20, 60, 0.4);
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--secondary-white);
            border: 2px solid var(--secondary-white);
            font-weight: 600;
            padding: 14px 38px;
            position: relative;
            clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 14px;
        }
        
        .btn-secondary:hover {
            background: var(--secondary-white);
            color: var(--primary-black);
            transform: translateY(-3px);
        }
        
        /* Navigation */
        .nav-item {
            position: relative;
            padding: 10px 0;
            transition: all 0.3s ease;
        }
        
        .nav-item::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent-red), var(--fire-red), var(--accent-orange), var(--golden-yellow));
            transition: width 0.3s ease;
        }
        
        .nav-item:hover::before {
            width: 100%;
        }
        
        /* Portfolio Grid */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }
        
        .portfolio-item {
            background: var(--dark-gray);
            position: relative;
            overflow: hidden;
            clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
            transition: all 0.5s ease;
        }
        
        .portfolio-item:hover {
            transform: scale(1.05);
        }
        
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(220,20,60,0.8) 30%, rgba(255,0,0,0.8) 60%, rgba(255,107,53,0.8) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        
        /* Section Dividers */
        .section-divider {
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-red) 0%, var(--accent-orange) 30%, var(--accent-yellow) 50%, var(--accent-orange) 70%, var(--accent-red) 100%);
            clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
        }
        
        /* Stats Counter */
        .stat-number {
            font-family: 'Orbitron', monospace;
            font-weight: 900;
            font-size: 3rem;
            background: linear-gradient(135deg, var(--accent-red), var(--accent-orange), var(--accent-yellow));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 20px rgba(255, 69, 0, 0.4);
        }
        
        /* Form Elements */
        .form-input {
            background: var(--dark-gray);
            border: 1px solid #333;
            color: var(--secondary-white);
            padding: 16px 20px;
            clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
            transition: all 0.3s ease;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--accent-orange);
            box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.3);
        }
        
        /* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .slide-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .slide-left.visible {
            opacity: 1;
            transform: translateX(0);
        }
        
        .slide-right {
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .slide-right.visible {
            opacity: 1;
            transform: translateX(0);
        }
        
        /* Stagger delays */
        .delay-100 { transition-delay: 0.1s; }
        .delay-200 { transition-delay: 0.2s; }
        .delay-300 { transition-delay: 0.3s; }
        .delay-400 { transition-delay: 0.4s; }
        
        /* Service Cards */
        .service-card {
            background: var(--dark-gray);
            border: 1px solid #333;
            position: relative;
            clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 25px 100%, 0 calc(100% - 25px));
            transition: all 0.4s ease;
        }
        
        .service-card:hover {
            border-color: var(--accent-orange);
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(255, 107, 53, 0.2);
        }
        
        .service-card::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 25px;
            height: 25px;
            background: linear-gradient(135deg, var(--accent-red), var(--accent-orange));
            clip-path: polygon(0 0, 100% 0, 100% 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .service-card:hover::after {
            opacity: 1;
        }
        
        /* Testimonial Cards */
        .testimonial-card {
            background: var(--dark-gray);
            border-left: 4px solid;
            border-image: linear-gradient(180deg, var(--accent-red), var(--accent-orange), var(--accent-yellow)) 1;
            position: relative;
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
        }
        
        /* Mobile Responsive */
        @media (max-width: 768px) {
            .angular-card {
                clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
            }
            
            .portfolio-item {
                clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
            }
            
            .service-card {
                clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
            }
        }
        .btn-black-gradient {
            position: relative;
            display: inline-block;
            padding: 14px 40px;
            font-weight: bold;
            text-transform: uppercase;
            color: #fff;

            /* NUEVO: borde degradado sin masks */
            background:
            linear-gradient(#000, #000) padding-box,
            linear-gradient(90deg, #FF0000, #FFA500) border-box;
            border: 2px solid transparent;
            border-radius: 8px;

            overflow: hidden;
            transition: all 0.2s ease;
            z-index: 1;
        }

        .btn-black-gradient:hover {
            color: #FFA500;                /* texto naranja al hover */
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(255, 69, 0, 0.5);
        }

/* ===== FLASH CARDS – Diseños Disponibles ===== */
.flash-card {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  background:
    linear-gradient(#0b0b0b, #0b0b0b) padding-box,
    linear-gradient(135deg, #FF0000, #FF6B35, #FFD700) border-box;
  border-radius: 14px;
  transition: transform .35s cubic-bezier(.21,.99,.29,1), box-shadow .35s;
  will-change: transform, box-shadow;
}

.flash-card::before {
  /* brillo oblicuo sutil */
  content: "";
  position: absolute; inset: -40%;
  background: conic-gradient(from 210deg, transparent 0 70%, rgba(255,255,255,.05) 72%, transparent 74% 100%);
  transform: rotate(8deg);
  transition: opacity .35s;
  opacity: .4;
  pointer-events: none;
}

.flash-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(255,69,0,.18);
}

.flash-card .media {
  position: relative;
  width: 100%; height: 100%;
}

.flash-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}

.flash-card:hover img {
  transform: scale(1.06);
}



.flash-card .tag {
  position: absolute; top: 10px; left: 10px;
  font-family: 'Exo 2', sans-serif;
  font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase;
  background:
    linear-gradient(#0b0b0b,#0b0b0b) padding-box,
    linear-gradient(90deg, #FF0000, #FFA500) border-box;
  border: 1px solid transparent;
  color: #fff; padding: 6px 10px; border-radius: 999px;
}

/* Sello “ÚNICO · 1/1” */
.flash-card .stamp {
  position: absolute; top: 10px; right: -36px;
  background: linear-gradient(90deg, rgba(255,0,0,.15), rgba(255,165,0,.15));
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 6px 60px; letter-spacing: .15em;
  transform: rotate(12deg);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-shadow: 0 0 10px rgba(255,69,0,.25);
}



/* Fallback si no hay imagen (src vacío) */
.flash-card .skeleton {
  position: absolute; inset: 0;
  background:
    radial-gradient(150px 80px at 20% 25%, rgba(220,20,60,.15), transparent 60%),
    radial-gradient(180px 120px at 80% 70%, rgba(255,165,0,.12), transparent 70%),
    linear-gradient(135deg,#1a1a1a 0%, #0f0f0f 100%);
}

.ratio { position: relative; width: 100%; overflow: hidden; }
  .ratio::before { content: ""; display: block; }
  .ratio-3-4::before { padding-top: 133.3333%; } /* vertical */
  .ratio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----- Layout fila: botones a los lados + carrusel ----- */
.gallery-row{
  display: grid;
  grid-template-columns: 56px 1fr 56px; /* botón - carrusel - botón */
  align-items: center;
  gap: .75rem; /* gutter entre botones y carrusel */
}

/* ----- Carrusel: # visibles y gap controlados con variables ----- */
.gallery-shelf{
  --gap: 1.25rem;
  --cards: 5;                  /* desktop: 5 visibles */
  display: flex;
  gap: var(--gap);
  overflow-x: auto; overflow-y: hidden;
  padding: .25rem 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-shelf::-webkit-scrollbar{ display:none; }

/* Tablet: 3 (cambiá a 4 si querés) */
@media (max-width:1023px){
  .gallery-shelf{ --cards: 3; }
}

/* Mobile: 2 y gap más chico */
@media (max-width:640px){
  .gallery-shelf{ --cards: 2; --gap: .75rem; }
}

/* ----- Tarjeta: ancho calculado = (ancho útil - gaps) / cards ----- */
/* Reemplaza cualquier width/clamp anterior */
.portrait-card{
  position: relative; overflow: hidden; scroll-snap-align: center;
  border: 2px solid transparent; border-radius: 14px;
  background:
    linear-gradient(#0b0b0b,#0b0b0b) padding-box,
    linear-gradient(135deg,#FF0000,#FF6B35,#FFD700) border-box;
  transition: transform .35s cubic-bezier(.21,.99,.29,1), box-shadow .35s;
  flex: 0 0 auto;
  width: clamp(
    160px,
    calc((100% - (var(--cards) - 1) * var(--gap)) / var(--cards)),
    240px
  );
}
.portrait-card:hover{ transform: translateY(-4px) scale(1.01); box-shadow: 0 14px 36px rgba(255,69,0,.18); }

/* Mobile: bajamos apenas el mínimo y los botones para que entren 2 */
@media (max-width:420px){
  .gallery-row{ grid-template-columns: 44px 1fr 44px; }
  .gallery-btn{ width: 44px; height: 44px; }
  .portrait-card{
    width: clamp(
      140px,
      calc((100% - (var(--cards) - 1) * var(--gap)) / var(--cards)),
      220px
    );
  }
}

/* ----- Estante: sin altura fija (adiós barra negra) ----- */
.shelf-h{ height: auto; }   /* reemplaza el 300px */

/* ----- Botones laterales ----- */
.gallery-btn{
  width: 56px; height: 56px; display: grid; place-items: center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  transition: transform .15s ease, background .15s ease;
  user-select: none;
}
.gallery-btn:hover{ transform: scale(1.06); background: rgba(0,0,0,.7); }


  /* Responsive: en pantallas muy pequeñas, reducimos un toque */
  @media (max-width: 420px) {
    .gallery-row { grid-template-columns: 44px 1fr 44px; }
    .gallery-btn { width: 44px; height: 44px; }
    .shelf-h { height: 280px; }
  }


/* Fallbacks: el JS los ajusta */
:root{
  --header-h: 72px;
}

/* HERO: ocupa todo el viewport visible.
   El header NO se resta: se “mete” con padding-top dentro del 100vh. */
.hero-fix{
  position: relative;
  display: grid;
  align-content: center;
  box-sizing: border-box;             /* <- clave para que el padding no sume alto */
  height: 100vh;                      /* fallback universal */
  padding-top: calc(var(--header-h) + 8px);  /* despegar del nav fijo */
  padding-bottom: 0;                  /* sin hueco extra abajo */
}

/* En navegadores modernos usa la unidad del viewport visible real */
@supports (height: 100svh){
  .hero-fix{ height: 100svh; }
}
@supports (height: 100dvh){
  .hero-fix{ height: 100dvh; }
}

/* No necesitamos reglas distintas para desktop: esto vale para todos */



/* ===== DISEÑOS · layout especial SOLO en móvil ===== */
@media (max-width: 768px){
  /* el grid padre pasa a 6 columnas y filas cortas para componer el mosaico */
  .designs-grid{
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-rows: 110px !important;     /* alto de una "unidad" (ajústalo 100–120) */
    gap: 12px !important;
  }

  /* por defecto, cada item será "horizontal" (4:3): 3 columnas × 1 fila */
  .designs-grid > div{
    grid-column: auto / span 3 !important;
    grid-row: auto / span 1 !important;
  }
  /* que las tarjetas llenen su celda siempre */
  .designs-grid > div .flash-card{ height: 100% !important; }
  .designs-grid > div .flash-card .media,
  .designs-grid > div .flash-card .media img{
    width: 100%; height: 100%; object-fit: cover;
  }

  /* ---- Colocación explícita (12 ítems) ----
     Patrón Fila 1:  vertical IZQ (2 filas) + 2 horizontales DERECHA
     Patrón Fila 2:  2 horizontales IZQ + vertical DERECHA (2 filas)
     … alterna por 4 filas (12 piezas)                                  */

  /* Fila 1 (rows 1–2) */
  .designs-grid > div:nth-child(1){ grid-column: 1 / span 3 !important; grid-row: 1 / span 2 !important; } /* V */
  .designs-grid > div:nth-child(2){ grid-column: 4 / span 3 !important; grid-row: 1 / span 1 !important; } /* H */
  .designs-grid > div:nth-child(3){ grid-column: 4 / span 3 !important; grid-row: 2 / span 1 !important; } /* H */

  /* Fila 2 (rows 3–4) */
  .designs-grid > div:nth-child(4){ grid-column: 4 / span 3 !important; grid-row: 3 / span 2 !important; } /* V */
  .designs-grid > div:nth-child(5){ grid-column: 1 / span 3 !important; grid-row: 3 / span 1 !important; } /* H */
  .designs-grid > div:nth-child(6){ grid-column: 1 / span 3 !important; grid-row: 4 / span 1 !important; } /* H */

    /* Fila 3 (rows 5–6) — grande = 8º */
    .designs-grid > div:nth-child(7){ grid-column: 4 / span 3 !important; grid-row: 6 / span 1 !important; } /* H */
    .designs-grid > div:nth-child(8){ grid-column: 1 / span 3 !important; grid-row: 5 / span 2 !important; } /* V */
    .designs-grid > div:nth-child(9){ grid-column: 4 / span 3 !important; grid-row: 5 / span 1 !important; } /* H */


  /* Fila 4 (rows 7–8) */
  .designs-grid > div:nth-child(10){ grid-column: 4 / span 3 !important; grid-row: 7 / span 2 !important; } /* V */
  .designs-grid > div:nth-child(11){ grid-column: 1 / span 3 !important; grid-row: 7 / span 1 !important; } /* H */
  .designs-grid > div:nth-child(12){ grid-column: 1 / span 3 !important; grid-row: 8 / span 1 !important; } /* H */
}




/* ---- CUADROS: que no haya banda negra bajo cada tarjeta ---- */

/* Quita altura forzada del estante */
.shelf-h{ height: auto !important; }

/* Que cada tarjeta tenga relación 3:4 REAL y el contenido llene */
.gallery-shelf .portrait-card{
  position: relative;
  aspect-ratio: 3 / 4;              /* alto correcto */
}

/* Desactivamos el "truco" de .ratio en esta galería y lo hacemos absoluto */
.gallery-shelf .ratio::before{ display: none !important; } /* sin padding fantasma */
.gallery-shelf .ratio{ position: absolute; inset: 0; }

/* Imagen a cubrir toda la tarjeta */
.gallery-shelf img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Marco con borde degradado (igual que flash-card/portrait-card) */
.frame-gradient{
  border: 2px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(#0b0b0b,#0b0b0b) padding-box,
    linear-gradient(135deg,#FF0000,#FF6B35,#FFD700) border-box;
  overflow: hidden;           /* respeta el radio */
}


/* TABLET (768–1023px): vertical = 2 filas; dos horizontales = 1 + 1 = misma altura */
@media (min-width: 768px) and (max-width: 1023.98px){
  .designs-grid{
    grid-template-columns: repeat(6, 1fr) !important;
    /* subimos altura base para que la vertical siga alta */
    grid-auto-rows: 230px !important;  /* probá 200–230 según gusto */
    gap: 14px !important;
  }

  /* por defecto, cada item (horizontal) = 3 col × 1 fila */
  .designs-grid > div{
    grid-column: auto / span 3 !important;
    grid-row: auto / span 1 !important;
  }
  .designs-grid > div .flash-card{ height: 100% !important; }
  .designs-grid > div .flash-card .media,
  .designs-grid > div .flash-card .media img{
    width: 100%; height: 100%; object-fit: cover;
  }

  /* --- Mapeo por bloques (12 ítems) ---
     Cada bloque ocupa 2 filas: la vertical = span 2; las 2 horizontales = 1 + 1
  */

  /* BLOQUE 1 (rows 1–2): V izq + 2 H der */
  .designs-grid > div:nth-child(1){  grid-column: 1 / span 3 !important; grid-row: 1 / span 2 !important; } /* V */
  .designs-grid > div:nth-child(2){  grid-column: 4 / span 3 !important; grid-row: 1 / span 1 !important; } /* H */
  .designs-grid > div:nth-child(3){  grid-column: 4 / span 3 !important; grid-row: 2 / span 1 !important; } /* H */

  /* BLOQUE 2 (rows 3–4): 2 H izq + V der */
  .designs-grid > div:nth-child(4){  grid-column: 4 / span 3 !important; grid-row: 3 / span 2 !important; } /* V */
  .designs-grid > div:nth-child(5){  grid-column: 1 / span 3 !important; grid-row: 3 / span 1 !important; } /* H */
  .designs-grid > div:nth-child(6){  grid-column: 1 / span 3 !important; grid-row: 4 / span 1 !important; } /* H */

  /* BLOQUE 3 (rows 5–6): V izq + 2 H der */
  .designs-grid > div:nth-child(8){  grid-column: 1 / span 3 !important; grid-row: 5 / span 2 !important; } /* V */
  .designs-grid > div:nth-child(7){  grid-column: 4 / span 3 !important; grid-row: 5 / span 1 !important; } /* H */
  .designs-grid > div:nth-child(9){  grid-column: 4 / span 3 !important; grid-row: 6 / span 1 !important; } /* H */

  /* BLOQUE 4 (rows 7–8): 2 H izq + V der */
  .designs-grid > div:nth-child(10){ grid-column: 4 / span 3 !important; grid-row: 7 / span 2 !important; } /* V */
  .designs-grid > div:nth-child(11){ grid-column: 1 / span 3 !important; grid-row: 7 / span 1 !important; } /* H */
  .designs-grid > div:nth-child(12){ grid-column: 1 / span 3 !important; grid-row: 8 / span 1 !important; } /* H */
}

/* Portfolio: layout vertical en tablet */
@media (min-width: 768px) and (max-width: 1023.98px){
  /* 3 columnas en tablet */
  #portfolio .grid{
    grid-template-columns: repeat(4, 1fr) !important;
  }
  /* Tarjeta con formato retrato (3:4) en tablet */
  #portfolio .frame-gradient{
    aspect-ratio: 3 / 4;
    height: auto !important;    /* anula h-[260px] */
  }
  #portfolio .frame-gradient img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}



/* SOLO tablet/desktop chico: 1024–1279 px */
@media (min-width:1024px) and (max-width:1279.98px){
  /* achica un poco el espacio entre items */
  .main-nav > a + a { margin-left: 1.5rem !important; }  /* antes 3rem por space-x-12 */
  /* si no querés tocar el tracking, dejalo comentado */
  /* .nav-item { letter-spacing: .06em !important; } */
}

/* ≥1280 px: vuelve al espaciado normal por si algún override quedó en caché */
@media (min-width:1280px){
  .main-nav > a + a { margin-left: 3rem !important; }   /* igual a space-x-12 */
  .nav-item { letter-spacing: .1em !important; }        /* tu tracking habitual */
}