<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Piezas a tu Medida - Fabricaciones Especiales | Inrapartes</title>
    <!-- =================================================================== -->
    <!-- FAVICON (Icono para la pestaña del navegador y marcadores) -->
    <!-- =================================================================== -->
    <link rel="icon" type="image/png" sizes="32x32" href="Recursos_finales/favicon/favicon.png?v=2">
    <link rel="apple-touch-icon" sizes="180x180" href="Recursos_finales/favicon/favicon.png?v=2">
    <link rel="shortcut icon" href="Recursos_finales/favicon/favicon.ico?v=2">
    <!-- =================================================================== -->
    <link rel="stylesheet" href="styles.css?v=20250822-2">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/brands.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/solid.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/regular.min.css" rel="stylesheet">
    
    <!-- Preload de imágenes estratégicas -->
    <link rel="preload" href="brand/LOGO.png" as="image" type="image/png">
    <link rel="preload" href="brand/SELLO DE CALIDAD.png" as="image" type="image/png">
    <style>
        /* Estilo para el texto no resaltado en el título de estadísticas */
.stats-header h2 .text-base {
  color: #f2F2F2; /* Color gris claro legible */
}
        /* RESET Y FUENTES BASE */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Century Gothic', Arial, sans-serif !important;
            line-height: 1.6;
            color: #333;
            overflow-x: hidden;
        }
        
        * {
            font-family: inherit !important;
        }
        
        h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea, label, div {
            font-family: 'Century Gothic', sans-serif !important;
        }
        
        /* PIEZAS A MEDIDA - DISEÑO PREMIUM FINAL */
        .custom-hero {
            position: relative;
            min-height: 100vh;
            background: linear-gradient(135deg, #000000 0%, #1a1a1a 30%, #2d2d2d 70%, #404040 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            color: white;
            padding: 120px 0 80px;
        }
        
        .custom-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.2) 0%, transparent 60%),
                radial-gradient(circle at 80% 20%, rgba(255, 184, 0, 0.15) 0%, transparent 60%);
            opacity: 0.12;
            z-index: 1;
        }
        
        @keyframes rotate-slow {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(1deg); }
        }
        
        /* LOGO FLOTANTE ESTRATÉGICO EN HERO */
        .hero-floating-logo {
            position: absolute;
            top: 15%;
            right: 8%;
            width: 252px;
            height: auto;
            z-index: 1;
            opacity: 0.08;
            transform: rotate(-12deg);
            animation: gentle-float 15s ease-in-out infinite;
            pointer-events: none;
            filter: grayscale(20%) brightness(1.1) contrast(1.1);
            transition: all 0.3s ease;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        
        .hero-floating-logo img {
            width: 100%;
            height: auto;
            max-width: 252px;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
        }
        
        /* Efecto sutil cuando el usuario interactúa con el hero */
        .custom-hero:hover .hero-floating-logo {
            opacity: 0.15;
            transform: rotate(-10deg) scale(1.02);
        }
        
        @keyframes gentle-float {
            0%, 100% { 
                transform: rotate(-12deg) translateY(0px); 
                opacity: 0.08;
            }
            50% { 
                transform: rotate(-8deg) translateY(-10px); 
                opacity: 0.12;
            }
        }
        
        /* SELLO DE CALIDAD ESTRATÉGICO EN STATS */
        .stats-quality-seal {
            position: absolute;
            bottom: 10%;
            left: 5%;
            width: 162px;
            height: auto;
            z-index: 1;
            opacity: 0.15;
            transform: rotate(8deg);
            animation: quality-pulse 20s ease-in-out infinite;
            pointer-events: none;
            filter: brightness(1.1) contrast(1.1) saturate(1.1);
            transition: all 0.3s ease;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        
        .stats-quality-seal img {
            width: 100%;
            height: auto;
            max-width: 162px;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
        }
        
        /* Efecto sutil cuando el usuario interactúa con la sección de estadísticas */
        .stats-section:hover .stats-quality-seal {
            opacity: 0.25;
            transform: rotate(6deg) scale(1.05);
        }
        
        @keyframes quality-pulse {
            0%, 100% { 
                transform: rotate(8deg) scale(1);
                opacity: 0.15;
            }
            50% { 
                transform: rotate(5deg) scale(1.02);
                opacity: 0.2;
            }
        }
        

        .custom-hero .container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        
        .custom-hero-content {
            position: relative;
            z-index: 3;
            max-width: 800px;
            text-align: center;
            padding: 0 20px;
        }
        
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, rgba(254, 211, 0, 0.2), rgba(254, 211, 0, 0.1));
            color: #fed300;
            padding: 15px 35px;
            border-radius: 50px;
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 35px;
            border: 2px solid rgba(254, 211, 0, 0.4);
            backdrop-filter: blur(15px);
            box-shadow: 0 8px 32px rgba(254, 211, 0, 0.2);
            text-transform: uppercase;
            letter-spacing: 1px;
            animation: none;
        }
        
        @keyframes pulse-glow {
            0%, 100% { 
                box-shadow: 0 8px 32px rgba(254, 211, 0, 0.2);
                transform: scale(1);
            }
            50% { 
                box-shadow: 0 12px 40px rgba(254, 211, 0, 0.3);
                transform: scale(1.02);
            }
        }
        
        .custom-hero-content h1 {
            font-size: 4.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 35px;
            color: white;
            text-align: center;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            letter-spacing: -1px;
            font-family: 'Century Gothic', sans-serif;
        }
        
        .custom-hero-content h1 .highlight {
            background: linear-gradient(135deg, #fed300, #ffa500);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: none;
            filter: none;
            animation: none;
        }
        
        @keyframes shimmer {
            0% { filter: drop-shadow(0 0 20px rgba(254, 211, 0, 0.6)); }
            100% { filter: drop-shadow(0 0 40px rgba(254, 211, 0, 1)); }
        }
        
        .custom-hero-content p {
            font-size: 1.2rem;
            line-height: 1.6;
            margin-bottom: 50px;
            color: #FFFEF8;|
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            font-family: 'Century Gothic', sans-serif;
        }
        
        .hero-buttons {
            display: flex;
            gap: 25px;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        
        .cta-btn {
            padding: 18px 40px;
            border-radius: 15px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-width: 200px;
            justify-content: center;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'Century Gothic', sans-serif;
        }
        
        .cta-btn.primary {
            background: linear-gradient(135deg, #fed300, #ffa500);
            color: #303030;
            box-shadow: 0 10px 35px rgba(254, 211, 0, 0.4);
            border: 2px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        .cta-btn.primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s ease;
        }
        
        .cta-btn.primary:hover::before {
            left: 100%;
        }
        
        .cta-btn.primary:hover {
            background: linear-gradient(135deg, #FFF200, #FFD700);
            transform: translateY(-3px);
            box-shadow: 0 15px 50px rgba(255, 184, 0, 0.5);
            border-color: rgba(255, 255, 255, 0.4);
        }
        
        .cta-btn.secondary {
            background: transparent;
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        
        .cta-btn.secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.6);
            transform: translateY(-2px);
        }

        /* Responsive Hero Design */
        @media (max-width: 1024px) {
            .custom-hero {
                min-height: 90vh;
                padding: 100px 0 60px;
            }
            
            .custom-hero-content h1 {
                font-size: 3.5rem;
            }
            
            .custom-hero-content p {
                font-size: 1.2rem;
            }
        }
        
        @media (max-width: 768px) {
            .custom-hero {
                min-height: 80vh;
                padding: 80px 0 40px;
            }
            
            .custom-hero-content {
                max-width: 100%;
                padding: 0 15px;
            }
            
            .custom-hero-content h1 {
                font-size: 2.8rem;
                margin-bottom: 25px;
            }
            
            .custom-hero-content p {
                font-size: 1.1rem;
                margin-bottom: 40px;
            }
            
            .hero-buttons {
                flex-direction: column;
                gap: 20px;
                align-items: center;
            }
            
            .cta-btn {
                width: 100%;
                max-width: 300px;
                padding: 16px 30px;
                font-size: 1rem;
            }
        }
        
        @media (max-width: 576px) {
            .custom-hero {
                min-height: 70vh;
                padding: 60px 0 30px;
            }
            
            .custom-hero-content h1 {
                font-size: 2.2rem;
                line-height: 1.2;
            }
            
            .custom-hero-content p {
                font-size: 1rem;
                line-height: 1.6;
            }
            
            .hero-badge {
                font-size: 14px;
                padding: 10px 20px;
                margin-bottom: 25px;
            }
            
            .cta-btn {
                font-size: 0.9rem;
                padding: 14px 25px;
                min-width: 250px;
            }
        }
        
        /* RESPONSIVE PARA ELEMENTOS FLOTANTES */
        @media (max-width: 1024px) {
            .hero-floating-logo {
                width: 240px;
                top: 12%;
                right: 5%;
                opacity: 0.06;
            }
            
            .stats-quality-seal {
                width: 160px;
                bottom: 8%;
                left: 3%;
                opacity: 0.12;
            }
        }
        
        @media (max-width: 768px) {
            .hero-floating-logo {
                width: 200px;
                top: 10%;
                right: 3%;
                opacity: 0.05;
                transform: rotate(-8deg);
            }
            
            .stats-quality-seal {
                width: 140px;
                bottom: 5%;
                left: 2%;
                opacity: 0.1;
                transform: rotate(5deg);
            }
            
            /* Desactivar efectos hover en móviles */
            .custom-hero:hover .hero-floating-logo,
            .stats-section:hover .stats-quality-seal {
                opacity: inherit;
                transform: inherit;
            }
        }
        
        @media (max-width: 576px) {
            .hero-floating-logo {
                width: 160px;
                top: 8%;
                right: 2%;
                opacity: 0.04;
                transform: rotate(-5deg);
            }
            
            .stats-quality-seal {
                width: 120px;
                bottom: 3%;
                left: 1%;
                opacity: 0.08;
                transform: rotate(3deg);
            }
        }
        
        @media (max-width: 480px) {
            .hero-floating-logo {
                display: none; /* Se oculta en pantallas muy pequeñas */
            }
            
            .stats-quality-seal {
                width: 100px;
                bottom: 2%;
                left: 1%;
                opacity: 0.06;
                transform: rotate(2deg);
            }
        }
        
        .quote-form-section {
            padding: 100px 0;
            position: relative;
        }
        

        .quote-form-content {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 80px;
            align-items: start;
            position: relative;
            z-index: 2;
        }
        
        .quote-form-info h2 {
            font-size: 42px;
            font-weight: 700;
            color: #FFFEF8;
            margin-bottom: 20px;
            line-height: 1.2;
            font-family: 'Century Gothic', sans-serif;
        }
        
        .quote-form-info h2 .highlight {
            color: #fed300;
        }
        
        .quote-intro {
            font-size: 18px;
            color: #CBD5E1;
            margin-bottom: 40px;
            line-height: 1.6;
        }
        
        .quote-benefits {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .quote-benefit {
            display: flex;
            align-items: center;
            gap: 20px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }
        
        .quote-benefit:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(254, 211, 0, 0.2);
        }
        
        .quote-benefit i {
            font-size: 24px;
            color: #303030;
            background: linear-gradient(135deg, #fed300, #ffa500);
            padding: 18px;
            border-radius: 50%;
            min-width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 20px rgba(254, 211, 0, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;
        }
        
        .quote-benefit:hover i {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 12px 35px rgba(254, 211, 0, 0.5);
        }
        
        .quote-benefit h4 {
            font-size: 20px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 5px;
        }
        
        .quote-benefit p {
            color: #2d2d2d;
            font-size: 16px;
        }
        
        .custom-quote-form {
            background: white;
            padding: 50px;
            border-radius: 20px;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
            border: 1px solid #E2E8F0;
        }
        
        .custom-quote-form h3 {
            font-size: 28px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 30px;
            text-align: center;
            position: relative;
        }
        
        .custom-quote-form h3::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: #fed300;
            border-radius: 2px;
        }
        
        .form-section {
            margin-bottom: 40px;
        }
        
        .form-section h4 {
            font-size: 20px;
            font-weight: 600;
            color: #334155;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #F1F5F9;
            position: relative;
        }
        
        .form-section h4::before {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 40px;
            height: 2px;
            background: #fed300;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            font-weight: 600;
            color: #475569;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #E2E8F0;
            border-radius: 10px;
            font-size: 16px;
            background: #FFFFFF;
            color: #334155;
            font-family: inherit;
            transition: all 0.3s ease;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #fed300;
            box-shadow: 0 0 0 3px rgba(254, 211, 0, 0.1);
            background: #FFFEF8;
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 120px;
            line-height: 1.6;
        }

        /* Texto de ayuda en formularios */
        .form-help {
            font-size: 13px;
            color: #64748B;
            margin-top: 8px;
        }
        
        .form-actions {
            text-align: center;
            margin-top: 40px;
        }
        
        .submit-btn {
            background: linear-gradient(135deg, #fed300, #ffa500);
            color: #303030;
            padding: 20px 45px;
            border: none;
            border-radius: 15px;
            font-size: 19px;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.4s ease;
            display: inline-flex;
            align-items: center;
            gap: 15px;
            min-width: 320px;
            justify-content: center;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 10px 40px rgba(254, 211, 0, 0.4);
            border: 2px solid rgba(255, 255, 255, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.7s ease;
        }
        
        .submit-btn:hover::before {
            left: 100%;
        }
        
        .submit-btn:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 20px 60px rgba(255, 184, 0, 0.6);
            background: linear-gradient(135deg, #FFF200, #FFD700, #FFB800);
            border-color: rgba(255, 255, 255, 0.5);
        }
        
        .submit-btn i {
            font-size: 22px;
            position: relative;
            z-index: 2;
        }
        
        /* Statistics Section */
        .stats-section {
            padding: 120px 0 160px 0;
            background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 50%, #E2E8F0 100%);
            position: relative;
            overflow: hidden;
        }
        
        .stats-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: 
                radial-gradient(circle at 25% 25%, rgba(255, 184, 0, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(255, 184, 0, 0.06) 0%, transparent 50%);
            animation: float 20s ease-in-out infinite;
            z-index: 1;
        }
        
        .stats-content {
            position: relative;
            z-index: 2;
        }
        
        .stats-header {
            text-align: center;
            margin-bottom: 80px;
        }
        
        .stats-header h2 {
            font-size: 42px;
            font-weight: 800;
            color: #0F172A;
            margin-bottom: 20px;
            letter-spacing: -1px;
            font-family: 'Century Gothic', sans-serif;
        }
        
        .stats-header h2 .highlight {
            background: linear-gradient(135deg, #FFD700, #FFB800);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .stats-header p {
            font-size: 18px;
            color: #64748B;
            max-width: 600px;
            margin: 0 auto;
            font-family: 'Century Gothic', sans-serif;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 80px;
        }
        
        .stat-card {
            background: white;
            padding: 50px 30px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255, 184, 0, 0.1);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        
        .stat-card::before {
            content: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #FFD700, #FFB800, #FFA500);
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
        
        .stat-card:hover::before {
            transform: scaleX(1);
        }
        
        .stat-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            border-color: rgba(255, 184, 0, 0.3);
        }
        
        .stat-icon {
            background: linear-gradient(135deg, #FFD700, #FFB800);
            color: #0F172A;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 32px;
            box-shadow: 0 8px 25px rgba(255, 184, 0, 0.3);
            transition: all 0.3s ease;
        }
        
        .stat-card:hover .stat-icon {
            transform: scale(1.1) rotate(10deg);
            box-shadow: 0 15px 40px rgba(255, 184, 0, 0.5);
        }
        
        .stat-number {
            font-size: 48px;
            font-weight: 900;
            color: #0F172A;
            margin-bottom: 10px;
            line-height: 1;
            font-family: 'Century Gothic', sans-serif;
        }
        
        .stat-label {
            font-size: 16px;
            color: #64748B;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Century Gothic', sans-serif;
        }
        
        .testimonial-section {
            margin-top: 60px;
        }
        
        .testimonial-card {
            background: linear-gradient(135deg, #0F172A, #1E293B);
            color: white;
            padding: 60px 50px;
            border-radius: 25px;
            text-align: center;
            position: relative;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        .testimonial-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 30% 20%, rgba(255, 184, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255, 184, 0, 0.08) 0%, transparent 50%);
            z-index: 1;
        }
        
        .testimonial-content {
            position: relative;
            z-index: 2;
        }
        
        .testimonial-content i {
            font-size: 40px;
            color: #FFD700;
            margin-bottom: 30px;
        }
        
        .testimonial-content p {
            font-size: 20px;
            line-height: 1.6;
            margin-bottom: 30px;
            font-style: italic;
            color: #E2E8F0;
        }
        
        .testimonial-author {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            padding-top: 25px;
        }
        
        .testimonial-author strong {
            display: block;
            font-size: 18px;
            color: #FFD700;
            margin-bottom: 5px;
        }
        
        .testimonial-author span {
            color: #CBD5E1;
            font-size: 14px;
        }
        
        /* Proceso Section */
        .proceso-section {
            padding: 120px 0;
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        
        .proceso-content {
            position: relative;
            z-index: 3;
        }
        
        .proceso-header {
            text-align: center;
            margin-bottom: 80px;
        }
        
        .proceso-header h2 {
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 20px;
        }
        
        .proceso-header h2 .highlight {
            color: #FFB800;
        }
        
        .proceso-header p {
            font-size: 18px;
            color: #CBD5E1;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .proceso-steps {
            display: flex;
            justify-content: center;
            align-items: stretch;
            flex-wrap: nowrap;
            gap: 2rem;
            padding-bottom: 1rem;
            max-width: 1200px;
            margin: 0 auto;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
        }
        
        .proceso-step {
            flex: 0 0 280px;
            min-height: 320px;
            background: rgba(255, 255, 255, 0.05);
            padding: 40px 30px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            scroll-snap-align: center;
        }
        
        .proceso-step:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 184, 0, 0.3);
        }
        
        .step-number {
            display: flex;
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #FFD700, #FFB800);
            color: #0F172A;
            border-radius: 50%;
            font-size: 26px;
            font-weight: 900;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            box-shadow: 0 8px 25px rgba(255, 184, 0, 0.4);
            border: 3px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        .step-number::before {
            content: none;
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: none;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .proceso-step h4 {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #FFB800;
        }
        
        .proceso-step p {
            color: #CBD5E1;
            line-height: 1.6;
        }
        
        
        /* Responsive */
        @media (max-width: 768px) {
            .custom-hero {
                min-height: 500px;
                text-align: center;
            }
            
            .custom-hero-content h1 {
                font-size: 36px;
            }
            
            .custom-hero-content p {
                font-size: 16px;
            }
            
            .hero-buttons {
                justify-content: center;
            }
            
            .quote-form-content {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            
            .custom-quote-form {
                padding: 30px 25px;
            }
            
            .form-row {
                grid-template-columns: 1fr;
                gap: 0;
            }
            
            .proceso-steps { grid-template-columns: none; }
        }
        
        @media (max-width: 480px) {
            .custom-hero {
                min-height: 400px;
            }
            
            .custom-hero-content h1 {
                font-size: 28px;
            }
            
            .quote-form-info h2 {
                font-size: 28px;
            }
            
            .cta-btn {
                width: 100%;
                min-width: auto;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            
            .stat-card {
                padding: 40px 25px;
            }
            
            .stat-number {
                font-size: 40px;
            }
            
            .testimonial-card {
                padding: 40px 30px;
            }
            
            .testimonial-content p {
                font-size: 18px;
            }
        }
        
        /* Additional Mobile Optimizations */
        @media (max-width: 576px) {
            .stats-header h2 {
                font-size: 32px;
            }
            
            .stats-header p {
                font-size: 16px;
            }
            
            .proceso-header h2 {
                font-size: 32px;
            }
            
            .proceso-steps {
                gap: 1.5rem;
                justify-content: flex-start;
                padding: 0 1rem 1rem 1rem;
            }
            
            .proceso-step {
                flex: 0 0 250px;
                padding: 30px 20px;
                min-height: 280px;
            }
            
            .submit-btn {
                min-width: 100%;
                padding: 18px 35px;
                font-size: 17px;
            }
        }
        

        /* WhatsApp Float Fix */
        .whatsapp-float {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 9999;
            animation: pulse 2s infinite;
        }
        
        .whatsapp-float a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: #25D366;
            border-radius: 50%;
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            color: white;
            font-size: 28px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .whatsapp-float a:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* HEADER ELEGANTE Y MEJORADO */
        /* Hide top bar for focused landing */
        .top-bar { display: none; }

        /* Header Premium con backdrop blur */
        .header { 
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            position: absolute; 
            top: 0; 
            width: 100%; 
            padding: 1rem 0; 
            z-index: 1000;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }
        
        .header:hover {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%);
        }
        
        .header .header-content { 
            display: flex;
            justify-content: center; 
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        
        /* Navigation mejorada */
        .header .main-nav ul { 
            display: flex; 
            gap: 3rem; 
            align-items: center; 
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .header .main-nav > ul > li {
            position: relative;
        }
        
        .header .main-nav a { 
            color: #FFFFFF; 
            font-size: 1.1rem; 
            font-weight: 600; 
            text-decoration: none;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            transition: all 0.3s ease;
            font-family: 'Century Gothic', sans-serif;
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .header .main-nav a::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #FFD700, #FFA500);
            border-radius: 25px;
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.3s ease;
            z-index: -1;
        }
        
        .header .main-nav a:hover::before,
        .header .main-nav a.active::before {
            opacity: 1;
            transform: scale(1);
        }
        
        .header .main-nav a:hover, 
        .header .main-nav a.active { 
            color: #1a1a1a;
            text-shadow: none;
            transform: translateY(-2px);
        }
        
        .header .main-nav a i {
            font-size: 0.9rem;
            transition: transform 0.3s ease;
        }
        
        .header .dropdown:hover a i {
            transform: rotate(180deg);
        }

        /* DROPDOWN MENU PREMIUM */
        .dropdown {
            position: relative;
        }
        
        .dropdown-menu {
            position: absolute;
            top: calc(100% + 15px);
            left: 50%;
            transform: translateX(-50%);
            min-width: 600px;
            background: linear-gradient(145deg, rgba(26, 26, 26, 0.98) 0%, rgba(45, 45, 45, 0.95) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            opacity: 0;
            visibility: hidden;
            transform: translateX(-50%) translateY(-10px);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 2000;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
        }
        
        .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        
        .dropdown-menu::before {
            content: '';
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid rgba(26, 26, 26, 0.98);
        }
        
        .dropdown-column {
            display: flex;
            flex-direction: column;
        }
        
        .dropdown-column h4 {
            color: #FFD700;
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid rgba(255, 215, 0, 0.3);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .dropdown-column h4 i {
            font-size: 1.1rem;
            color: #FFD700;
        }
        
        .dropdown-column ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .dropdown-column ul li a {
            color: #E2E8F0;
            font-size: 1rem;
            font-weight: 500;
            text-decoration: none;
            padding: 0.75rem 1rem;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-transform: none;
            letter-spacing: normal;
        }
        
        .dropdown-column ul li a::before {
            content: none;
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
            transition: left 0.5s ease;
        }
        
        .dropdown-column ul li a:hover::before {
            left: 100%;
        }
        
        .dropdown-column ul li a:hover {
            background: rgba(255, 215, 0, 0.1);
            color: #FFD700;
            transform: translateX(8px);
            border-left: 3px solid #FFD700;
        }
        
        .dropdown-column ul li a i {
            font-size: 0.8rem;
            color: #FFD700;
            width: 16px;
            text-align: center;
        }
        
        .dropdown-column ul li a.custom-pieces-link,
        .dropdown-column ul li a.center-item {
            background: rgba(255, 215, 0, 0.05);
            border: 1px solid rgba(255, 215, 0, 0.2);
            color: #FFD700;
            font-weight: 600;
        }
        
        .dropdown-column ul li a.custom-pieces-link:hover,
        .dropdown-column ul li a.center-item:hover {
            background: rgba(255, 215, 0, 0.15);
            border-color: rgba(255, 215, 0, 0.4);
            transform: translateX(12px) scale(1.02);
        }

        /* Responsive Header */
        @media (max-width: 1024px) {
            .header .header-content {
                padding: 0 1.5rem;
            }
            
            .header .main-nav ul {
                gap: 2rem;
            }
            
            .header .main-nav a {
                font-size: 1rem;
                padding: 0.5rem 1rem;
            }
            
            .dropdown-menu {
                min-width: 500px;
                padding: 1.5rem;
                gap: 2rem;
            }
        }
        
        @media (max-width: 768px) {
            .header {
                padding: 1rem 0;
            }
            
            .header .header-content {
                justify-content: center;
                padding: 0 1rem;
            }
            
            .header .main-nav ul {
                gap: 1rem;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .header .main-nav a {
                font-size: 0.85rem;
                padding: 0.4rem 0.6rem;
            }
            
            .dropdown-menu {
                position: fixed;
                top: 90px;
                left: 1rem;
                right: 1rem;
                min-width: auto;
                width: calc(100% - 2rem);
                transform: none;
                grid-template-columns: 1fr;
                gap: 1.5rem;
                max-height: 70vh;
                overflow-y: auto;
            }
            
            .dropdown:hover .dropdown-menu {
                transform: none;
            }
            
            .dropdown-menu::before {
                left: 50%;
                transform: translateX(-50%);
            }
        }


        /* ESTILOS ESPECÍFICOS PARA ICONOS */
        i[class*="fa-"], i[class*="fab"], i[class*="fas"], i[class*="far"], i[class*="fal"] {
            display: inline-block !important;
            font-style: normal !important;
            font-variant: normal !important;
            text-rendering: auto !important;
            line-height: 1 !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
        }
        
        .fas, .far, .fab, .fal, .fad, .fat, .fass, .fasr, .fasl, .fatt {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
            font-weight: 900 !important;
            font-style: normal !important;
            font-variant: normal !important;
            text-rendering: auto !important;
            line-height: 1 !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
        }
        
        .fab {
            font-family: "Font Awesome 6 Brands" !important;
            font-weight: 400 !important;
        }
        
        .far {
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 400 !important;
        }
        
        /* SISTEMA DE ICONOS OPTIMIZADO */
        
        /* Tamaños base para iconos */
        i[class*="fa-"] {
            font-size: 1rem;
            margin-right: 0.5rem;
            vertical-align: middle;
            color: inherit;
            line-height: 1;
        }
        
        /* Iconos pequeños */
        .dropdown-menu .fas.fa-circle {
            font-size: 0.5rem;
            margin-right: 0.6rem;
            color: #FFD700;
        }
        
        .fas.fa-chevron-down,
        .fas.fa-chevron-right {
            font-size: 0.8rem;
            margin-left: 0.3rem;
            margin-right: 0;
        }
        
        /* Iconos medianos - elementos de interface */
        .hero-badge i,
        .cta-btn i,
        .submit-btn i,
        .form-section h4 i,
        .footer-column h4 i {
            font-size: 1rem;
            margin-right: 0.5rem;
        }
        
        /* Iconos de navegación */
        .main-nav i,
        .dropdown-menu h4 i {
            font-size: 0.9rem;
            margin-right: 0.4rem;
        }
        
        /* Iconos de redes sociales */
        .social-links a i {
            font-size: 1.1rem;
            margin-right: 0;
            width: 1.2rem;
            text-align: center;
        }
        
        /* Iconos de contacto */
        .footer-contact .contact-icon i {
            font-size: 1rem;
            margin-right: 0;
            width: 1rem;
            text-align: center;
        }
        
        /* Iconos destacados */
        .stat-icon i {
            font-size: 1.8rem;
            margin-right: 0;
        }
        
        .quote-benefit i {
            font-size: 1.4rem;
            margin-right: 0;
        }
        
        /* WhatsApp flotante */
        .whatsapp-float i {
            font-size: 1.6rem;
            margin-right: 0;
            color: white;
        }
        
        /* Iconos de certificación */
        .cert-badge i {
            font-size: 0.9rem;
            margin-right: 0.4rem;
            color: #FFD700;
        }
        
        /* Top bar */
        .top-bar i {
            font-size: 0.9rem;
            margin-right: 0.4rem;
        }
        
        /* Regla adicional para asegurar que todos los iconos de Font Awesome se vean correctamente */
        [class*="fa-"]::before {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
            font-weight: 900 !important;
            font-style: normal !important;
            font-variant: normal !important;
            text-rendering: auto !important;
            line-height: 1 !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
        }
        
        /* Reglas específicas para pseudo-elementos de iconos */
        .fab::before {
            font-family: "Font Awesome 6 Brands" !important;
            font-weight: 400 !important;
        }
        
        .far::before {
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 400 !important;
        }
        
        .fas::before {
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 900 !important;
        }
        </style>
        <style>
            /* --- Solución de Layout para la Sección del Proceso --- */

            /* 1. Convierte el contenedor en una cuadrícula de 4 columnas iguales */
            .proceso-steps {
                display: grid;
                grid-template-columns: repeat(4, 1fr); /* Crea 4 columnas de ancho flexible */
                gap: 20px; /* Espacio uniforme entre las tarjetas */
            }

            /* 2. Media Query para Tabletas (se apilan en 2x2) */
            @media (max-width: 992px) {
                .proceso-steps {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            /* 3. Media Query para Móviles (se apilan en una sola columna) */
            @media (max-width: 576px) {
                .proceso-steps {
                    grid-template-columns: 1fr;
                }
            }
        </style>
                <style>
                    /* Cambia el color del texto del párrafo en la sección de estadísticas */
                    .stats-header p {
                        color: #262626 !important;
                    }
                </style>
                                                                                                <style>
                    /*
                        Corrección de Posicionamiento Vertical del Sello de Calidad (Ajuste Fino)
                        - Aumentamos drásticamente el valor de 'top' para bajar la imagen
                        - El valor 250px es un buen punto de partida.
                    */
                    .quality-seal-hero-overlay {
                        top: 250px !important;
                    }
                                                </style>
<style>
  /* --- Rediseño Completo de la Sección de Estadísticas (Fondo Oscuro) --- */

  /* 1. Cambia el fondo de toda la sección a oscuro */
  .stats-section {
    background: #262626 !important;
  }

  /* 2. Cambia el color del título y el párrafo a colores claros */
  .stats-header h2 .text-base {
    color: #FFFFFF !important; /* Texto "en Cifras" en blanco */
  }
  .stats-header p {
    color: #cbd5e1 !important; /* Párrafo descriptivo en gris claro */
  }

  /* 3. Ajusta el estilo de las tarjetas para el fondo oscuro */
  .stats-grid .stat-card {
    background: #ffffff0d !important; /* Fondo de tarjeta semi-transparente */
    border: 1px solid #ffffff1a !important;
  }

  /* 4. Cambia el color del texto DENTRO de las tarjetas a colores claros */
  .stat-card .stat-number {
    color: #FFFFFF !important; /* Número grande en blanco */
  }
  .stat-card .stat-label {
    color: #cbd5e1 !important; /* Etiqueta descriptiva en gris claro */
  }
</style>
<style>
  /* 
    Elimina el resplandor de fondo ("glow") únicamente en la sección 
    de estadísticas para revelar el color de fondo real.
  */
  .stats-section::before {
    display: none !important;
  }
</style>
<style>
    /* 
        Añade espacio superior al contenido del banner para separarlo
        de la navegación sin alterar el fondo o el layout.
    */
    .custom-hero-content {
        padding-top: 80px !important; /* Puedes ajustar este valor si necesitas más o menos espacio */
    }
</style>
<style>
    /* 
        Solución Definitiva para el Fondo del Banner en 'piezas-medida.html'
    */
  
    /* 1. Sobrescribe el fondo existente con la nueva imagen */
    .custom-hero {
        background-image: url('Recursos_finales/pag_fabricacion_esp/fab_esp_2.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        position: relative; /* Necesario para la capa de opacidad */
        z-index: 1;
    }

    /* 2. Añade la capa de opacidad oscura por encima de la imagen */
    .custom-hero::before {
        content: '' !important;
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: rgba(0, 0, 0, 0.6) !important; /* Capa negra con 60% de opacidad */
        z-index: 2 !important;
    }

    /* 3. Asegura que el contenido sea visible por encima de la capa */
    .custom-hero .container {
        position: relative;
        z-index: 3;
    }
</style>
<style>
    /* 
        Unifica el fondo de las secciones Proceso y Cotización a un color sólido
        y elimina los efectos de resplandor.
    */
    .proceso-section,
    .quote-form-section {
        background: #262626 !important;
    }

    /* 
        Oculta los pseudoelementos (::before, ::after) que puedan estar 
        creando los resplandores en estas dos secciones específicas.
    */
    .proceso-section::before,
    .proceso-section::after,
    .quote-form-section::before,
    .quote-form-section::after {
        display: none !important;
    }
</style>
</head>
<body>
    <!-- WhatsApp Floating Button -->
    <div class="whatsapp-float">
        <a href="https://wa.me/573156022208?text=Hola%20Inrapartes%2C%20necesito%20cotizar%20piezas%20a%20medida" target="_blank" rel="noopener" title="Contáctanos por WhatsApp">
            <i class="fab fa-whatsapp"></i>
        </a>
    </div>

    <!-- Top Bar -->
    <div class="top-bar">
        <div class="container">
            <div class="top-bar-content">
                <div class="contact-info">
                    <span><i class="fas fa-phone"></i> (601) 5342186</span>
                    <span>Lun-Vie: 6 AM–12:30 PM, 1–4 PM</span>
                </div>
                <div class="social-links">
                    <a href="https://www.facebook.com/share/14EaVT6JMSQ/" target="_blank" rel="noopener"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                    <a href="https://www.instagram.com/inrapartes?igsh=dWlpdXlhYmhpZmE3" target="_blank" rel="noopener"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>
    </div>

    <!-- Header -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <a href="index.html" class="logo">
                    <div class="logo-circle"></div>
                </a>
                <nav class="main-nav">
                    <ul>
                        <li><a href="index.html">Inicio</a></li>
                        <li class="dropdown">
                            <a href="#">Productos <i class="fas fa-chevron-down"></i></a>
                            <div class="dropdown-menu">
                                <div class="dropdown-column">
                                    <h4><i class="fas fa-th-large"></i> Catálogo de Productos</h4>
                                    <ul>
                                        <li><a href="catalogo.html?categoria=RACORES"><i class="fas fa-circle"></i> Racores</a></li>
                                        <li><a href="catalogo.html?categoria=VÁLVULAS" class="center-item"><i class="fas fa-circle"></i> Válvulas y Cheques</a></li>
                                        <li><a href="catalogo.html?categoria=ACOPLES"><i class="fas fa-circle"></i> Acoples</a></li>
                                        <li><a href="catalogo.html?categoria=MANGUERAS"><i class="fas fa-circle"></i> Mangueras</a></li>
                                        <li><a href="catalogo.html?categoria=INSERTOS"><i class="fas fa-circle"></i> Tubería</a></li>
                                    </ul>
                                </div>
                                <div class="dropdown-column">
                                    <h4><i class="fas fa-tools"></i> Servicios Especializados</h4>
                                    <ul>
                                        <li><a href="#quote-form"><i class="fas fa-clipboard-list"></i> Cotización Online</a></li>
                                        <li><a href="#quote-form"><i class="fas fa-headset"></i> Asesoría Técnica</a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="nosotros.html">Nosotros</a></li>
                        <li><a href="#quote-form">Contáctanos</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="custom-hero">
        <!-- Quality Seal Overlay -->
        <div class="quality-seal-hero-overlay">
            <img src="brand/SELLO DE CALIDAD.png" alt="Sello de Calidad Inrapartes" loading="lazy">
        </div>
        <div class="container">
            <div class="custom-hero-content">
                <div class="hero-badge">
                    <i class="fas fa-cogs"></i> FABRICACIONES ESPECIALES
                </div>
                <h1>Piezas a tu <span class="highlight">Medida</span></h1>
                <p>Transformamos tus ideas en realidad. Contamos con mentes y manos expertas, tornos CNC, tornos automáticos, tornos tradicionales, fresadoras, cortadora, laminadora de roscas, taladros radiales para materializar tus requerimientos. Desde prototipos únicos hasta series grandes de producción.</p>
                <div class="hero-buttons">
                    <a href="#quote-form" class="cta-btn primary">
                        <i class="fas fa-calculator"></i>
                        Cotizar Ahora
                    </a>
                    <a href="#proceso" class="cta-btn secondary">
                        <i class="fas fa-play"></i>
                        Ver Proceso
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Proceso Section -->
    <section id="proceso" class="proceso-section">
        <div class="container">
            <div class="proceso-content">
                <div class="proceso-header">
                    <h2>Nuestro <span class="highlight">Proceso</span></h2>
                    <p>Un método probado que garantiza calidad, precisión y entregas a tiempo</p>
                </div>
                
                <div class="proceso-steps">
                    <div class="proceso-step">
                        <div class="step-number">1</div>
                        <h4>Análisis y Consulta</h4>
                        <p>Estudiamos tu proyecto en detalle, analizamos especificaciones técnicas y te asesoramos sobre materiales y procesos óptimos.</p>
                    </div>
                    
                    <div class="proceso-step">
                        <div class="step-number">2</div>
                        <h4>Diseño y Planificación</h4>
                        <p>Desarrollamos planos técnicos precisos y planificamos cada etapa del proceso de fabricación con nuestro equipo de ingenieros.</p>
                    </div>
                    
                    <div class="proceso-step">
                        <div class="step-number">3</div>
                        <h4>Fabricación de Precisión</h4>
                        <p>Utilizamos maquinaria CNC de última generación y técnicas especializadas para crear piezas con tolerancias exactas.</p>
                    </div>
                    
                    <div class="proceso-step">
                        <div class="step-number">4</div>
                        <h4>Control de Calidad</h4>
                        <p>Cada pieza pasa por rigurosos controles de calidad para garantizar que cumple con todas las especificaciones requeridas.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Quote Form Section -->
    <section id="quote-form" class="quote-form-section">
        <div class="container">
            <div class="quote-form-content">
                <div class="quote-form-info">
                    <h2>Solicita tu <span class="highlight">Cotización</span></h2>
                    <p class="quote-intro">Completa el formulario con los detalles de tu proyecto y te contactaremos en máximo 24 horas con una propuesta personalizada.</p>
                    
                    <div class="quote-benefits">
                        <div class="quote-benefit">
                            <i class="fas fa-clock"></i>
                            <div>
                                <h4>Respuesta Rápida</h4>
                                <p>Cotización detallada en máximo 24 horas hábiles</p>
                            </div>
                        </div>
                        <div class="quote-benefit">
                            <i class="fas fa-calculator"></i>
                            <div>
                                <h4>Sin Compromiso</h4>
                                <p>Cotización gratuita y sin obligación de compra</p>
                            </div>
                        </div>
                        <div class="quote-benefit">
                            <i class="fas fa-handshake"></i>
                            <div>
                                <h4>Asesoría Personalizada</h4>
                                <p>Te ayudamos a optimizar tu proyecto</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="quote-form-container">
                    <form id="customQuoteForm" class="custom-quote-form" action="send_quote.php" method="post">
                        <h3>Formulario de Cotización</h3>
                        
                        <div class="form-section">
                            <h4><i class="fas fa-user"></i> Información de Contacto</h4>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="customerName">Nombre Completo *</label>
                                    <input type="text" id="customerName" required placeholder="Ingresa tu nombre completo">
                                </div>
                                <div class="form-group">
                                    <label for="customerCompany">Empresa *</label>
                                    <input type="text" id="customerCompany" required placeholder="Nombre de tu empresa">
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="customerEmail">Email *</label>
                                    <input type="email" id="customerEmail" required placeholder="correo@empresa.com">
                                </div>
                                <div class="form-group">
                                    <label for="customerPhone">Teléfono *</label>
                                    <input type="tel" id="customerPhone" required placeholder="+57 301 123 4567">
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <h4><i class="fas fa-project-diagram"></i> Detalles del Proyecto</h4>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="projectType">Tipo de Proyecto</label>
                                    <select id="projectType">
                                        <option value="">Selecciona el tipo de proyecto</option>
                                        <option value="prototipo">Prototipo único</option>
                                        <option value="serie-corta">Serie corta (2-100 piezas)</option>
                                        <option value="serie-media">Serie media (51-500 piezas)</option>
                                        <option value="serie-grande">Serie grande (500+ piezas)</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="quantity">Cantidad Requerida</label>
                                    <input type="number" id="quantity" min="1" placeholder="Número de piezas">
                                    <p class="form-help" style="color: #000000; font-weight: 600;">💡 Recuerda que entre mayor sea la cantidad de unidades que solicites, más económico será el precio que obtendrás.</p>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="material">Material Deseado</label>
                                    <select id="material">
                                        <option value="">Selecciona el material</option>
                                        <option value="bronce-laton">Bronce – Latón</option>
                                        <option value="acero-al-carbon-12l14">Acero al carbón (SAE 12L14)</option>
                                        <option value="acero-inoxidable-304">Acero inoxidable (304)</option>
                                        <option value="aluminio">Aluminio</option>
                                        <option value="otro">Otro (especificar en descripción)</option>
                                    </select>
                                    <p class="form-help">Para piezas a la medida, bronce y latón se trabajan como el mismo material; por eso verás la opción “Bronce – Latón”.</p>
                                </div>
                                <div class="form-group">
                                    <label for="deadline">Fecha Esperada de Entrega</label>
                                    <input type="date" id="deadline">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="projectDescription">Descripción del Proyecto *</label>
                                <textarea id="projectDescription" rows="4" required placeholder="Describe detalladamente la pieza que necesitas: dimensiones, tolerancias, función, aplicación, etc."></textarea>
                            </div>
                            
                            <div class="form-group">
                                <label for="specifications">Especificaciones Técnicas</label>
                                <textarea id="specifications" rows="3" placeholder="Tolerancias dimensionales, acabados superficiales, tratamientos térmicos, normas específicas, etc."></textarea>
                            </div>
                        </div>

                        <div class="form-section">
                            <h4><i class="fas fa-info-circle"></i> Información Adicional</h4>
                            <div class="form-group">
                                <label for="hasDrawings">¿Tienes planos o archivos CAD?</label>
                                <select id="hasDrawings">
                                    <option value="">Selecciona una opción</option>
                                    <option value="si">Sí, tengo planos/archivos CAD</option>
                                    <option value="no">No, necesito ayuda con el diseño</option>
                                    <option value="bosquejo">Solo tengo un bosquejo o idea</option>
                                    <option value="muestra">Tengo la muestra</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="additionalInfo">Información Adicional</label>
                                <textarea id="additionalInfo" rows="3" placeholder="Cualquier información adicional que consideres relevante para tu proyecto: aplicación específica, condiciones de trabajo, restricciones especiales, etc."></textarea>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="submit-btn">
                                <i class="fas fa-paper-plane"></i>
                                Enviar Solicitud
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Statistics Section -->
    <section class="stats-section">
        <div class="container">
            <div class="stats-content">
                <div class="stats-header">
                    <h2><span class="highlight">Excelencia</span><span class="text-base"> en Cifras</span></h2>
                    <p>Más de tres décadas creando soluciones metálicas para el mercado colombiano.</p>
                </div>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon"><i class="fas fa-calendar-alt"></i></div>
                        <div class="stat-number" data-target="37">37+</div>
                        <div class="stat-label">Años de Experiencia</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon"><i class="fas fa-cogs"></i></div>
                        <div class="stat-number" data-target="2500000">2'500.000</div>
                        <div class="stat-label">Piezas fabricadas</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon"><i class="fas fa-industry"></i></div>
                        <div class="stat-number" data-target="800">800+</div>
                        <div class="stat-label">Clientes atendidos</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon"><i class="fas fa-award"></i></div>
                        <div class="stat-number" data-target="99">99%</div>
                        <div class="stat-label">% Satisfacción</div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <script src="script.js"></script>
    
    <script>
        // Animación de números en estadísticas
        function animateNumbers() {
            const statNumbers = document.querySelectorAll('.stat-number');
            
            statNumbers.forEach(statNumber => {
                const target = parseInt(statNumber.getAttribute('data-target'));
                const duration = 2000; // 2 segundos
                const increment = target / (duration / 16); // 60 FPS
                let current = 0;
                
                const timer = setInterval(() => {
                    current += increment;
                    if (current >= target) {
                        statNumber.textContent = target + (target === 99 ? '%' : '+');
                        clearInterval(timer);
                    } else {
                        statNumber.textContent = Math.floor(current) + (target === 99 ? '%' : '+');
                    }
                }, 16);
            });
        }
        
        // Intersección Observer para activar animación cuando se ve la sección
        const observerOptions = {
            threshold: 0.5,
            rootMargin: '0px 0px -100px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animateNumbers();
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);
        
        // Observar la sección de estadísticas
        document.addEventListener('DOMContentLoaded', () => {
            const statsSection = document.querySelector('.stats-section');
            if (statsSection) {
                observer.observe(statsSection);
            }
        });
        
        // Smooth scroll para navegación interna
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Validación del formulario
        document.getElementById('customQuoteForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Obtener todos los campos requeridos
            const requiredFields = [
                'customerName',
                'customerCompany', 
                'customerEmail',
                'customerPhone',
                'projectDescription'
            ];
            
            let isValid = true;
            
            // Validar campos requeridos
            requiredFields.forEach(fieldId => {
                const field = document.getElementById(fieldId);
                if (!field.value.trim()) {
                    field.style.borderColor = '#ef4444';
                    isValid = false;
                    
                    // Remover color de error después de 3 segundos
                    setTimeout(() => {
                        field.style.borderColor = '#E2E8F0';
                    }, 3000);
                } else {
                    field.style.borderColor = '#E2E8F0';
                }
            });
            
            // Validar email
            const email = document.getElementById('customerEmail');
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (email.value && !emailRegex.test(email.value)) {
                email.style.borderColor = '#ef4444';
                isValid = false;
                setTimeout(() => {
                    email.style.borderColor = '#E2E8F0';
                }, 3000);
            }
            
            if (isValid) {
                // Cambiar texto del botón
                const submitBtn = document.querySelector('.submit-btn');
                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enviando...';
                submitBtn.disabled = true;
                
                // Simular envío (reemplazar con lógica real)
                setTimeout(() => {
                    alert('¡Formulario enviado exitosamente! Te contactaremos en máximo 24 horas.');
                    
                    // Restaurar botón
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                    
                    // Limpiar formulario
                    this.reset();
                }, 2000);
            } else {
                // Scroll al primer campo con error
                const firstErrorField = document.querySelector('input[style*="rgb(239, 68, 68)"], textarea[style*="rgb(239, 68, 68)"]');
                if (firstErrorField) {
                    firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        });
    </script>

</body>
</html>