<!DOCTYPE html><html class="dark" lang="es" style="width: 1280px; height: 3305px; overflow: hidden; position: relative;"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>LABMETAL SOLUCIONES | Herrería de Alta Precisión</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&amp;family=Hanken+Grotesk:wght@600;700;800&amp;family=JetBrains+Mono:wght@500&amp;display=swap" rel="stylesheet">
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "on-primary-container": "#623200",
                    "inverse-surface": "#e2e2e6",
                    "secondary-container": "#444a50",
                    "on-surface-variant": "#ddc1ae",
                    "on-background": "#e2e2e6",
                    "on-error-container": "#ffdad6",
                    "inverse-on-surface": "#2f3034",
                    "tertiary-container": "#a9aaac",
                    "primary-container": "#ff8c00",
                    "on-tertiary": "#2f3133",
                    "on-secondary-fixed-variant": "#42474e",
                    "outline-variant": "#564334",
                    "surface-tint": "#ffb77d",
                    "primary": "#ffb77d",
                    "surface-container-lowest": "#0c0e11",
                    "on-tertiary-container": "#3d3f41",
                    "error-container": "#93000a",
                    "on-primary-fixed": "#2f1500",
                    "surface-container": "#1e2023",
                    "on-secondary-container": "#b4b9c1",
                    "surface-dim": "#111416",
                    "inverse-primary": "#904d00",
                    "on-tertiary-fixed": "#1a1c1e",
                    "tertiary": "#c6c6c9",
                    "error": "#ffb4ab",
                    "surface-container-highest": "#333538",
                    "primary-fixed": "#ffdcc3",
                    "on-secondary-fixed": "#171c22",
                    "background": "#111416",
                    "secondary-fixed": "#dee3eb",
                    "outline": "#a48c7a",
                    "surface": "#111416",
                    "on-tertiary-fixed-variant": "#454749",
                    "on-error": "#690005",
                    "surface-bright": "#37393c",
                    "primary-fixed-dim": "#ffb77d",
                    "surface-variant": "#333538",
                    "on-secondary": "#2c3137",
                    "tertiary-fixed-dim": "#c6c6c9",
                    "surface-container-high": "#282a2d",
                    "surface-container-low": "#1a1c1f",
                    "on-surface": "#e2e2e6",
                    "on-primary-fixed-variant": "#6e3900",
                    "secondary": "#c2c7cf",
                    "secondary-fixed-dim": "#c2c7cf",
                    "tertiary-fixed": "#e2e2e5",
                    "on-primary": "#4d2600"
            },
            "borderRadius": {
                    "DEFAULT": "0.125rem",
                    "lg": "0.25rem",
                    "xl": "0.5rem",
                    "full": "0.75rem"
            },
            "spacing": {
                    "margin-desktop": "40px",
                    "gutter": "16px",
                    "column-gap": "24px",
                    "margin-mobile": "20px",
                    "base": "8px"
            },
            "fontFamily": {
                    "body-md": ["Inter"],
                    "body-lg": ["Inter"],
                    "label-md": ["JetBrains Mono"],
                    "label-sm": ["JetBrains Mono"],
                    "headline-xl": ["Hanken Grotesk"],
                    "headline-md": ["Hanken Grotesk"],
                    "headline-lg-mobile": ["Hanken Grotesk"],
                    "headline-lg": ["Hanken Grotesk"]
            },
            "fontSize": {
                    "body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
                    "body-lg": ["18px", {"lineHeight": "28px", "fontWeight": "400"}],
                    "label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.05em", "fontWeight": "500"}],
                    "label-sm": ["12px", {"lineHeight": "16px", "fontWeight": "500"}],
                    "headline-xl": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "800"}],
                    "headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
                    "headline-lg-mobile": ["28px", {"lineHeight": "34px", "fontWeight": "700"}],
                    "headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "700"}]
            }
          }
        }
      }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .steel-border { border: 1px solid #3D4043; }
        .metal-plate { border-top: 2px solid #564334; }
        .glass-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(17, 20, 22, 0.8); }
        .hero-gradient { background: linear-gradient(180deg, rgba(17,20,22,0.4) 0%, rgba(17,20,22,1) 100%); }
    </style>
</head>
<body class="bg-surface text-on-surface font-body-md selection:bg-primary-container selection:text-on-primary-container">
<!-- TopAppBar -->
<header class="sticky top-0 w-full z-50 bg-surface dark:bg-surface border-b border-outline-variant dark:border-outline-variant flex items-center justify-between px-margin-mobile md:px-margin-desktop h-16 w-full glass-header">
<div class="flex items-center gap-3">

<h1 class="font-headline-md text-headline-md font-black tracking-tighter text-primary dark:text-primary">LABMETAL SOLUCIONES</h1>
</div>
<nav class="hidden md:flex gap-8 items-center"><span class="text-primary font-bold font-label-md text-label-md">Inicio</span></nav>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-primary">account_circle</span>
</div>
</header>
<main class="w-full max-w-[1280px] mx-auto overflow-hidden">
<!-- Hero Section -->
<section class="relative w-full h-[85vh] flex items-center">
<div class="absolute inset-0 z-0 overflow-hidden">
<img alt="Vista exterior de un portón corredizo de metal moderno diseñado por LabMetal Soluciones" class="w-full h-full object-cover grayscale-[0.3] brightness-50" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAX_wVHnThV1shTkK2NncNgH2ODyXfwTMH2NqrTLKvgvGxPqX9zV-tLVa4cE6Rwe_BJE8Ptis3UtHdQLw_Ior8kXW55QaA1frMv0VL12R39z1mnV9qpNd4BIqH--hg3nmw_HDdvJhSS3TnUk7DlulN3ZFMZwI581wD-Ch0sk-ZBXLkN9lvogYXkDWOaH_7JxWk5mxptdd_pst5A4unRTglIY9BWLYuCpHR3RRGAfAALRCAeYVJEpV7ADTgc_fF-w5oBs42uBvhGJFYI">
<div class="absolute inset-0 hero-gradient"></div>
</div>
<div class="relative z-10 px-margin-mobile md:px-margin-desktop w-full max-w-4xl">
<div class="flex items-center gap-2 mb-4">
<div class="h-[2px] w-12 bg-primary-container"></div>

</div>
<h2 class="font-headline-xl text-headline-xl text-white mb-6 leading-tight">
                    LABMETAL SOLUCIONES: <span class="text-primary-container">SOLUCIONES EN HIERRO Y ACERO</span>
</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mb-10 leading-relaxed">
                    Trabajos de herrería, soldaduras, reparaciones y carpintería metálica de alta precisión. Construimos estructuras duraderas con el rigor técnico que su proyecto exige.
                </p>
<div class="flex flex-col sm:flex-row gap-4">
<a class="bg-primary-container text-on-primary-container font-headline-md text-headline-md px-8 py-4 rounded-lg flex items-center justify-center gap-3 transition-all hover:brightness-110 active:scale-95 shadow-lg shadow-primary-container/20" href="https://wa.me/541178929197">
<span class="material-symbols-outlined" style="font-variation-settings: &quot;FILL&quot; 1;">chat</span>
                        Contactar por WhatsApp
                    </a>

</div>
</div>
</section>
<!-- Services Section -->
<section class="py-24 px-margin-mobile md:px-margin-desktop bg-surface">
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
<div>
<h3 class="font-headline-lg text-headline-lg text-white mb-2">Servicios Especializados</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Soluciones robustas para hogares e industrias.</p>
</div>
<div class="h-[1px] flex-grow mx-8 bg-outline-variant hidden md:block opacity-50"></div>

</div>
<!-- Bento Grid Services -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
<!-- Service 1: Herrería & Portones -->
<div class="md:col-span-8 group relative overflow-hidden bg-surface-container-high rounded-xl steel-border metal-plate transition-all hover:-translate-y-1">
<div class="aspect-[16/9] md:aspect-auto md:h-[400px] overflow-hidden">
<img alt="Un portón de metal negro con diseño minimalista instalado en una residencia moderna" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAX_wVHnThV1shTkK2NncNgH2ODyXfwTMH2NqrTLKvgvGxPqX9zV-tLVa4cE6Rwe_BJE8Ptis3UtHdQLw_Ior8kXW55QaA1frMv0VL12R39z1mnV9qpNd4BIqH--hg3nmw_HDdvJhSS3TnUk7DlulN3ZFMZwI581wD-Ch0sk-ZBXLkN9lvogYXkDWOaH_7JxWk5mxptdd_pst5A4unRTglIY9BWLYuCpHR3RRGAfAALRCAeYVJEpV7ADTgc_fF-w5oBs42uBvhGJFYI">
<div class="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent"></div>
</div>
<div class="absolute bottom-0 left-0 p-8 w-full">
<div class="bg-surface-container-lowest/80 backdrop-blur px-3 py-1 rounded w-fit mb-4 border border-outline-variant">

</div>
<h4 class="font-headline-md text-headline-md text-white mb-2">Herrería Integral &amp; Portones</h4>
<p class="font-body-md text-body-md text-on-surface-variant max-w-lg">Diseño y fabricación de portones, puertas, rejas, entrepisos, estructuras metálicas a medida con terminaciones de alta precisión.</p>
</div>
</div>
<!-- Service 2: Soldaduras Especializadas -->
<div class="md:col-span-4 group bg-surface-container-high rounded-xl steel-border metal-plate flex flex-col transition-all hover:-translate-y-1">
<div class="h-64 overflow-hidden">
<img alt="Detalle de una soldadura TIG perfecta sobre acero inoxidable con efecto de coloración por calor" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA27LEkYztT00Jc05Ge4FIwPQSMrUcFvAz66Y8CNp6BjhK9swy08iGVPNIVSlwHaaWqiUgbdDv0U5uU4WsOFvR3ggK1m_t8wJ3hYAVha38NZKlCTsritbfJBUqaaQNuD_BoSOp7CT6Tt-bP85vf6r7HyYMddDExZNq28YqHZKtcw99AECN9O8zfC6tvKb0fnTbgYbDnoF4g1v8L8cLh2k-crIBqvHS4rhctWJELnNNZYrG2jnh0s1vUWbGIV9LMcaGQm3-TKc7YocVB">
</div>
<div class="p-8 flex-grow flex flex-col justify-between">
<div>
<h4 class="font-headline-md text-headline-md text-white mb-3">Soldaduras Especializadas</h4>
<p class="font-body-md text-body-md text-on-surface-variant">Uniones de alta resistencia mediante procesos MIG, MAG y TIG para estructuras críticas.</p>
</div>
<div class="mt-6 flex flex-wrap gap-2">
<span class="bg-background px-3 py-1 rounded text-[10px] font-label-md text-tertiary border border-outline-variant">TIG/MIG</span>

</div>
</div>
</div>
<!-- Service 3: Carpintería Metálica -->
<div class="md:col-span-4 group bg-surface-container-high rounded-xl steel-border metal-plate flex flex-col transition-all hover:-translate-y-1">
<div class="h-64 overflow-hidden">
<img alt="Reja de seguridad con patrón geométrico industrial instalada sobre una pared de ladrillo visto" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDzoG27K4tRVP5wiAiIGk8H5PFYxKsbaDTU8t33QQgyqUykMMxCJd8CYSVDx-MyCId4lVsBFWnfipHXSyI-l-6DqS7YDTcoDW1zdetgxDv3OVTcNpc63DXjthfXPyQJZ8Co1JlzWM_XXuu2c_pR-VTq9-MVC-xbzWR7PbVsRKPe3mkglkWIr1iNT5ABl4dyks5HOSUEsV7O9DINnJAhYx_J1_vqJSSQCIkH6zLyjj2IptZgT9x_kbB_8tngS6NdK22kmWGe9YbE9axj">
</div>
<div class="p-8 flex-grow flex flex-col justify-between">
<div>
<h4 class="font-headline-md text-headline-md text-white mb-3">Carpintería Metálica</h4>
<p class="font-body-md text-body-md text-on-surface-variant">Fabricación de cerramientos, marcos y estructuras livianas de precisión.</p>
</div>
<div class="mt-6">

</div>
</div>
</div>
<!-- Service 4: Reparaciones & Mantenimiento -->
<div class="md:col-span-8 group relative bg-surface-container-high rounded-xl steel-border metal-plate overflow-hidden transition-all hover:-translate-y-1">
<div class="flex flex-col md:flex-row h-full">
<div class="p-8 md:w-1/2 flex flex-col justify-center">
<h4 class="font-headline-md text-headline-md text-white mb-4">Reparaciones &amp; Mantenimiento</h4>
<p class="font-body-md text-body-md text-on-surface-variant mb-6">Servicio técnico de urgencia para portones, refuerzo de estructuras existentes y tratamiento anticorrosivo.</p>
<ul class="space-y-3">
<li class="flex items-center gap-3 text-on-surface">
<span class="material-symbols-outlined text-primary text-sm">check_circle</span>
<span class="">Recambio de rodajes</span>
</li>
<li class="flex items-center gap-3 text-on-surface">
<span class="material-symbols-outlined text-primary text-sm">check_circle</span>
<span class="">Pintura&nbsp;</span>
</li>
<li class="flex items-center gap-3 text-on-surface">
<span class="material-symbols-outlined text-primary text-sm">check_circle</span>
<span class="">Refuerzo estructural-soldaduras de reparacion</span><span class=""><br></span>
</li>
</ul>
</div>
<div class="md:w-1/2 relative min-h-[250px]">
<div class="w-full h-full bg-cover bg-center grayscale brightness-50 group-hover:grayscale-0 transition-all duration-700" data-alt="Taller metalúrgico con herramientas industriales, chispas de soldadura y piezas de hierro organizadas sobre una mesa de trabajo de acero macizo." style="background-image: url(&quot;https://lh3.googleusercontent.com/aida-public/AB6AXuD2LlDvXCKo8tUn_6gOllsFta6B5YUBHRNOhL2ts43cKdalNSskj_TnTNo42uUgKyzR4JuwFY89RoqNfrTT0BDMbxivY0y_vfv7ucBFufUnHg9_wcekSlEUQxQ2CDE5waL48Y-_EC-uC4Tq8h0CI0BUktUYfqhf1WBbnhva_BHqVrf9FUH6PPWn3cW9i8in5-MNInj9AG5BiO1iI-rl0NJKab1V79IrLpZCMcbtNSamwQ6CYf95EdRXg8nRCeMwRI8v2RbtkYWGC8eu&quot;);"></div>
<div class="absolute inset-0 bg-gradient-to-r from-surface-container-high to-transparent"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Precision Details (Industrial Trust) -->
<section class="py-20 px-margin-mobile md:px-margin-desktop bg-surface-container-low border-y border-outline-variant">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<div class="font-headline-xl text-headline-xl text-primary-container mb-2">15+</div>
<div class="font-label-md text-label-md text-on-surface-variant uppercase">Años de Oficio</div>
</div>
<div>


</div>


</div>
</section>
<!-- Final CTA -->
<section class="py-24 px-margin-mobile md:px-margin-desktop text-center relative overflow-hidden">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary-container/5 rounded-full blur-[120px] pointer-events-none"></div>
<h2 class="font-headline-lg text-headline-lg text-white mb-6">¿Tiene un proyecto en mente?</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto mb-12">
                Solicite un presupuesto sin cargo. Analizamos sus planos o realizamos mediciones en obra para garantizar un ajuste perfecto.
            </p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-6">
<div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto"><a href="https://wa.me/541178929197" class="bg-primary text-on-primary font-headline-md px-8 py-5 rounded-lg flex items-center justify-center gap-3 transition-transform active:scale-95 shadow-xl shadow-primary/10"><span class="material-symbols-outlined">chat</span> WhatsApp</a><a href="mailto:info@labmetal.com.ar" class="bg-surface-container-high text-on-surface font-headline-md px-8 py-5 rounded-lg flex items-center justify-center gap-3 border border-outline-variant transition-transform active:scale-95 shadow-xl"> <span class="material-symbols-outlined">mail</span> Email</a></div>
<div class="flex items-center gap-4 text-on-surface-variant font-label-md">
<span class="material-symbols-outlined text-primary">phone_in_talk</span>
<span class="">Llamar ahora: +54 9 11 7892-9197</span>
</div>
</div>
</section>
</main>
<!-- Navigation Footer (Mobile) -->
<nav class="md:hidden fixed bottom-0 w-full z-50 bg-surface-container-high dark:bg-surface-container-high border-t border-outline-variant flex justify-around items-center h-16 px-4">
<a class="flex flex-col items-center justify-center text-primary dark:text-primary font-bold active:scale-90 transition-transform duration-150" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: &quot;FILL&quot; 1;">home</span>
<span class="font-label-sm text-label-sm">Inicio</span>
</a>
<a class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant active:scale-90 transition-transform duration-150" href="#">
<span class="material-symbols-outlined">chat</span>
<span class="font-label-sm text-label-sm">WhatsApp</span>
</a>
<a class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant active:scale-90 transition-transform duration-150" href="#">
<span class="material-symbols-outlined">call</span>
<span class="font-label-sm text-label-sm">Llamar</span>
</a>
</nav>
<!-- Footer -->
<footer class="bg-surface-container-lowest py-16 px-margin-mobile md:px-margin-desktop border-t border-outline-variant pb-32 md:pb-16">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12">
<div class="md:col-span-2">
<h4 class="font-headline-md text-headline-md text-primary mb-4">Herrería en General &amp; Portones</h4>
<p class="font-body-md text-on-surface-variant max-w-md">Diseño y fabricación de portones automáticos, puertas, rejas, entrepisos y estructuras metálicas a medida con terminaciones de alta precisión.</p>
</div>
<div>


</div>

</div>
<div class="mt-16 pt-8 border-t border-outline-variant/30 flex flex-col md:flex-row justify-between items-center gap-4 text-on-tertiary-fixed-variant text-sm font-label-sm">
<p class="">© 2024 LABMETAL SOLUCIONES. Todos los derechos reservados.</p>

</div>
</footer>
<script>
        // Micro-interactions for industrial feel
        document.querySelectorAll('.group').forEach(card => {
            card.addEventListener('mouseenter', () => {
                // Potential for adding subtle JS-based light glint effects
            });
        });
    </script>




</body></html>