{"id":9,"date":"2026-02-12T00:08:14","date_gmt":"2026-02-12T00:08:14","guid":{"rendered":"https:\/\/ocm.agenciacroma.com.ar\/?page_id=9"},"modified":"2026-02-25T12:05:37","modified_gmt":"2026-02-25T12:05:37","slug":"elementor-9","status":"publish","type":"page","link":"https:\/\/ocm.agenciacroma.com.ar\/en\/","title":{"rendered":"Elementor #9"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"9\" class=\"elementor elementor-9\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f740003 e-con-full e-flex e-con e-parent\" data-id=\"f740003\" data-element_type=\"container\" data-e-type=\"container\" id=\"inicio\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e8fb01 elementor-widget elementor-widget-html\" data-id=\"4e8fb01\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<div class=\"ocm-unified-container\">\r\n    \r\n    <section class=\"ocm-hero-layer\">\r\n        <nav class=\"ocm-header\">\r\n            <div class=\"ocm-header-container\">\r\n                <div class=\"ocm-logo\">\r\n                    <a href=\"#\"><img decoding=\"async\" src=\"https:\/\/ocm.agenciacroma.com.ar\/wp-content\/uploads\/2026\/02\/OCMwhite.png\" alt=\"OCM Logo\"><\/a>\r\n                <\/div>\r\n                \r\n                <div class=\"ocm-nav-right\">\r\n                    <ul class=\"ocm-menu\">\r\n                        <li><a href=\"#proyectos\">PROYECTOS<\/a><\/li>\r\n                        <li><a href=\"#estrategia\">ESTRATEGIA<\/a><\/li>\r\n                        <li><a href=\"#compromiso-esg\">COMPROMISO ESG<\/a><\/li>\r\n                        <li><a href=\"#contacto\">CONTACTO<\/a><\/li>\r\n                    <\/ul>\r\n\r\n                   \r\n\r\n                    <div class=\"ocm-burger\" id=\"ocm-burger\">\r\n                        <span><\/span><span><\/span><span><\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ocm-mobile-menu\" id=\"ocm-mobile-menu\">\r\n                <ul>\r\n                    <li><a href=\"#proyectos\">PROYECTOS<\/a><\/li>\r\n                    <li><a href=\"#estrategia\">ESTRATEGIA<\/a><\/li>\r\n                    <li><a href=\"#compromiso-esg\">COMPROMISO ESG<\/a><\/li>\r\n                    <li><a href=\"#contacto\">CONTACTO<\/a><\/li>\r\n                <\/ul>\r\n            <\/div>\r\n        <\/nav>\r\n\r\n        <div class=\"ocm-viewport\">\r\n            <div class=\"ocm-bg-slider\">\r\n                <div class=\"ocm-bg-slide active\"><img decoding=\"async\" src=\"https:\/\/ocm.agenciacroma.com.ar\/wp-content\/uploads\/2026\/02\/pexels-enrique72-15071423-scaled.jpg\"><\/div>\r\n                <div class=\"ocm-bg-slide\"><img decoding=\"async\" src=\"https:\/\/ocm.agenciacroma.com.ar\/wp-content\/uploads\/2026\/02\/pexels-mark-thomas-2149938474-31721779-scaled.jpg\"><\/div>\r\n                <div class=\"ocm-bg-slide\"><img decoding=\"async\" src=\"https:\/\/ocm.agenciacroma.com.ar\/wp-content\/uploads\/2026\/02\/pexels-curiosophotography-4764706-scaled.jpg\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ocm-hero-header\">\r\n                <h1 class=\"ocm-title-top\">DESARROLLO <br> <span class=\"ocm-yellow-text\">MINERO ESTRAT\u00c9GICO<\/span><\/h1>\r\n            <\/div>\r\n\r\n            <div class=\"ocm-content-left\">\r\n                <div class=\"ocm-text-group active\">\r\n                    <h3 class=\"ocm-category\">POTENCIAL GEOL\u00d3GICO<\/h3>\r\n                    <h2 class=\"ocm-big-desc\">OCM es una compa\u00f1\u00eda enfocada en el desarrollo de proyectos mineros con alto potencial geol\u00f3gico, bajo un enfoque estrat\u00e9gico, responsable y de largo plazo.<\/h2>\r\n                <\/div>\r\n                <div class=\"ocm-text-group\">\r\n                    <h3 class=\"ocm-category\">CRITERIOS T\u00c9CNICOS<\/h3>\r\n                    <h2 class=\"ocm-big-desc\">La empresa impulsa iniciativas de exploraci\u00f3n y desarrollo mineral aplicando criterios t\u00e9cnicos s\u00f3lidos, una gesti\u00f3n eficiente del riesgo y un fuerte compromiso con la sostenibilidad.<\/h2>\r\n                <\/div>\r\n                <div class=\"ocm-text-group\">\r\n                    <h3 class=\"ocm-category\">EXCELENCIA OPERATIVA<\/h3>\r\n                    <h2 class=\"ocm-big-desc\">Optimizamos la cadena de valor mediante procesos de extracci\u00f3n de vanguardia, garantizando la seguridad operativa y el crecimiento econ\u00f3mico local.<\/h2>\r\n                <\/div>\r\n                \r\n                <div class=\"ocm-hero-actions\">\r\n                    <a href=\"#proyectos\" class=\"ocm-btn-pill-hero\">DESCUBRIR NUESTROS PROYECTOS <span class=\"ocm-arrow\">\u2192<\/span><\/a>\r\n                <\/div>\r\n\r\n                <div class=\"ocm-nav-container\">\r\n                    <div class=\"ocm-nav-controls\">\r\n                        <button id=\"ocm-prev\">\u2190<\/button>\r\n                        <button id=\"ocm-next\">\u2192<\/button>\r\n                    <\/div>\r\n                    <div class=\"ocm-progress-wrap\">\r\n                        <div class=\"ocm-progress-bar\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ocm-scroll-indicator\">\r\n                <span class=\"ocm-scroll-text\">DESCUBR\u00cd M\u00c1S<\/span>\r\n                <div class=\"ocm-scroll-line\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"ocm-phi-reveal-layer\" id=\"phi-section-trigger\">\r\n        <div class=\"ocm-phi-dots\">\r\n            <div class=\"p-dot d-1 active\"><\/div>\r\n            <div class=\"p-dot d-2\"><\/div>\r\n            <div class=\"p-dot d-3\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"phi-steps-wrapper\">\r\n            <div class=\"phi-step p-step-1\">\r\n                <div class=\"phi-content-layout\">\r\n                    <div class=\"phi-box\">\r\n                        <span class=\"phi-label\">MISI\u00d3N<\/span>\r\n                        <p class=\"phi-main-p\">Desarrollar proyectos mineros de manera responsable y eficiente, aplicando criterios t\u00e9cnicos de excelencia para generar valor sostenible.<\/p>\r\n                    <\/div>\r\n                    <div class=\"phi-image-reveal\">\r\n                        <img decoding=\"async\" src=\"https:\/\/ocm.agenciacroma.com.ar\/wp-content\/uploads\/2026\/02\/pexels-curiosophotography-4764706-scaled.jpg\" alt=\"Misi\u00f3n\">\r\n                    <\/div>\r\n                <\/div>\r\n                <h2 class=\"phi-giant-text\">MISI\u00d3N<\/h2>\r\n            <\/div>\r\n\r\n            <div class=\"phi-step p-step-2\">\r\n                <div class=\"phi-content-layout\">\r\n                    <div class=\"phi-image-reveal\">\r\n                        <img decoding=\"async\" src=\"https:\/\/ocm.agenciacroma.com.ar\/wp-content\/uploads\/2026\/02\/pexels-mark-thomas-2149938474-31721779-scaled.jpg\" alt=\"Visi\u00f3n\">\r\n                    <\/div>\r\n                    <div class=\"phi-box\">\r\n                        <span class=\"phi-label\">VISI\u00d3N<\/span>\r\n                        <p class=\"phi-main-p\">Ser una compa\u00f1\u00eda referente en el desarrollo de proyectos mineros en Argentina, reconocida por su enfoque estrat\u00e9gico y profesional.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <h2 class=\"phi-giant-text\">VISI\u00d3N<\/h2>\r\n            <\/div>\r\n\r\n            <div class=\"phi-step p-step-3\">\r\n                <div class=\"phi-box-wide\">\r\n                    <span class=\"phi-label\">VALORES<\/span>\r\n                    <div class=\"values-grid\">\r\n                        <div class=\"value-card v-anim\">\r\n                            <span class=\"v-num\">01<\/span>\r\n                            <h3>Desarrollo responsable<\/h3>\r\n                            <p>Miner\u00eda que respete el ambiente y el entorno social.<\/p>\r\n                        <\/div>\r\n                        <div class=\"value-card v-anim\">\r\n                            <span class=\"v-num\">02<\/span>\r\n                            <h3>Transparencia<\/h3>\r\n                            <p>Est\u00e1ndares claros, fortaleciendo la confianza p\u00fablica.<\/p>\r\n                        <\/div>\r\n                        <div class=\"value-card v-anim\">\r\n                            <span class=\"v-num\">03<\/span>\r\n                            <h3>Largo plazo<\/h3>\r\n                            <p>Proyectos con foco en la sostenibilidad integral.<\/p>\r\n                        <\/div>\r\n                        <div class=\"value-card v-anim\">\r\n                            <span class=\"v-num\">04<\/span>\r\n                            <h3>Excelencia<\/h3>\r\n                            <p>Criterios profesionales internacionales en cada etapa.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <h2 class=\"phi-giant-text\">VALORES<\/h2>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n\r\n<style>\r\n:root { \r\n    --ocm-yellow: #FFD700; \r\n    --ocm-bg: #202124; \r\n    --font-titles: 'Nulshock', sans-serif;\r\n    --font-body: 'Inter', sans-serif;\r\n}\r\n\r\n.ocm-unified-container { background: var(--ocm-bg); position: relative; font-family: var(--font-body); width: 100%; overflow: hidden; }\r\n\r\n.ocm-title-top, .ocm-category, .ocm-menu li a, .ocm-lang-selector span, .ocm-mobile-menu ul li a,\r\n.phi-label, .phi-giant-text, .v-num, .value-card h3, .ocm-btn-pill-hero, .ocm-scroll-text {\r\n    font-family: var(--font-titles) !important;\r\n}\r\n\r\n\/* HEADER *\/\r\n.ocm-header {\r\n    position: absolute; top: 0; left: 0; width: 100%; z-index: 3000; padding: 25px 0;\r\n    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);\r\n}\r\n.ocm-header-container { width: 100%; padding: 0 6%; display: flex; justify-content: space-between; align-items: center; }\r\n.ocm-logo img { height: 75px; width: auto; }\r\n.ocm-nav-right { display: flex; align-items: center; gap: 20px; }\r\n.ocm-menu { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }\r\n.ocm-menu li a { color: #fff; text-decoration: none; font-size: 9px; letter-spacing: 1.5px; transition: 0.3s; }\r\n.ocm-menu li a:hover { color: var(--ocm-yellow); }\r\n\r\n.ocm-lang-selector { display: flex; align-items: center; gap: 5px; color: #fff; font-size: 10px; border-left: 1px solid rgba(255,255,255,0.2); padding-left: 15px; cursor: pointer; }\r\n.ocm-icon-globe { width: 12px; height: 12px; }\r\n\r\n.ocm-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 3100; }\r\n.ocm-burger span { width: 25px; height: 2px; background: #fff; transition: 0.3s; }\r\n\r\n.ocm-mobile-menu {\r\n    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #08090C;\r\n    display: flex; align-items: center; justify-content: center; z-index: 3050;\r\n    transform: translateX(100%); transition: transform 0.4s ease-in-out;\r\n}\r\n.ocm-mobile-menu.active { transform: translateX(0); }\r\n.ocm-mobile-menu ul { list-style: none; text-align: center; }\r\n.ocm-mobile-menu ul li { margin: 25px 0; }\r\n.ocm-mobile-menu ul li a { color: #fff; text-decoration: none; font-size: 16px; letter-spacing: 2px; }\r\n\r\n\/* HERO *\/\r\n.ocm-hero-layer { position: relative; height: 100vh; width: 100%; z-index: 10; overflow: hidden; }\r\n.ocm-viewport { position: relative; width: 100%; height: 100vh; }\r\n.ocm-bg-slider, .ocm-bg-slide { position: absolute; inset: 0; z-index: 1; }\r\n.ocm-bg-slide { opacity: 0; transition: opacity 1.2s; }\r\n.ocm-bg-slide.active { opacity: 1; }\r\n.ocm-bg-slide img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4); }\r\n\r\n.ocm-hero-header { position: absolute; top: 22%; left: 6%; z-index: 100; }\r\n.ocm-title-top { color: #fff; font-size: clamp(1.8rem, 5vw, 4rem); line-height: 1.1; margin: 0; }\r\n.ocm-yellow-text { color: var(--ocm-yellow); }\r\n\r\n.ocm-content-left { position: absolute; bottom: 10%; left: 6%; z-index: 100; max-width: 500px; }\r\n.ocm-text-group { display: none; }\r\n.ocm-text-group.active { display: block; }\r\n.ocm-category { color: var(--ocm-yellow); font-size: 11px; letter-spacing: 3px; margin-bottom: 10px; }\r\n.ocm-big-desc { color: #fff; font-size: clamp(0.9rem, 2vw, 1.15rem); line-height: 1.5; }\r\n\r\n.ocm-btn-pill-hero {\r\n    text-decoration: none; display: inline-flex; align-items: center; gap: 10px;\r\n    padding: 12px 28px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50px;\r\n    color: #fff !important; font-size: 9px; margin-top: 20px; transition: 0.3s;\r\n}\r\n.ocm-btn-pill-hero:hover { background: #fff; color: #000 !important; }\r\n\r\n.ocm-nav-container { margin-top: 25px; display: flex; align-items: center; gap: 15px; }\r\n.ocm-nav-controls button { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }\r\n.ocm-progress-wrap { width: 70px; height: 2px; background: rgba(255,255,255,0.1); position: relative; }\r\n.ocm-progress-bar { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--ocm-yellow); }\r\n\r\n.ocm-scroll-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 5px; }\r\n.ocm-scroll-text { color: #fff; font-size: 8px; letter-spacing: 2px; opacity: 0.6; }\r\n.ocm-scroll-line { width: 1px; height: 35px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; }\r\n.ocm-scroll-line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--ocm-yellow); animation: ocmScrollAnim 2s infinite; }\r\n\r\n\/* PHILOSOPHY *\/\r\n.ocm-phi-reveal-layer { position: relative; min-height: 100vh; z-index: 20; background: var(--ocm-bg); }\r\n.phi-steps-wrapper { position: relative; height: 100vh; overflow: hidden; }\r\n.phi-step { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 6%; opacity: 0; visibility: hidden; }\r\n.phi-content-layout { display: flex; align-items: center; gap: 50px; width: 100%; max-width: 1200px; z-index: 5; }\r\n.phi-image-reveal { flex: 1; height: 450px; border-radius: 10px; overflow: hidden; clip-path: inset(100% 0 0 0); }\r\n.phi-image-reveal img { width: 100%; height: 100%; object-fit: cover; }\r\n.phi-box { flex: 1.2; }\r\n.phi-label { color: var(--ocm-yellow); font-size: 11px; letter-spacing: 5px; margin-bottom: 15px; display: block; }\r\n.phi-main-p { color: #fff; font-size: clamp(1.2rem, 3vw, 2.2rem); line-height: 1.3; }\r\n\r\n.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 30px; }\r\n.value-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 25px 20px; border-radius: 4px; opacity: 0; transform: translateY(30px); }\r\n.v-num { color: var(--ocm-yellow); font-size: 1.1rem; margin-bottom: 5px; }\r\n.value-card h3 { color: #fff; font-size: 0.95rem; margin-bottom: 8px; }\r\n.value-card p { color: rgba(255,255,255,0.6); font-size: 0.8rem; line-height: 1.4; }\r\n\r\n.ocm-phi-dots { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 15px; z-index: 100; }\r\n.p-dot { width: 7px; height: 7px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; }\r\n.p-dot.active { background: var(--ocm-yellow); border-color: var(--ocm-yellow); }\r\n\r\n.phi-giant-text { position: absolute; right: -5%; top: 50%; transform: translateY(-50%) rotate(90deg); font-size: clamp(6rem, 15vw, 12rem); color: rgba(255, 215, 0, 0.03); white-space: nowrap; z-index: 1; pointer-events: none; }\r\n\r\n@keyframes ocmScrollAnim { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }\r\n\r\n\/* MOBILE *\/\r\n@media (max-width: 1024px) {\r\n    .ocm-menu, .phi-giant-text, .ocm-scroll-indicator { display: none !important; }\r\n    .ocm-burger { display: flex; }\r\n    .ocm-header { background: rgba(8, 9, 12, 0.95); padding: 15px 0; }\r\n    .ocm-hero-header { top: 18%; width: 88%; }\r\n    .ocm-content-left { bottom: 12%; width: 88%; }\r\n    \r\n    .phi-content-layout { flex-direction: column; text-align: center; gap: 20px; }\r\n    .phi-image-reveal { width: 100%; height: 220px; order: 2; margin-top: 20px; }\r\n    .phi-box-wide { padding-top: 60px; }\r\n    \r\n    .values-grid { grid-template-columns: 1fr; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 10px; }\r\n    .value-card { opacity: 1; transform: none; padding: 20px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    \/\/ MENU MOBILE\r\n    const burger = document.getElementById('ocm-burger');\r\n    const mobileMenu = document.getElementById('ocm-mobile-menu');\r\n    burger.onclick = () => {\r\n        mobileMenu.classList.toggle('active');\r\n        burger.classList.toggle('active');\r\n    };\r\n\r\n    \/\/ SLIDER HERO\r\n    const bgSlides = document.querySelectorAll('.ocm-bg-slide');\r\n    const texts = document.querySelectorAll('.ocm-text-group');\r\n    const progressBar = document.querySelector('.ocm-progress-bar');\r\n    let hIndex = 0;\r\n\r\n    function updateHero(n) {\r\n        gsap.killTweensOf(progressBar);\r\n        bgSlides[hIndex].classList.remove('active');\r\n        texts[hIndex].classList.remove('active');\r\n        hIndex = n;\r\n        bgSlides[hIndex].classList.add('active');\r\n        texts[hIndex].classList.add('active');\r\n        startProgress();\r\n    }\r\n\r\n    function startProgress() {\r\n        gsap.fromTo(progressBar, { width: \"0%\" }, {\r\n            width: \"100%\", duration: 7, ease: \"none\",\r\n            onComplete: () => updateHero((hIndex + 1) % bgSlides.length)\r\n        });\r\n    }\r\n\r\n    document.getElementById('ocm-next').onclick = () => updateHero((hIndex + 1) % bgSlides.length);\r\n    document.getElementById('ocm-prev').onclick = () => updateHero((hIndex - 1 + bgSlides.length) % bgSlides.length);\r\n    startProgress();\r\n\r\n    \/\/ FILOSOFIA PINNED\r\n    let tl = gsap.timeline({\r\n        scrollTrigger: {\r\n            trigger: \"#phi-section-trigger\",\r\n            start: \"top top\",\r\n            end: \"+=400%\",\r\n            pin: true,\r\n            scrub: 1,\r\n            onUpdate: (self) => {\r\n                const dots = document.querySelectorAll('.p-dot');\r\n                dots.forEach(d => d.classList.remove('active'));\r\n                if(self.progress < 0.33) dots[0].classList.add('active');\r\n                else if(self.progress < 0.66) dots[1].classList.add('active');\r\n                else dots[2].classList.add('active');\r\n            }\r\n        }\r\n    });\r\n\r\n    tl.to(\".p-step-1\", { autoAlpha: 1, duration: 1 })\r\n      .to(\".p-step-1 .phi-image-reveal\", { clipPath: \"inset(0% 0 0 0)\", duration: 1.5 })\r\n      .to(\".p-step-1\", { autoAlpha: 0, y: -40, duration: 1 })\r\n      .fromTo(\".p-step-2\", { autoAlpha: 0, y: 40 }, { autoAlpha: 1, y: 0, duration: 1 })\r\n      .to(\".p-step-2 .phi-image-reveal\", { clipPath: \"inset(0% 0 0 0)\", duration: 1.5 })\r\n      .to(\".p-step-2\", { autoAlpha: 0, y: -40, duration: 1 })\r\n      .fromTo(\".p-step-3\", { autoAlpha: 0, y: 40 }, { autoAlpha: 1, y: 0, duration: 1 })\r\n      .to(\".v-anim\", { opacity: 1, y: 0, stagger: 0.1, duration: 1.2 });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fea0db5 elementor-widget elementor-widget-html\" data-id=\"fea0db5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"ocm-preloader\">\r\n    <div class=\"ocm-loader-wrapper\">\r\n        \r\n        <svg class=\"ocm-mountain-svg\" viewBox=\"0 0 1400 400\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <path id=\"mountain-path\" \r\n                d=\"M0,350 L200,320 L450,340 L700,120 L900,280 L1150,180 L1400,350\" \r\n                stroke=\"#FFD700\" stroke-width=\"3\" fill=\"none\" \/>\r\n        <\/svg>\r\n\r\n        <div id=\"moving-marker\">\r\n            <div class=\"pulse-ring\"><\/div>\r\n            <div class=\"dot\"><\/div>\r\n        <\/div>\r\n\r\n        <div id=\"loader-logo-container\">\r\n            <img decoding=\"async\" src=\"https:\/\/ocm.agenciacroma.com.ar\/wp-content\/uploads\/2026\/02\/OCMwhite.png\" alt=\"OCM Logo\" class=\"loader-logo\">\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n#ocm-preloader {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    \/* Uso de dvh para cubrir toda la pantalla real en m\u00f3viles *\/\r\n    height: 100vh;\r\n    height: 100dvh; \r\n    background: #08090C;\r\n    z-index: 999999;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n.ocm-loader-wrapper {\r\n    width: 100%;\r\n    height: 100%;\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.ocm-mountain-svg {\r\n    width: 100vw;\r\n    height: 400px;\r\n    position: absolute;\r\n}\r\n\r\n#moving-marker {\r\n    position: absolute;\r\n    width: 24px;\r\n    height: 24px;\r\n    z-index: 20;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    will-change: transform;\r\n}\r\n\r\n.dot {\r\n    width: 10px;\r\n    height: 10px;\r\n    background: #FFD700;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 15px #FFD700;\r\n}\r\n\r\n.pulse-ring {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    border: 2px solid #FFD700;\r\n    border-radius: 50%;\r\n    animation: ocm-pulse 1.5s ease-out infinite;\r\n}\r\n\r\n@keyframes ocm-pulse {\r\n    0% { transform: scale(0.5); opacity: 1; }\r\n    100% { transform: scale(1.8); opacity: 0; }\r\n}\r\n\r\n#loader-logo-container {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    z-index: 10;\r\n    position: absolute;\r\n    top: 55%;\r\n}\r\n\r\n.loader-logo {\r\n    width: 200px;\r\n    height: auto;\r\n}\r\n\r\n\/* Optimizaci\u00f3n espec\u00edfica para Mobile *\/\r\n@media (max-width: 767px) {\r\n    .ocm-mountain-svg {\r\n        width: 100vw;\r\n        height: 250px; \/* Reducido para que la curva no sea tan pronunciada en mobile *\/\r\n    }\r\n    .loader-logo {\r\n        width: 160px;\r\n    }\r\n    #loader-logo-container {\r\n        top: 60%;\r\n    }\r\n}\r\n\r\nbody.is-loading {\r\n    overflow: hidden !important;\r\n    height: 100vh !important;\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/MotionPathPlugin.min.js\"><\/script>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    gsap.registerPlugin(MotionPathPlugin);\r\n    document.body.classList.add('is-loading');\r\n\r\n    const path = document.querySelector(\"#mountain-path\");\r\n    const pathLength = path.getTotalLength();\r\n\r\n    gsap.set(path, {\r\n        strokeDasharray: pathLength,\r\n        strokeDashoffset: pathLength\r\n    });\r\n\r\n    const tl = gsap.timeline({\r\n        onComplete: () => {\r\n            gsap.to(\"#ocm-preloader\", {\r\n                opacity: 0,\r\n                duration: 1,\r\n                ease: \"power2.inOut\",\r\n                onComplete: () => {\r\n                    document.getElementById('ocm-preloader').style.display = 'none';\r\n                    document.body.classList.remove('is-loading');\r\n                }\r\n            });\r\n        }\r\n    });\r\n\r\n    tl.to(path, {\r\n        strokeDashoffset: 0,\r\n        duration: 4,\r\n        ease: \"power1.inOut\"\r\n    });\r\n\r\n    tl.to(\"#moving-marker\", {\r\n        duration: 4,\r\n        ease: \"power1.inOut\",\r\n        motionPath: {\r\n            path: \"#mountain-path\",\r\n            align: \"#mountain-path\",\r\n            alignOrigin: [0.5, 0.5]\r\n        }\r\n    }, 0);\r\n\r\n    tl.to(\"#loader-logo-container\", {\r\n        opacity: 1,\r\n        y: 0,\r\n        duration: 1.2,\r\n        ease: \"power3.out\"\r\n    }, \"-=1.5\");\r\n\r\n    tl.to({}, { duration: 0.5 });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-19b71a2 e-con-full e-flex e-con e-parent\" data-id=\"19b71a2\" data-element_type=\"container\" data-e-type=\"container\" id=\"proyectos\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83bc793 elementor-widget elementor-widget-html\" data-id=\"83bc793\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<section class=\"ocm-project-premium\">\r\n    <div class=\"ocm-project-wrapper\">\r\n        \r\n        <div class=\"ocm-project-top-bar reveal-ocm\">\r\n            <div class=\"ocm-status\">\r\n                <span class=\"ocm-dot\"><\/span> EXPLORACI\u00d3N AVANZADA\r\n            <\/div>\r\n            <div class=\"ocm-coords\">28\u00b0 42' 15\" S \/ 68\u00b0 51' 22\" W<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ocm-project-title-section reveal-ocm\">\r\n            <span class=\"ocm-subtitle\">NUESTROS PROYECTOS<\/span>\r\n            <h2 class=\"ocm-title-compact\">LAS PAILAS <span class=\"ocm-gold\">LA RIOJA<\/span><\/h2>\r\n        <\/div>\r\n\r\n        <div class=\"ocm-main-image-container img-reveal-ocm\">\r\n            <img decoding=\"async\" src=\"https:\/\/ocm.agenciacroma.com.ar\/wp-content\/uploads\/2026\/02\/WhatsApp-Image-2025-01-29-at-18.06.25-3.jpg\" alt=\"Vista Panor\u00e1mica Las Pailas\">\r\n            <div class=\"ocm-img-caption\">DISTRITO VICU\u00d1A - VISTA DE PROYECTO<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ocm-project-grid-content\">\r\n            <div class=\"ocm-text-side\">\r\n                <div class=\"reveal-ocm\">\r\n                    <p class=\"ocm-lead-text\">\r\n                        Las Pailas est\u00e1 situado en el oeste de La Rioja (en el Departamento General Lamadrid), con una altitud que var\u00eda entre los <strong>4000 y 4600 msnm<\/strong>.\r\n                    <\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"reveal-ocm\">\r\n                    <p class=\"ocm-lead-text\">\r\n                        Est\u00e1 estrat\u00e9gicamente ubicado en el cluster de p\u00f3rfidos de cobre-oro denominado <strong>Distrito Vicu\u00f1a<\/strong>, que hospeda tanto yacimientos de p\u00f3rfido de cobre-oro como epitermales de oro-plata-cobre.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"reveal-ocm\">\r\n                    <p class=\"ocm-lead-text\">\r\n                        La exploraci\u00f3n del Cintur\u00f3n Vicu\u00f1a, desarrollada en los \u00faltimos 15 a\u00f1os, devel\u00f3 importantes proyectos como <strong>Filo del Sol y Josemar\u00eda<\/strong>.\r\n                    <\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"ocm-feature-list reveal-ocm\">\r\n                    <div class=\"ocm-feature\">\r\n                        <strong>POTENCIAL GEOL\u00d3GICO<\/strong>\r\n                        <span>Cobre, Oro y Plata<\/span>\r\n                    <\/div>\r\n                    <div class=\"ocm-feature\">\r\n                        <strong>CLUSTER ESTRAT\u00c9GICO<\/strong>\r\n                        <span>Cintur\u00f3n Vicu\u00f1a<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n               \r\n            <\/div>\r\n\r\n            <div class=\"ocm-secondary-image-container img-reveal-ocm\">\r\n                <img decoding=\"async\" src=\"https:\/\/ocm.agenciacroma.com.ar\/wp-content\/uploads\/2026\/02\/image-3-1.png\" alt=\"Muestra de Mineral Las Pailas\">\r\n                <div class=\"ocm-tag-float\">MUESTRA DE TERRENO<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n:root {\r\n    --font-titles: 'Nulshock', sans-serif;\r\n    --font-body: 'Inter', sans-serif;\r\n}\r\n\r\n.ocm-project-premium {\r\n    background: #ffffff;\r\n    padding: 80px 5%;\r\n    font-family: var(--font-body);\r\n    color: #1a1a1a;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* FUENTE NULSHOCK PARA T\u00cdTULOS *\/\r\n.ocm-status,\r\n.ocm-subtitle,\r\n.ocm-title-compact,\r\n.ocm-feature strong,\r\n.ocm-feature span,\r\n.ocm-btn-pill,\r\n.ocm-img-caption,\r\n.ocm-tag-float {\r\n    font-family: var(--font-titles) !important;\r\n}\r\n\r\n.ocm-project-wrapper { max-width: 1200px; margin: 0 auto; }\r\n\r\n.ocm-project-top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    border-bottom: 1px solid #eee;\r\n    padding-bottom: 15px;\r\n    margin-bottom: 40px;\r\n}\r\n\r\n.ocm-status { font-size: 10px; font-weight: 800; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }\r\n.ocm-dot { width: 8px; height: 8px; background: #FFD700; border-radius: 50%; }\r\n.ocm-coords { font-family: monospace; font-size: 11px; color: #999; }\r\n\r\n.ocm-project-title-section { margin-bottom: 50px; }\r\n.ocm-subtitle { font-size: 11px; font-weight: 700; letter-spacing: 5px; color: #999; display: block; margin-bottom: 10px; }\r\n\r\n\/* T\u00cdTULO RE-AJUSTADO *\/\r\n.ocm-title-compact { \r\n    font-size: 2.8rem !important; \/* Tama\u00f1o m\u00f3vil ideal *\/\r\n    font-weight: 900; \r\n    line-height: 1.1; \r\n    margin: 0; \r\n    text-transform: uppercase;\r\n    letter-spacing: -1px;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n    .ocm-title-compact { font-size: 3.8rem !important; } \/* Tama\u00f1o escritorio imponente *\/\r\n}\r\n\r\n.ocm-gold { color: #FFD700; }\r\n\r\n.ocm-main-image-container {\r\n    width: 100%;\r\n    height: 500px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    margin-bottom: 60px;\r\n    border-radius: 4px;\r\n}\r\n\r\n.ocm-main-image-container img { width: 100%; height: 100%; object-fit: cover; }\r\n.ocm-img-caption { position: absolute; bottom: 0; right: 0; background: #1a1a1a; color: #fff; padding: 10px 20px; font-size: 9px; font-weight: 600; }\r\n\r\n.ocm-project-grid-content {\r\n    display: grid;\r\n    grid-template-columns: 1.1fr 0.9fr;\r\n    gap: 60px;\r\n    align-items: start;\r\n}\r\n\r\n.ocm-lead-text { font-size: 1.35rem; line-height: 1.4; font-weight: 400; margin-bottom: 25px; color: #1a1a1a; }\r\n.ocm-body-text { color: #444; line-height: 1.7; font-size: 1.05rem; margin-bottom: 20px; }\r\n\r\n.ocm-feature-list {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    border-top: 1px solid #eee;\r\n    padding: 30px 0;\r\n    margin-top: 20px;\r\n}\r\n\r\n.ocm-feature strong { display: block; font-size: 9px; letter-spacing: 2px; color: #999; margin-bottom: 8px; text-transform: uppercase; }\r\n.ocm-feature span { font-weight: 700; font-size: 1rem; color: #000; }\r\n\r\n.ocm-button-container { margin-top: 30px; }\r\n.ocm-btn-pill {\r\n    text-decoration: none;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    padding: 14px 35px;\r\n    border: 1px solid #888;\r\n    border-radius: 50px;\r\n    color: #555;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: 1px;\r\n    transition: all 0.3s ease;\r\n}\r\n.ocm-btn-pill:hover { background: #000; color: #fff; border-color: #000; transform: translateY(-3px); }\r\n.ocm-arrow { transition: transform 0.3s ease; }\r\n.ocm-btn-pill:hover .ocm-arrow { transform: translateX(5px); }\r\n\r\n.ocm-secondary-image-container {\r\n    position: relative;\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n    aspect-ratio: 4\/3;\r\n}\r\n.ocm-secondary-image-container img { width: 100%; height: 100%; object-fit: cover; }\r\n.ocm-tag-float { position: absolute; top: 20px; left: 20px; background: #FFD700; color: #000; padding: 6px 15px; font-size: 9px; font-weight: 900; }\r\n\r\n@media (max-width: 900px) {\r\n    .ocm-project-grid-content { grid-template-columns: 1fr; }\r\n    .ocm-main-image-container { height: 300px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    if (typeof gsap !== \"undefined\") {\r\n        gsap.registerPlugin(ScrollTrigger);\r\n\r\n        gsap.utils.toArray(\".reveal-ocm\").forEach((el) => {\r\n            gsap.fromTo(el, \r\n                { opacity: 0, filter: \"blur(10px)\", y: 20 },\r\n                { \r\n                    opacity: 1, filter: \"blur(0px)\", y: 0,\r\n                    duration: 0.8,\r\n                    scrollTrigger: {\r\n                        trigger: el,\r\n                        start: \"top 95%\",\r\n                        toggleActions: \"play none none reverse\"\r\n                    }\r\n                }\r\n            );\r\n        });\r\n\r\n        gsap.utils.toArray(\".img-reveal-ocm\").forEach((img) => {\r\n            gsap.fromTo(img, \r\n                { opacity: 0, scale: 0.98 },\r\n                { \r\n                    opacity: 1, scale: 1,\r\n                    duration: 1,\r\n                    ease: \"power2.out\",\r\n                    scrollTrigger: {\r\n                        trigger: img,\r\n                        start: \"top 90%\",\r\n                        toggleActions: \"play none none reverse\"\r\n                    }\r\n                }\r\n            );\r\n        });\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d0e1b0d e-con-full e-flex e-con e-parent\" data-id=\"d0e1b0d\" data-element_type=\"container\" data-e-type=\"container\" id=\"estrategia\">\n\t\t\t\t<div class=\"elementor-element elementor-element-274b601 elementor-widget elementor-widget-html\" data-id=\"274b601\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<section class=\"ocm-strategy-final\">\r\n    <div class=\"ocm-topo-overlay\">\r\n        <svg viewBox=\"0 0 1200 800\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" preserveAspectRatio=\"none\">\r\n            <path d=\"M0,600 L150,450 L350,550 L600,300 L850,500 L1000,350 L1200,600\" stroke=\"rgba(255,215,0,0.15)\" stroke-width=\"2\" fill=\"transparent\" \/>\r\n            <path d=\"M0,800 L200,550 L450,700 L700,450 L950,650 L1200,500\" stroke=\"rgba(255,255,255,0.1)\" stroke-width=\"3\" fill=\"transparent\" \/>\r\n            <path d=\"M0,700 Q300,650 600,750 T1200,700\" stroke=\"rgba(255,255,255,0.05)\" stroke-width=\"1\" fill=\"transparent\" \/>\r\n        <\/svg>\r\n    <\/div>\r\n\r\n    <div class=\"ocm-strategy-wrapper\">\r\n        \r\n        <div class=\"ocm-strategy-intro reveal-gsap\">\r\n            <div class=\"ocm-tag-line\">ESTRATEGIA DE DESARROLLO<\/div>\r\n            <h2 class=\"ocm-hero-title\">MODELO POR <span class=\"ocm-highlight\">ETAPAS<\/span><\/h2>\r\n            \r\n            <p class=\"ocm-strategy-p\">\r\n                OCM implementa un modelo de desarrollo por etapas, que permite avanzar de forma ordenada y eficiente desde la exploraci\u00f3n inicial hasta la definici\u00f3n de recursos minerales.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ocm-metrics-container\">\r\n            <div class=\"ocm-progress-line-bg\">\r\n                <div class=\"ocm-progress-line-fill\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ocm-metrics-grid\">\r\n                <div class=\"ocm-metric-card ocm-yellow-block box-gsap\">\r\n                    <div class=\"ocm-metric-header\">\r\n                        <span class=\"ocm-metric-n\">01<\/span>\r\n                        <span class=\"ocm-metric-tag\">ESTUDIOS DE ESCRITORIO<\/span>\r\n                    <\/div>\r\n                    <p>Estudios de escritorio y recopilaci\u00f3n de informaci\u00f3n existente<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"ocm-metric-card ocm-dark-grey box-gsap\">\r\n                    <div class=\"ocm-metric-header\">\r\n                        <span class=\"ocm-metric-n\">02<\/span>\r\n                        <span class=\"ocm-metric-tag\">MAPEO<\/span>\r\n                    <\/div>\r\n                    <p>Exploraci\u00f3n en terreno (mapeo, muestreo, geof\u00edsica)<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"ocm-metric-card ocm-dark-grey box-gsap\">\r\n                    <div class=\"ocm-metric-header\">\r\n                        <span class=\"ocm-metric-n\">03<\/span>\r\n                        <span class=\"ocm-metric-tag\">PERFORACI\u00d3N<\/span>\r\n                    <\/div>\r\n                    <p>Definici\u00f3n de blancos de perforaci\u00f3n<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"ocm-metric-card ocm-dark-grey box-gsap\">\r\n                    <div class=\"ocm-metric-header\">\r\n                        <span class=\"ocm-metric-n\">04<\/span>\r\n                        <span class=\"ocm-metric-tag\">EXPLORACI\u00d3N<\/span>\r\n                    <\/div>\r\n                    <p>Exploraci\u00f3n avanzada y definici\u00f3n de recursos<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"ocm-metric-card ocm-white-block box-gsap\">\r\n                    <div class=\"ocm-metric-header\">\r\n                        <span class=\"ocm-metric-n\">05<\/span>\r\n                        <span class=\"ocm-metric-tag\">EVALUACI\u00d3N<\/span>\r\n                    <\/div>\r\n                    <p>Evaluaci\u00f3n econ\u00f3mica preliminar bajo est\u00e1ndares internacionales<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ocm-strategy-footer-content\">\r\n            <div class=\"ocm-footer-left footer-gsap\">\r\n                <div class=\"ocm-conclusion-box\">\r\n                    <p>Este enfoque reduce riesgos, optimiza inversiones y maximiza el potencial de valorizaci\u00f3n de los activos.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ocm-footer-right footer-gsap\">\r\n                <div class=\"ocm-image-container\">\r\n                    <img decoding=\"async\" src=\"https:\/\/zangezur.site\/upload\/iblock\/50f\/9822h7mtvsrjmgncif9j4jbpfpu8wbb0\/copper2_1920.png\" alt=\"Mineral de Cobre\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* VARIABLES DE FUENTE *\/\r\n:root {\r\n    --font-titles: 'Nulshock', sans-serif;\r\n    --font-body: 'Inter', sans-serif;\r\n}\r\n\r\n.ocm-strategy-final {\r\n    background: #202124;\r\n    padding: 120px 6%;\r\n    font-family: var(--font-body);\r\n    color: #ffffff;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.ocm-hero-title, \r\n.ocm-tag-line, \r\n.ocm-metric-n, \r\n.ocm-metric-tag, \r\n.ocm-conclusion-box p {\r\n    font-family: var(--font-titles) !important;\r\n}\r\n\r\n.ocm-topo-overlay {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n.ocm-topo-overlay svg { width: 100%; height: 100%; opacity: 0.6; }\r\n\r\n.ocm-strategy-wrapper {\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.ocm-hero-title {\r\n    font-size: clamp(2.5rem, 5vw, 4rem);\r\n    font-weight: 900;\r\n    line-height: 1;\r\n    margin-bottom: 25px;\r\n    text-transform: uppercase;\r\n}\r\n.ocm-highlight { color: #ffd700; }\r\n.ocm-tag-line { font-size: 10px; letter-spacing: 5px; color: #666; margin-bottom: 20px; font-weight: 700; }\r\n.ocm-strategy-p { font-size: 1.1rem; color: #999; max-width: 700px; line-height: 1.6; margin-bottom: 50px; }\r\n\r\n.ocm-metrics-container { position: relative; padding: 60px 0; }\r\n\r\n.ocm-progress-line-bg {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 2px;\r\n    background: rgba(255, 255, 255, 0.05);\r\n    z-index: 1;\r\n    transform: translateY(-50%);\r\n}\r\n\r\n.ocm-progress-line-fill {\r\n    height: 100%;\r\n    width: 0%;\r\n    background: #ffd700;\r\n    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);\r\n}\r\n\r\n.ocm-metrics-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(5, 1fr);\r\n    gap: 15px;\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.ocm-metric-card {\r\n    aspect-ratio: 1\/1.1;\r\n    padding: 25px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    opacity: 0;\r\n    filter: blur(10px);\r\n    transform: translateY(30px);\r\n    transition: filter 0.5s ease;\r\n}\r\n\r\n.ocm-yellow-block { background: #ffd700; color: #000; }\r\n.ocm-dark-grey { background: #1a1c1e; color: #fff; border: 1px solid #333; }\r\n.ocm-white-block { background: #ffffff; color: #000; }\r\n\r\n.ocm-metric-n { font-size: 2.8rem; font-weight: 300; line-height: 1; }\r\n.ocm-metric-tag { font-size: 8px; transform: rotate(90deg); opacity: 0.5; letter-spacing: 2px; font-weight: 700; transform-origin: top right; }\r\n.ocm-metric-card p { font-size: 0.9rem; line-height: 1.3; font-weight: 600; margin: 0; }\r\n\r\n.ocm-strategy-footer-content {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    align-items: center;\r\n    gap: 40px;\r\n    margin-top: 80px;\r\n}\r\n.ocm-conclusion-box { border-left: 4px solid #ffd700; padding: 20px 30px; }\r\n.ocm-conclusion-box p { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0; }\r\n.ocm-image-container img {\r\n    max-width: 450px;\r\n    filter: saturate(0.6) brightness(0.9);\r\n    mask-image: linear-gradient(to left, black, transparent);\r\n    -webkit-mask-image: linear-gradient(to left, black, transparent);\r\n}\r\n\r\n@media (max-width: 1200px) { \r\n    .ocm-metrics-grid { grid-template-columns: repeat(3, 1fr); }\r\n    .ocm-progress-line-bg { display: none; }\r\n}\r\n@media (max-width: 768px) { \r\n    .ocm-metrics-grid { grid-template-columns: 1fr; }\r\n    .ocm-strategy-footer-content { grid-template-columns: 1fr; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    \/\/ 1. T\u00edtulo e intro\r\n    gsap.from(\".reveal-gsap\", {\r\n        opacity: 0,\r\n        y: 30,\r\n        duration: 1,\r\n        scrollTrigger: {\r\n            trigger: \".ocm-strategy-intro\",\r\n            start: \"top 85%\",\r\n            toggleActions: \"play none none reverse\"\r\n        }\r\n    });\r\n\r\n    \/\/ 2. Animaci\u00f3n de las cajas (Activaci\u00f3n por entrada, no por scrub)\r\n    gsap.to(\".box-gsap\", {\r\n        opacity: 1,\r\n        filter: \"blur(0px)\",\r\n        y: 0,\r\n        duration: 0.8,\r\n        stagger: 0.2, \/\/ Aparecen una tras otra\r\n        ease: \"power2.out\",\r\n        scrollTrigger: {\r\n            trigger: \".ocm-metrics-grid\",\r\n            start: \"top 75%\", \/\/ Se activan al llegar aqu\u00ed\r\n            toggleActions: \"play none none reverse\"\r\n        }\r\n    });\r\n\r\n    \/\/ 3. L\u00ednea de progreso (Mantenemos el scrub para el feedback visual)\r\n    gsap.to(\".ocm-progress-line-fill\", {\r\n        width: \"100%\",\r\n        ease: \"none\",\r\n        scrollTrigger: {\r\n            trigger: \".ocm-metrics-grid\",\r\n            start: \"top 75%\",\r\n            end: \"bottom 60%\",\r\n            scrub: 1\r\n        }\r\n    });\r\n\r\n    \/\/ 4. Footer\r\n    gsap.from(\".footer-gsap\", {\r\n        opacity: 0,\r\n        filter: \"blur(10px)\",\r\n        y: 40,\r\n        duration: 1.2,\r\n        stagger: 0.3,\r\n        scrollTrigger: {\r\n            trigger: \".ocm-strategy-footer-content\",\r\n            start: \"top 90%\",\r\n            toggleActions: \"play none none reverse\"\r\n        }\r\n    });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bf33261 e-con-full e-flex e-con e-parent\" data-id=\"bf33261\" data-element_type=\"container\" data-e-type=\"container\" id=\"compromiso-esg\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b254d87 elementor-widget elementor-widget-html\" data-id=\"b254d87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<section class=\"ocm-esg-light\">\r\n    <div class=\"ocm-bg-parallax-light\">\r\n        <img decoding=\"async\" src=\"https:\/\/zangezur.site\/upload\/iblock\/ebe\/xbp7trxvt6bidu5ac8vg38kwdoelz78k\/fwronquwgkxc829tti1kj4gi1xpb304p_min.png\" alt=\"Mining Landscape\">\r\n        <div class=\"ocm-overlay-light\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ocm-centered-wrapper\">\r\n        <div class=\"ocm-esg-header\">\r\n            <div class=\"ocm-pre reveal-item\">RESPONSABILIDAD<\/div>\r\n            <h2 class=\"ocm-main-title reveal-item\">COMPROMISO <span class=\"ocm-yellow\">ESG<\/span><\/h2>\r\n            <p class=\"ocm-lead-desc reveal-item\">\r\n                OCM concibe el desarrollo minero como una actividad estrat\u00e9gica que debe llevarse adelante de manera responsable, transparente y sostenible.\r\n            <\/p>\r\n        <\/div>\r\n\r\n       \r\n\r\n        <div class=\"ocm-esg-metrics-grid\">\r\n            <div class=\"ocm-metric reveal-item\">\r\n                <div class=\"ocm-m-head\"><span>01<\/span> NORMATIVA<\/div>\r\n                <p>Cumplimiento estricto de la normativa vigente.<\/p>\r\n            <\/div>\r\n            <div class=\"ocm-metric reveal-item\">\r\n                <div class=\"ocm-m-head\"><span>02<\/span> AMBIENTE<\/div>\r\n                <p>Protecci\u00f3n y uso responsable de los recursos naturales.<\/p>\r\n            <\/div>\r\n            <div class=\"ocm-metric reveal-item\">\r\n                <div class=\"ocm-m-head\"><span>03<\/span> SOCIAL<\/div>\r\n                <p>Relaci\u00f3n transparente con comunidades locales.<\/p>\r\n            <\/div>\r\n            <div class=\"ocm-metric reveal-item\">\r\n                <div class=\"ocm-m-head\"><span>04<\/span> VALOR<\/div>\r\n                <p>Desarrollo econ\u00f3mico regional de largo plazo.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n:root {\r\n    --font-titles: 'Nulshock', sans-serif;\r\n    --font-body: 'Inter', sans-serif;\r\n}\r\n\r\n.ocm-esg-light {\r\n    position: relative;\r\n    background: #ffffff;\r\n    min-height: 100vh;\r\n    padding: 120px 6%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n    font-family: var(--font-body);\r\n    text-align: center;\r\n}\r\n\r\n\/* Aplicaci\u00f3n de Nulshock a T\u00edtulos y Etiquetas *\/\r\n.ocm-pre, \r\n.ocm-main-title, \r\n.ocm-btn-pill, \r\n.ocm-m-head {\r\n    font-family: var(--font-titles) !important;\r\n}\r\n\r\n\/* Fondo Parallax Suave *\/\r\n.ocm-bg-parallax-light {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n}\r\n.ocm-bg-parallax-light img {\r\n    width: 100%;\r\n    height: 120%;\r\n    object-fit: cover;\r\n    filter: brightness(1.1) grayscale(0.8) opacity(0.15);\r\n}\r\n.ocm-overlay-light {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: radial-gradient(circle, transparent 20%, #ffffff 90%);\r\n}\r\n\r\n.ocm-centered-wrapper {\r\n    width: 100%;\r\n    max-width: 1000px;\r\n    position: relative;\r\n    z-index: 10;\r\n}\r\n\r\n\/* Tipograf\u00eda *\/\r\n.ocm-pre { \r\n    font-size: 10px; \r\n    letter-spacing: 4px; \r\n    color: #999; \r\n    font-weight: 800; \r\n    margin-bottom: 20px; \r\n}\r\n\r\n.ocm-main-title { \r\n    font-size: clamp(2.5rem, 6vw, 4.5rem); \r\n    font-weight: 900; \r\n    line-height: 1.1; \r\n    margin: 0 0 30px 0; \r\n    color: #000000;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.ocm-yellow { color: #ffd700; }\r\n\r\n.ocm-lead-desc { \r\n    font-size: 1.15rem; \r\n    color: #555; \r\n    max-width: 700px; \r\n    margin: 0 auto 60px auto; \r\n    line-height: 1.6; \r\n}\r\n\r\n\/* BOT\u00d3N PILL *\/\r\n.ocm-actions-row {\r\n    display: flex;\r\n    justify-content: center;\r\n    margin-bottom: 80px;\r\n}\r\n\r\n.ocm-btn-pill {\r\n    text-decoration: none;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    padding: 14px 40px;\r\n    border: 1px solid #888888;\r\n    border-radius: 50px;\r\n    color: #555555;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: 1px;\r\n    transition: all 0.3s ease;\r\n    background: transparent;\r\n}\r\n\r\n.ocm-btn-pill:hover {\r\n    background: #000000;\r\n    color: #ffffff;\r\n    border-color: #000000;\r\n}\r\n\r\n.ocm-arrow {\r\n    font-size: 18px;\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.ocm-btn-pill:hover .ocm-arrow {\r\n    transform: translateX(5px);\r\n}\r\n\r\n\/* M\u00c9TRICAS *\/\r\n.ocm-esg-metrics-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 30px;\r\n    border-top: 1px solid #eee;\r\n    padding-top: 50px;\r\n    text-align: left;\r\n}\r\n\r\n.ocm-m-head { \r\n    font-size: 10px; \r\n    font-weight: 900; \r\n    letter-spacing: 1px; \r\n    color: #000; \r\n    margin-bottom: 15px; \r\n    border-bottom: 2px solid #ffd700; \r\n    padding-bottom: 10px; \r\n}\r\n\r\n.ocm-m-head span { \r\n    color: #ffd700; \r\n    font-size: 1.4rem; \r\n    margin-right: 8px; \r\n    font-weight: 300; \r\n}\r\n\r\n.ocm-metric p { \r\n    font-size: 0.85rem; \r\n    color: #666; \r\n    line-height: 1.5; \r\n    margin: 0; \r\n}\r\n\r\n@media (max-width: 900px) {\r\n    .ocm-esg-metrics-grid { grid-template-columns: repeat(2, 1fr); }\r\n    .ocm-main-title { font-size: 2.2rem; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    if (typeof gsap !== \"undefined\") {\r\n        gsap.registerPlugin(ScrollTrigger);\r\n\r\n        \/\/ Parallax del Paisaje\r\n        gsap.to(\".ocm-bg-parallax-light img\", {\r\n            yPercent: 15,\r\n            ease: \"none\",\r\n            scrollTrigger: {\r\n                trigger: \".ocm-esg-light\",\r\n                scrub: true\r\n            }\r\n        });\r\n\r\n        \/\/ Aparici\u00f3n GSAP con Blur\r\n        gsap.utils.toArray(\".reveal-item\").forEach((el) => {\r\n            gsap.fromTo(el, \r\n                { opacity: 0, filter: \"blur(15px)\", y: 40 },\r\n                { \r\n                    opacity: 1, filter: \"blur(0px)\", y: 0,\r\n                    duration: 1.2,\r\n                    scrollTrigger: {\r\n                        trigger: el,\r\n                        start: \"top 90%\",\r\n                        toggleActions: \"play none none reverse\"\r\n                    }\r\n                }\r\n            );\r\n        });\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aea784b e-con-full e-flex e-con e-parent\" data-id=\"aea784b\" data-element_type=\"container\" data-e-type=\"container\" id=\"contacto\">\n\t\t\t\t<div class=\"elementor-element elementor-element-efdeb49 elementor-widget elementor-widget-html\" data-id=\"efdeb49\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"ocm-contact-split\">\r\n    <div class=\"ocm-split-wrapper\">\r\n        \r\n        <div class=\"ocm-info-col reveal-contact\">\r\n            <div class=\"ocm-pre\">CONECTEMOS<\/div>\r\n            <h2 class=\"ocm-main-title\">ESTAMOS EN <span class=\"ocm-yellow\">CONTACTO<\/span><\/h2>\r\n            <p class=\"ocm-info-text\">\r\n                Nuestra oficina central coordina las operaciones estrat\u00e9gicas bajo los m\u00e1s altos est\u00e1ndares de transparencia. Si tienes consultas sobre nuestros proyectos o reportes ESG, estamos para escucharte.\r\n            <\/p>\r\n            \r\n            <div class=\"ocm-contact-details\">\r\n                <div class=\"ocm-detail-item\">\r\n                    <span>EMAIL<\/span>\r\n                    <p><a href=\"mailto:contacto@ocm-mining.com\" class=\"ocm-mail-link\">contacto@ocm-mining.com<\/a><\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ocm-form-col reveal-contact\">\r\n            <form id=\"ocm-contact-form\" action=\"https:\/\/formspree.io\/f\/xojnyvae\" method=\"POST\" class=\"ocm-form\">\r\n                <div class=\"ocm-input-group\">\r\n                    <label>NOMBRE COMPLETO<\/label>\r\n                    <input type=\"text\" name=\"name\" placeholder=\"Ej. Juan P\u00e9rez\" required>\r\n                <\/div>\r\n                \r\n                <div class=\"ocm-input-group\">\r\n                    <label>CORREO ELECTR\u00d3NICO<\/label>\r\n                    <input type=\"email\" name=\"_replyto\" placeholder=\"email@dominio.com\" required>\r\n                <\/div>\r\n\r\n                <div class=\"ocm-input-group\">\r\n                    <label>ASUNTO<\/label>\r\n                    <select name=\"subject\">\r\n                        <option value=\"consulta\">Consulta General<\/option>\r\n                        <option value=\"esg\">Sostenibilidad \/ ESG<\/option>\r\n                        <option value=\"proveedores\">Proveedores<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n\r\n                <div class=\"ocm-input-group\">\r\n                    <label>MENSAJE<\/label>\r\n                    <textarea name=\"message\" rows=\"4\" placeholder=\"\u00bfEn qu\u00e9 podemos ayudarte?\" required><\/textarea>\r\n                <\/div>\r\n\r\n                <div class=\"ocm-form-actions\">\r\n                    <button type=\"submit\" id=\"ocm-submit-btn\" class=\"ocm-btn-pill\">\r\n                        ENVIAR MENSAJE <span class=\"ocm-arrow\">\u2192<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n                <div id=\"form-status\" class=\"ocm-form-status\"><\/div>\r\n            <\/form>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* Estilos Base e Interfaz *\/\r\n.ocm-contact-split {\r\n    background: #ffffff;\r\n    padding: 80px 6%;\r\n    font-family: 'Inter', sans-serif;\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n\r\n.ocm-split-wrapper {\r\n    width: 100%;\r\n    max-width: 1100px;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 60px;\r\n    align-items: center;\r\n}\r\n\r\n.ocm-yellow { color: #ffd700; }\r\n\r\n.ocm-pre {\r\n    font-size: 12px;\r\n    letter-spacing: 3px;\r\n    font-weight: 700;\r\n    color: #888;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.ocm-info-col .ocm-main-title {\r\n    font-size: clamp(2.2rem, 5vw, 3.8rem);\r\n    line-height: 1;\r\n    margin-bottom: 25px;\r\n    font-weight: 800;\r\n    color: #000;\r\n}\r\n\r\n.ocm-info-text {\r\n    font-size: 1.1rem;\r\n    color: #444;\r\n    line-height: 1.7;\r\n    margin-bottom: 40px;\r\n    max-width: 480px;\r\n}\r\n\r\n.ocm-detail-item span {\r\n    font-size: 11px;\r\n    letter-spacing: 2px;\r\n    font-weight: 800;\r\n    color: #aaa;\r\n    display: block;\r\n    margin-bottom: 5px;\r\n}\r\n\r\n.ocm-detail-item p {\r\n    font-size: 1.4rem;\r\n    font-weight: 600;\r\n}\r\n\r\n.ocm-mail-link {\r\n    text-decoration: none;\r\n    color: #000;\r\n    transition: color 0.3s;\r\n}\r\n\r\n.ocm-mail-link:hover {\r\n    color: #ffd700;\r\n}\r\n\r\n\/* Formulario optimizado *\/\r\n.ocm-form-col {\r\n    background: #fcfcfc;\r\n    padding: 50px;\r\n    border-radius: 12px;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.03);\r\n    border: 1px solid #eee;\r\n}\r\n\r\n.ocm-input-group { margin-bottom: 25px; }\r\n.ocm-input-group label {\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: 1px;\r\n    display: block;\r\n    margin-bottom: 10px;\r\n    color: #333;\r\n}\r\n\r\n.ocm-input-group input, \r\n.ocm-input-group select, \r\n.ocm-input-group textarea {\r\n    width: 100%;\r\n    border: none;\r\n    border-bottom: 1px solid #ddd;\r\n    background: transparent;\r\n    padding: 12px 0;\r\n    font-size: 1rem;\r\n    outline: none;\r\n    transition: all 0.3s;\r\n    border-radius: 0;\r\n}\r\n\r\n.ocm-input-group input:focus, \r\n.ocm-input-group textarea:focus {\r\n    border-bottom: 2px solid #ffd700;\r\n}\r\n\r\n.ocm-btn-pill {\r\n    width: 100%; \/* Mejor para mobile *\/\r\n    background: #000;\r\n    color: #fff;\r\n    border: none;\r\n    padding: 18px 35px;\r\n    border-radius: 50px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    transition: 0.3s;\r\n    font-size: 14px;\r\n    letter-spacing: 1px;\r\n}\r\n\r\n.ocm-btn-pill:hover { \r\n    background: #ffd700; \r\n    color: #000; \r\n    transform: translateY(-2px);\r\n}\r\n\r\n.ocm-form-status {\r\n    margin-top: 20px;\r\n    font-weight: 700;\r\n    font-size: 13px;\r\n    text-align: center;\r\n}\r\n\r\n\/* Optimizaciones Mobile *\/\r\n@media (max-width: 992px) {\r\n    .ocm-split-wrapper {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n    }\r\n    \r\n    .ocm-info-col {\r\n        text-align: center;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .ocm-info-text {\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n\r\n    .ocm-form-col {\r\n        padding: 30px 20px;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .ocm-contact-split {\r\n        padding: 60px 5%;\r\n    }\r\n    \r\n    .ocm-info-col .ocm-main-title {\r\n        font-size: 2.2rem;\r\n    }\r\n\r\n    .ocm-detail-item p {\r\n        font-size: 1.1rem; \/* Ajuste para mails largos en pantallas peque\u00f1as *\/\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    \/\/ Animaciones GSAP\r\n    if (typeof gsap !== \"undefined\") {\r\n        gsap.from(\".reveal-contact\", {\r\n            opacity: 0,\r\n            y: 40,\r\n            duration: 1.2,\r\n            stagger: 0.3,\r\n            ease: \"power3.out\",\r\n            scrollTrigger: {\r\n                trigger: \".ocm-contact-split\",\r\n                start: \"top 80%\"\r\n            }\r\n        });\r\n    }\r\n\r\n    const form = document.getElementById('ocm-contact-form');\r\n    const status = document.getElementById('form-status');\r\n    const btn = document.getElementById('ocm-submit-btn');\r\n\r\n    form.addEventListener('submit', async (e) => {\r\n        e.preventDefault();\r\n        \r\n        const data = new FormData(form);\r\n        status.innerHTML = \"ENVIANDO...\";\r\n        status.style.color = \"#888\";\r\n        btn.disabled = true;\r\n        btn.style.opacity = \"0.5\";\r\n\r\n        try {\r\n            const response = await fetch(form.action, {\r\n                method: form.method,\r\n                body: data,\r\n                headers: { 'Accept': 'application\/json' }\r\n            });\r\n\r\n            if (response.ok) {\r\n                status.innerHTML = \"\u2713 MENSAJE ENVIADO CON \u00c9XITO\";\r\n                status.style.color = \"#000\";\r\n                form.reset();\r\n            } else {\r\n                const errorData = await response.json();\r\n                status.innerHTML = \"ERROR: \" + (errorData.errors ? errorData.errors[0].message : \"Reintente luego.\");\r\n                status.style.color = \"#ff4444\";\r\n            }\r\n        } catch (error) {\r\n            status.innerHTML = \"ERROR DE CONEXI\u00d3N.\";\r\n            status.style.color = \"#ff4444\";\r\n        } finally {\r\n            btn.disabled = false;\r\n            btn.style.opacity = \"1\";\r\n        }\r\n    });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ff1293e e-con-full e-flex e-con e-parent\" data-id=\"ff1293e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5dbc433 elementor-widget elementor-widget-html\" data-id=\"5dbc433\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<footer class=\"ocm-footer\">\r\n    <div class=\"ocm-footer-wrapper\">\r\n        \r\n        <div class=\"ocm-footer-brand reveal-footer\">\r\n            <div class=\"ocm-footer-logo\">\r\n                <h2 class=\"ocm-logo-main\">  <a href=\"#\"><img decoding=\"async\" width=\"30%\" src=\"https:\/\/ocm.agenciacroma.com.ar\/wp-content\/uploads\/2026\/02\/OCMwhite.png\" alt=\"OCM Logo\"><\/a> <\/h2>\r\n            <\/div>\r\n            <p class=\"ocm-footer-text\">\r\n                Coordinamos operaciones estrat\u00e9gicas bajo los m\u00e1s altos est\u00e1ndares de transparencia y sostenibilidad en el sector minero global.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ocm-footer-nav reveal-footer\">\r\n            <div class=\"ocm-pre-title\">MEN\u00da<\/div>\r\n            <ul class=\"ocm-nav-list\">\r\n                <li><a href=\"#proyectos\" class=\"ocm-nav-link\">PROYECTOS<\/a><\/li>\r\n                <li><a href=\"#estrategia\" class=\"ocm-nav-link\">ESTRATEGIA<\/a><\/li>\r\n                <li><a href=\"#compromiso-esg\" class=\"ocm-nav-link\">COMPROMISO ESG<\/a><\/li>\r\n                <li><a href=\"#contacto\" class=\"ocm-nav-link\">CONTACTO<\/a><\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"ocm-footer-bottom\">\r\n        <p>&copy; 2026 OCM MINING S.A. \u2014 TODOS LOS DERECHOS RESERVADOS.<\/p>\r\n    <\/div>\r\n<\/footer>\r\n\r\n<style>\r\n\/* Variables y Fuentes *\/\r\n:root {\r\n    --font-titles: 'Nulshock', sans-serif;\r\n    --font-body: 'Inter', sans-serif;\r\n    --ocm-dark: #202124;\r\n    --ocm-yellow: #ffd700;\r\n}\r\n\r\n.ocm-footer {\r\n    background: var(--ocm-dark);\r\n    padding: 80px 6% 40px 6%;\r\n    font-family: var(--font-body);\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    color: #ffffff;\r\n}\r\n\r\n.ocm-footer-wrapper {\r\n    width: 100%;\r\n    max-width: 1100px;\r\n    display: grid;\r\n    grid-template-columns: 1.5fr 1fr;\r\n    gap: 60px;\r\n    align-items: start;\r\n}\r\n\r\n.ocm-yellow { color: var(--ocm-yellow); }\r\n\r\n\/* Estilo Logo y Texto *\/\r\n.ocm-logo-main {\r\n    font-family: var(--font-titles);\r\n    font-size: 1.8rem;\r\n    font-weight: 800;\r\n    margin-bottom: 20px;\r\n    color: #ffffff;\r\n    letter-spacing: -1px;\r\n}\r\n\r\n.ocm-footer-text {\r\n    font-size: 0.95rem;\r\n    color: #bdc1c6;\r\n    line-height: 1.7;\r\n    max-width: 450px;\r\n}\r\n\r\n\/* Navegaci\u00f3n *\/\r\n.ocm-pre-title {\r\n    font-family: var(--font-titles);\r\n    font-size: 11px;\r\n    letter-spacing: 2px;\r\n    color: #70757a;\r\n    margin-bottom: 25px;\r\n}\r\n\r\n.ocm-nav-list {\r\n    list-style: none; \/* Quita los puntos de la lista *\/\r\n    padding: 0;\r\n    margin: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 15px;\r\n}\r\n\r\n.ocm-nav-link {\r\n    text-decoration: none;\r\n    color: #ffffff;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    transition: 0.3s;\r\n    letter-spacing: 1px;\r\n    display: inline-block;\r\n}\r\n\r\n.ocm-nav-link:hover {\r\n    color: var(--ocm-yellow);\r\n    transform: translateX(8px);\r\n}\r\n\r\n\/* Barra inferior *\/\r\n.ocm-footer-bottom {\r\n    width: 100%;\r\n    max-width: 1100px;\r\n    margin-top: 60px;\r\n    padding-top: 30px;\r\n    border-top: 1px solid #3c4043;\r\n    text-align: center;\r\n}\r\n\r\n.ocm-footer-bottom p {\r\n    font-size: 10px;\r\n    letter-spacing: 1px;\r\n    color: #70757a;\r\n    font-weight: 700;\r\n}\r\n\r\n\/* Optimizaci\u00f3n Mobile *\/\r\n@media (max-width: 900px) {\r\n    .ocm-footer-wrapper {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n        text-align: center;\r\n    }\r\n\r\n    .ocm-footer-text {\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .ocm-nav-link:hover {\r\n        transform: none;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .ocm-footer {\r\n        padding: 60px 5% 30px 5%;\r\n    }\r\n    \r\n    .ocm-logo-main {\r\n        font-size: 1.5rem;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    \/\/ Animaciones GSAP\r\n    if (typeof gsap !== \"undefined\") {\r\n        gsap.from(\".reveal-footer\", {\r\n            opacity: 0,\r\n            y: 30,\r\n            duration: 1.2,\r\n            stagger: 0.3,\r\n            ease: \"power2.out\",\r\n            scrollTrigger: {\r\n                trigger: \".ocm-footer\",\r\n                start: \"top 90%\"\r\n            }\r\n        });\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PROYECTOS ESTRATEGIA COMPROMISO ESG CONTACTO PROYECTOS ESTRATEGIA COMPROMISO ESG CONTACTO DESARROLLO MINERO ESTRAT\u00c9GICO POTENCIAL GEOL\u00d3GICO OCM es una compa\u00f1\u00eda enfocada en el desarrollo de proyectos mineros con alto potencial geol\u00f3gico, bajo un enfoque estrat\u00e9gico, responsable y de largo plazo. CRITERIOS T\u00c9CNICOS La empresa impulsa iniciativas de exploraci\u00f3n y desarrollo mineral aplicando criterios t\u00e9cnicos s\u00f3lidos, una [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ocm.agenciacroma.com.ar\/en\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ocm.agenciacroma.com.ar\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ocm.agenciacroma.com.ar\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ocm.agenciacroma.com.ar\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ocm.agenciacroma.com.ar\/en\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":340,"href":"https:\/\/ocm.agenciacroma.com.ar\/en\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":377,"href":"https:\/\/ocm.agenciacroma.com.ar\/en\/wp-json\/wp\/v2\/pages\/9\/revisions\/377"}],"wp:attachment":[{"href":"https:\/\/ocm.agenciacroma.com.ar\/en\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}