{"id":8891,"date":"2025-09-19T17:16:48","date_gmt":"2025-09-19T23:16:48","guid":{"rendered":"https:\/\/urreaingenieria.com\/site\/?page_id=8891"},"modified":"2025-10-25T21:47:56","modified_gmt":"2025-10-26T03:47:56","slug":"our-history","status":"publish","type":"page","link":"https:\/\/urreaingenieria.com\/site\/our-history\/","title":{"rendered":"Nuestra Historia"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8891\" class=\"elementor elementor-8891\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a29d374 e-con-full e-flex e-con e-parent\" data-id=\"a29d374\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-108b4c0 elementor-widget elementor-widget-html\" data-id=\"108b4c0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- URREA Timeline for WordPress HTML Block -->\n<!-- Upload assets folder to wp-content\/uploads\/assets\/ -->\n\n<section class=\"timeline-section\">\n<style>\n\/* SCOPED STYLES - DO NOT CHANGE ANYTHING EXCEPT ASSET PATHS *\/\n.timeline-section *,\n.timeline-section *::before,\n.timeline-section *::after {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\n\/* Local fonts *\/\n@font-face {\n    font-family: 'Heebo';\n    src: url('..\/wp-content\/uploads\/assets\/fonts\/Heebo-Thin.ttf') format('truetype');\n    font-weight: 100;\n    font-style: normal;\n}\n@font-face {\n    font-family: 'Heebo';\n    src: url('..\/wp-content\/uploads\/assets\/fonts\/Heebo-Light.ttf') format('truetype');\n    font-weight: 300;\n    font-style: normal;\n}\n@font-face {\n    font-family: 'Heebo';\n    src: url('..\/wp-content\/uploads\/assets\/fonts\/Heebo-Regular.ttf') format('truetype');\n    font-weight: 400;\n    font-style: normal;\n}\n@font-face {\n    font-family: 'Heebo';\n    src: url('..\/wp-content\/uploads\/assets\/fonts\/Heebo-Medium.ttf') format('truetype');\n    font-weight: 500;\n    font-style: normal;\n}\n@font-face {\n    font-family: 'Heebo';\n    src: url('..\/wp-content\/uploads\/assets\/fonts\/Heebo-Bold.ttf') format('truetype');\n    font-weight: 700;\n    font-style: normal;\n}\n@font-face {\n    font-family: 'Heebo';\n    src: url('..\/wp-content\/uploads\/assets\/fonts\/Heebo-ExtraBold.ttf') format('truetype');\n    font-weight: 800;\n    font-style: normal;\n}\n@font-face {\n    font-family: 'Heebo';\n    src: url('..\/wp-content\/uploads\/assets\/fonts\/Heebo-Black.ttf') format('truetype');\n    font-weight: 900;\n    font-style: normal;\n}\n\n\/* Scope styles to section, not body *\/\n.timeline-section {\n    font-family: 'Heebo', sans-serif;\n    background: transparent;\n    position: relative;\n    color: #ffffff;\n    padding: 0;\n    overflow-x: hidden;\n    width: 100%;\n}\n\n.timeline-section .container {\n    max-width: 1200px;\n    margin: 0 auto;\n    position: relative;\n    padding: 60px 20px;\n    z-index: 2;\n}\n\n.timeline-section .header {\n    text-align: center;\n    margin-bottom: 80px;\n    position: relative;\n    opacity: 0;\n    transform: translateY(30px);\n    animation: fadeInUp 1s ease-out 0.5s forwards;\n}\n\n.timeline-section .logo {\n    margin-bottom: 30px;\n}\n\n.timeline-section .logo img {\n    max-width: 350px;\n    height: auto;\n}\n\n.timeline-section .header h1 {\n    font-size: 2.8rem;\n    font-weight: 300;\n    color: #ffffff;\n    margin-bottom: 20px;\n    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);\n    letter-spacing: 1px;\n    line-height: 1.2;\n}\n\n.timeline-section .header p {\n    font-size: 1.1rem;\n    font-weight: 300;\n    color: #e0e0e0;\n    max-width: 750px;\n    margin: 0 auto;\n    line-height: 1.6;\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);\n}\n\n.timeline-section .timeline-container {\n    position: relative;\n    width: 100%;\n    max-width: 900px;\n    margin: 0 auto;\n    height: 800px;\n    opacity: 0;\n    transform: scale(0.95);\n    animation: fadeInScale 1.2s ease-out 1s forwards;\n}\n\n.timeline-section #timelineCanvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n}\n\n.timeline-section .milestone {\n    position: absolute;\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    z-index: 10;\n    transform: translate(-50%, -50%);\n    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 255, 255, 0.1);\n    opacity: 0;\n    animation: milestoneAppear 0.6s ease-out forwards;\n}\n\n.timeline-section .milestone:nth-child(1) { animation-delay: 1.5s; }\n.timeline-section .milestone:nth-child(4) { animation-delay: 1.7s; }\n.timeline-section .milestone:nth-child(7) { animation-delay: 1.9s; }\n.timeline-section .milestone:nth-child(10) { animation-delay: 2.1s; }\n\n.timeline-section .milestone::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    height: 6px;\n    width: 59px;\n    background: inherit;\n    border-radius: 3px;\n    transform: translateY(-50%);\n    opacity: 0;\n    transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n\/* Tail to the right of the bullet *\/\n.timeline-section .tail-right::before {\n    left: 50%;\n}\n\n\/* Tail to the left of the bullet *\/\n.timeline-section .tail-left::before {\n    right: 50%;\n}\n\n.timeline-section .milestone:hover,\n.timeline-section .milestone.hover-active {\n    transform: translate(-50%, -50%) scale(1.5) !important;\n    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8), 0 0 50px rgba(255, 255, 255, 0.3) !important;\n}\n\n.timeline-section .milestone:hover::before,\n.timeline-section .milestone.hover-active::before {\n    width: 73px;\n    opacity: 1;\n    transform: translateY(-50%) scale(1.1);\n}\n\n\/* Exact colors from the poster *\/\n.timeline-section #milestone1 {\n    background-color: #84C241;\n}\n\n.timeline-section #milestone1::after {\n    border-top-color: #84C241;\n}\n\n.timeline-section #milestone2 {\n    background-color: #4993D0;\n}\n\n.timeline-section #milestone2::after {\n    border-top-color: #4993D0;\n}\n\n.timeline-section #milestone3 {\n    background-color: #F6663A;\n}\n\n.timeline-section #milestone3::after {\n    border-top-color: #F6663A;\n}\n\n.timeline-section #milestone4 {\n    background-color: #84C241;\n}\n\n.timeline-section #milestone4::after {\n    border-top-color: #84C241;\n}\n\n.timeline-section .year-label {\n    position: absolute;\n    font-weight: 100;\n    font-size: 2.95rem;\n    padding: 8px 12px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);\n    z-index: 15;\n    background: transparent;\n    backdrop-filter: none;\n    transform: translateY(-50%);\n    opacity: 0;\n    animation: fadeInSlide 0.8s ease-out forwards;\n    letter-spacing: -2px;\n    cursor: pointer;\n    transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    user-select: none;\n}\n\n.timeline-section .year-label:hover,\n.timeline-section .year-label.hover-active {\n    transform: translateY(-50%) scale(1.5) !important;\n    text-shadow: 0 6px 20px rgba(0, 0, 0, 0.9), 0 0 30px currentColor;\n    transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;\n}\n\n.timeline-section #year1 { animation-delay: 1.8s; }\n.timeline-section #year2 { animation-delay: 2.0s; }\n.timeline-section #year3 { animation-delay: 2.2s; }\n.timeline-section #year4 { animation-delay: 2.4s; }\n\n.timeline-section .milestone-content {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n    z-index: 20;\n    transform: translateY(15px) scale(0.95);\n    visibility: hidden;\n}\n\n.timeline-section .milestone-content.active {\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0) scale(1);\n    visibility: visible;\n    animation: contentAppear 0.5s ease-out;\n}\n\n.timeline-section .content-box {\n    position: absolute;\n    background: rgba(0, 0, 0, 0.15);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 12px;\n    padding: 30px;\n    color: #ffffff;\n    width: 380px;\n    backdrop-filter: blur(10px);\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n}\n\n.timeline-section .content-box h3 {\n    font-size: 1.4rem;\n    color: #ffffff;\n    margin-bottom: 16px;\n    font-weight: 500;\n    line-height: 1.3;\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);\n    letter-spacing: 0.5px;\n}\n\n.timeline-section .content-box p {\n    font-size: 0.95rem;\n    color: #e8e8e8;\n    line-height: 1.6;\n    font-weight: 300;\n    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n}\n\n.timeline-section .logo-section {\n    margin-top: 20px;\n    display: flex;\n    align-items: center;\n    gap: 18px;\n}\n\n.timeline-section .logo-section img {\n    max-height: 35px;\n    width: auto;\n    filter: grayscale(0.1);\n    transition: all 0.3s ease;\n}\n\n.timeline-section .logo-section img:hover {\n    filter: grayscale(0);\n    transform: scale(1.05);\n}\n\n.timeline-section .footer {\n    text-align: center;\n    margin-top: 50px;\n    padding: 25px;\n    color: #d0d0d0;\n    font-family: 'Heebo', sans-serif;\n    font-size: 16px;\n    font-weight: 700;\n    text-transform: lowercase;\n    letter-spacing: 3px;\n    opacity: 0;\n    transform: translateY(20px);\n    animation: fadeInUp 1s ease-out 2.5s forwards;\n}\n\n.timeline-section .decorative-element {\n    position: absolute;\n    background: radial-gradient(circle, rgba(255, 255, 255, 0.015) 0%, transparent 80%);\n    border-radius: 50%;\n    z-index: 0;\n    opacity: 0;\n    animation: fadeIn 2s ease-out 3s forwards;\n}\n\n@keyframes fadeIn {\n    to { opacity: 1; }\n}\n\n\/* Unified hotspot visual feedback *\/\n.timeline-section .milestone.hover-active + .year-label,\n.timeline-section .year-label.hover-active {\n    filter: brightness(1.2);\n}\n\n.timeline-section .milestone.hover-active,\n.timeline-section .year-label.hover-active + .milestone {\n    filter: brightness(1.1);\n}\n\n\/* Enhanced tail animation on hover *\/\n.timeline-section .milestone.hover-active::before {\n    animation: tailPulse 0.6s ease-out;\n}\n\n@keyframes tailPulse {\n    0% { width: 59px; }\n    50% { width: 85px; }\n    100% { width: 73px; }\n}\n\n.timeline-section .decorative-element-1 {\n    width: 300px;\n    height: 300px;\n    top: -100px;\n    left: -100px;\n}\n\n.timeline-section .decorative-element-2 {\n    width: 400px;\n    height: 400px;\n    bottom: -150px;\n    right: -150px;\n}\n\n\/* Professional animations *\/\n@keyframes fadeInUp {\n    from {\n        opacity: 0;\n        transform: translateY(30px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@keyframes fadeInScale {\n    from {\n        opacity: 0;\n        transform: scale(0.95);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1);\n    }\n}\n\n@keyframes milestoneAppear {\n    0% {\n        opacity: 0;\n        transform: translate(-50%, -50%) scale(0);\n    }\n    60% {\n        opacity: 1;\n        transform: translate(-50%, -50%) scale(1.2);\n    }\n    100% {\n        opacity: 1;\n        transform: translate(-50%, -50%) scale(1);\n    }\n}\n\n@keyframes fadeInSlide {\n    from {\n        opacity: 0;\n        transform: translateY(-50%) translateX(-20px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(-50%) translateX(0);\n    }\n}\n\n@keyframes contentAppear {\n    0% {\n        opacity: 0;\n        transform: translateY(20px) scale(0.95);\n    }\n    100% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n    }\n}\n\n@keyframes pulseGlow {\n    0%, 100% {\n        box-shadow: 0 0 15px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 255, 255, 0.1);\n    }\n    50% {\n        box-shadow: 0 0 25px rgba(255, 255, 255, 0.4), 0 0 50px rgba(255, 255, 255, 0.2);\n    }\n}\n\n.timeline-section .milestone.pulse {\n    animation: pulseGlow 1s ease-in-out infinite;\n}\n\n\/* Invisible hotspot areas for unified hover *\/\n.timeline-section .milestone-hotspot {\n    position: absolute;\n    background: transparent;\n    pointer-events: auto;\n    z-index: 25;\n    cursor: pointer;\n}\n\n\/* Simple logo that shows on hover *\/\n.timeline-section .year-logo {\n    position: absolute;\n    opacity: 0;\n    transform: translateY(20px) scale(0.95);\n    visibility: hidden;\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n}\n\n.timeline-section .year-logo img {\n    height: 40px;\n    width: auto;\n}\n\n\/* Two-column layout for flags *\/\n.timeline-section #logo3 {\n    flex-direction: row;\n    gap: 16px;\n}\n\n\/* Horizontal layout for logo and flag *\/\n.timeline-section #logo4 {\n    flex-direction: row;\n    gap: 10px;\n    justify-content: center;\n    align-items: center;\n}\n\n\/* Reduce Terra logo size to better balance with flag *\/\n.timeline-section #logo4 img {\n    height: 32px;\n}\n\n\/* Make flag slightly larger to balance *\/\n.timeline-section #logo4 svg {\n    width: 44px;\n    height: 26.4px;\n}\n\n\/* Show on milestone hover *\/\n.timeline-section .year-logo.hover-active {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    visibility: visible;\n    animation: contentAppear 0.5s ease-out;\n}\n\n\/* Desktop: Show tails on hover *\/\n@media (min-width: 768px) {\n    .timeline-section .milestone:hover::before,\n    .timeline-section .milestone.hover-active::before {\n        opacity: 1 !important;\n    }\n}\n\n\/* Mobile: Hide tails completely *\/\n@media (max-width: 767px) {\n    .timeline-section .milestone::before {\n        display: none !important;\n    }\n\n    .timeline-section .header h1 {\n        font-size: 2.5rem;\n    }\n\n    .timeline-section .logo img {\n        max-width: 250px;\n    }\n\n    .timeline-section .timeline-container {\n        height: 700px;\n    }\n\n    .timeline-section .year-label {\n        font-size: 1.6rem;\n    }\n\n    \/* Reduce gaps for years next to bullets since no tails *\/\n    .timeline-section #year1, .timeline-section #year3 {\n        transform: translateY(-50%) translateX(59px) !important;\n    }\n\n    .timeline-section #year2, .timeline-section #year4 {\n        transform: translateY(-50%) translateX(-20px) !important;\n    }\n\n    .timeline-section .content-box {\n        width: 300px;\n        padding: 20px;\n    }\n\n    .timeline-section .content-box h3 {\n        font-size: 1.4rem;\n    }\n\n    \/* Mobile: Black transparent background for content panels *\/\n    .timeline-section .content-box {\n        background: rgba(0, 0, 0, 0.85) !important;\n        backdrop-filter: blur(10px) !important;\n        z-index: 50 !important;\n    }\n    \n    \/* Prevent text selection on mobile interactions *\/\n    .timeline-section .milestone-hotspot,\n    .timeline-section .year-label,\n    .timeline-section .milestone {\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        -webkit-tap-highlight-color: rgba(0,0,0,0);\n    }\n}\n<\/style>\n\n<div class=\"container\">\n    <div class=\"header\">\n        <div class=\"logo\">\n            <img decoding=\"async\" src=\"..\/wp-content\/uploads\/assets\/img\/top-logo.png\" alt=\"URREA Ingenier\u00eda Logo\">\n        <\/div>\n        <h1>M\u00e1s de 30 a\u00f1os con un mismo enfoque<\/h1>\n        <p>Nuestro esfuerzo radica en solucionar las necesidades de nuestros clientes, gestionando proyectos de calidad.<\/p>\n    <\/div>\n\n    <div class=\"timeline-container\">\n        <canvas id=\"timelineCanvas\"><\/canvas>\n\n        <!-- 1994 Milestone -->\n        <div class=\"milestone-hotspot\" id=\"hotspot1\" data-milestone=\"milestone1\"><\/div>\n        <div class=\"milestone\" id=\"milestone1\" data-year=\"1994\"><\/div>\n        <div class=\"year-label\" id=\"year1\" style=\"color: #84C241;\">1994<\/div>\n        <div class=\"year-logo top-milestone\" id=\"logo1\">\n            <img decoding=\"async\" src=\"..\/wp-content\/uploads\/assets\/img\/urrea.png\" alt=\"URREA\">\n        <\/div>\n        <div class=\"milestone-content top-milestone\" id=\"content1\">\n            <div class=\"content-box\">\n                <h3>FUNDACI\u00d3N<\/h3>\n                <p>Dos generaciones de profesionales unen esfuerzos para fundar Urrea Ingenier\u00eda, S.A., con la visi\u00f3n de ofrecer un servicio integral en planificaci\u00f3n, administraci\u00f3n y ejecuci\u00f3n de construcci\u00f3n de obra civil en Guatemala.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- 2010 Milestone -->\n        <div class=\"milestone-hotspot\" id=\"hotspot2\" data-milestone=\"milestone2\"><\/div>\n        <div class=\"milestone\" id=\"milestone2\" data-year=\"2010\"><\/div>\n        <div class=\"year-label\" id=\"year2\" style=\"color: #4993D0;\">2010<\/div>\n        <div class=\"year-logo top-milestone\" id=\"logo2\">\n            <img decoding=\"async\" src=\"..\/wp-content\/uploads\/assets\/img\/solmax.png\" alt=\"SOLMAX\" style=\"filter: brightness(200%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg); height: 32px;\">\n            <img decoding=\"async\" src=\"..\/wp-content\/uploads\/assets\/img\/awd.png\" alt=\"AWD American Wick Drain\" style=\"filter: brightness(200%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg);\">\n        <\/div>\n        <div class=\"milestone-content top-milestone\" id=\"content2\">\n            <div class=\"content-box\">\n                <h3>INNOVACI\u00d3N EN GEOSINT\u00c9TICOS<\/h3>\n                <p>Se desarroll\u00f3 un modelo de negocios innovador, combinando la experiencia en la construcci\u00f3n con una especialidad en geosint\u00e9ticos. Generando una sinergia para crear nuevos procesos constructivos de obra civil.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- 2020 Milestone -->\n        <div class=\"milestone-hotspot\" id=\"hotspot3\" data-milestone=\"milestone3\"><\/div>\n        <div class=\"milestone\" id=\"milestone3\" data-year=\"2020\"><\/div>\n        <div class=\"year-label\" id=\"year3\" style=\"color: #F6663A;\">2020<\/div>\n        <div class=\"year-logo bottom-milestone\" id=\"logo3\">\n            <!-- El Salvador Flag -->\n            <svg width=\"40\" height=\"24\" viewBox=\"0 0 40 24\">\n                <rect width=\"40\" height=\"8\" fill=\"#0047AB\"\/>\n                <rect width=\"40\" height=\"8\" y=\"8\" fill=\"#FFFFFF\"\/>\n                <rect width=\"40\" height=\"8\" y=\"16\" fill=\"#0047AB\"\/>\n            <\/svg>\n            <!-- Honduras Flag -->\n            <svg width=\"40\" height=\"24\" viewBox=\"0 0 40 24\">\n                <rect width=\"40\" height=\"8\" fill=\"#0073CE\"\/>\n                <rect width=\"40\" height=\"8\" y=\"8\" fill=\"#FFFFFF\"\/>\n                <rect width=\"40\" height=\"8\" y=\"16\" fill=\"#0073CE\"\/>\n                <g fill=\"#0073CE\">\n                    <circle cx=\"12\" cy=\"12\" r=\"1\"\/>\n                    <circle cx=\"20\" cy=\"12\" r=\"1\"\/>\n                    <circle cx=\"28\" cy=\"12\" r=\"1\"\/>\n                    <circle cx=\"16\" cy=\"9\" r=\"1\"\/>\n                    <circle cx=\"24\" cy=\"9\" r=\"1\"\/>\n                <\/g>\n            <\/svg>\n        <\/div>\n        <div class=\"milestone-content bottom-milestone\" id=\"content3\">\n            <div class=\"content-box\">\n                <h3>EXPANSI\u00d3N REGIONAL<\/h3>\n                <p>Se impulsa el plan de expansi\u00f3n regional, iniciando operaciones en El Salvador y Honduras, con ambas l\u00edneas de negocio: Construcci\u00f3n de obra civil tradicional, Soluciones avanzadas con geosint\u00e9ticos.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- 2025 Milestone -->\n        <div class=\"milestone-hotspot\" id=\"hotspot4\" data-milestone=\"milestone4\"><\/div>\n        <div class=\"milestone\" id=\"milestone4\" data-year=\"2025\"><\/div>\n        <div class=\"year-label\" id=\"year4\" style=\"color: #84C241;\">2025<\/div>\n        <div class=\"year-logo bottom-milestone\" id=\"logo4\">\n            <img decoding=\"async\" src=\"..\/wp-content\/uploads\/assets\/img\/terra.png\" alt=\"TERRA Geosynthetics\">\n            <!-- USA Flag -->\n            <svg width=\"40\" height=\"24\" viewBox=\"0 0 40 24\">\n                <!-- Red stripes -->\n                <rect width=\"40\" height=\"1.846\" y=\"0\" fill=\"#B22234\"\/>\n                <rect width=\"40\" height=\"1.846\" y=\"3.692\" fill=\"#B22234\"\/>\n                <rect width=\"40\" height=\"1.846\" y=\"7.385\" fill=\"#B22234\"\/>\n                <rect width=\"40\" height=\"1.846\" y=\"11.077\" fill=\"#B22234\"\/>\n                <rect width=\"40\" height=\"1.846\" y=\"14.769\" fill=\"#B22234\"\/>\n                <rect width=\"40\" height=\"1.846\" y=\"18.462\" fill=\"#B22234\"\/>\n                <rect width=\"40\" height=\"1.846\" y=\"22.154\" fill=\"#B22234\"\/>\n                <!-- White stripes -->\n                <rect width=\"40\" height=\"1.846\" y=\"1.846\" fill=\"#FFFFFF\"\/>\n                <rect width=\"40\" height=\"1.846\" y=\"5.538\" fill=\"#FFFFFF\"\/>\n                <rect width=\"40\" height=\"1.846\" y=\"9.231\" fill=\"#FFFFFF\"\/>\n                <rect width=\"40\" height=\"1.846\" y=\"12.923\" fill=\"#FFFFFF\"\/>\n                <rect width=\"40\" height=\"1.846\" y=\"16.615\" fill=\"#FFFFFF\"\/>\n                <rect width=\"40\" height=\"1.846\" y=\"20.308\" fill=\"#FFFFFF\"\/>\n                <!-- Blue canton -->\n                <rect width=\"16\" height=\"12.923\" fill=\"#3C3B6E\"\/>\n                <!-- Stars (simplified 50 stars) -->\n                <g fill=\"#FFFFFF\">\n                    <circle cx=\"2\" cy=\"1.5\" r=\"0.5\"\/>\n                    <circle cx=\"4.5\" cy=\"1.5\" r=\"0.5\"\/>\n                    <circle cx=\"7\" cy=\"1.5\" r=\"0.5\"\/>\n                    <circle cx=\"9.5\" cy=\"1.5\" r=\"0.5\"\/>\n                    <circle cx=\"12\" cy=\"1.5\" r=\"0.5\"\/>\n                    <circle cx=\"14.5\" cy=\"1.5\" r=\"0.5\"\/>\n                    <circle cx=\"3.25\" cy=\"3\" r=\"0.5\"\/>\n                    <circle cx=\"5.75\" cy=\"3\" r=\"0.5\"\/>\n                    <circle cx=\"8.25\" cy=\"3\" r=\"0.5\"\/>\n                    <circle cx=\"10.75\" cy=\"3\" r=\"0.5\"\/>\n                    <circle cx=\"13.25\" cy=\"3\" r=\"0.5\"\/>\n                    <circle cx=\"2\" cy=\"4.5\" r=\"0.5\"\/>\n                    <circle cx=\"4.5\" cy=\"4.5\" r=\"0.5\"\/>\n                    <circle cx=\"7\" cy=\"4.5\" r=\"0.5\"\/>\n                    <circle cx=\"9.5\" cy=\"4.5\" r=\"0.5\"\/>\n                    <circle cx=\"12\" cy=\"4.5\" r=\"0.5\"\/>\n                    <circle cx=\"14.5\" cy=\"4.5\" r=\"0.5\"\/>\n                    <circle cx=\"3.25\" cy=\"6\" r=\"0.5\"\/>\n                    <circle cx=\"5.75\" cy=\"6\" r=\"0.5\"\/>\n                    <circle cx=\"8.25\" cy=\"6\" r=\"0.5\"\/>\n                    <circle cx=\"10.75\" cy=\"6\" r=\"0.5\"\/>\n                    <circle cx=\"13.25\" cy=\"6\" r=\"0.5\"\/>\n                    <circle cx=\"2\" cy=\"7.5\" r=\"0.5\"\/>\n                    <circle cx=\"4.5\" cy=\"7.5\" r=\"0.5\"\/>\n                    <circle cx=\"7\" cy=\"7.5\" r=\"0.5\"\/>\n                    <circle cx=\"9.5\" cy=\"7.5\" r=\"0.5\"\/>\n                    <circle cx=\"12\" cy=\"7.5\" r=\"0.5\"\/>\n                    <circle cx=\"14.5\" cy=\"7.5\" r=\"0.5\"\/>\n                    <circle cx=\"3.25\" cy=\"9\" r=\"0.5\"\/>\n                    <circle cx=\"5.75\" cy=\"9\" r=\"0.5\"\/>\n                    <circle cx=\"8.25\" cy=\"9\" r=\"0.5\"\/>\n                    <circle cx=\"10.75\" cy=\"9\" r=\"0.5\"\/>\n                    <circle cx=\"13.25\" cy=\"9\" r=\"0.5\"\/>\n                    <circle cx=\"2\" cy=\"10.5\" r=\"0.5\"\/>\n                    <circle cx=\"4.5\" cy=\"10.5\" r=\"0.5\"\/>\n                    <circle cx=\"7\" cy=\"10.5\" r=\"0.5\"\/>\n                    <circle cx=\"9.5\" cy=\"10.5\" r=\"0.5\"\/>\n                    <circle cx=\"12\" cy=\"10.5\" r=\"0.5\"\/>\n                    <circle cx=\"14.5\" cy=\"10.5\" r=\"0.5\"\/>\n                <\/g>\n            <\/svg>\n        <\/div>\n        <div class=\"milestone-content bottom-milestone\" id=\"content4\">\n            <div class=\"content-box\">\n                <h3>PRESENCIA INTERNACIONAL<\/h3>\n                <p>Consolidando m\u00e1s de 30 a\u00f1os de trayectoria, iniciamos operaciones en Phoenix, Arizona, fortaleciendo nuestra presencia internacional.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"footer\">\n        <p><span style=\"color: #4993D0;\">construction<\/span> | <span style=\"color: #84C241;\">geosynthetics<\/span> | <span style=\"color: #F6663A;\">innovate<\/span><\/p>\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const canvas = document.getElementById('timelineCanvas');\n    const ctx = canvas.getContext('2d');\n    const container = document.querySelector('.timeline-container');\n\n    \/\/ Dynamic visual element positioning system\n    function positionVisualElement(milestone, yearLabel, visualElement) {\n        if (!visualElement || !yearLabel) return;\n\n        \/\/ Wait for DOM to be fully rendered to get accurate measurements\n        requestAnimationFrame(() => {\n            \/\/ Get actual rendered dimensions\n            const yearRect = yearLabel.getBoundingClientRect();\n            const containerRect = container.getBoundingClientRect();\n\n            \/\/ Get visual element's actual width by temporarily showing it\n            const originalDisplay = visualElement.style.opacity;\n            const originalVisibility = visualElement.style.visibility;\n            visualElement.style.opacity = '0';\n            visualElement.style.visibility = 'visible';\n\n            const elementRect = visualElement.getBoundingClientRect();\n            const elementWidth = elementRect.width;\n\n            \/\/ Restore original state\n            visualElement.style.opacity = originalDisplay;\n            visualElement.style.visibility = originalVisibility;\n\n            \/\/ Mobile detection and positioning\n            const isMobile = window.innerWidth <= 767;\n\n            if (isMobile) {\n                \/\/ Mobile: Center horizontally to page\n                const elementLeft = (container.offsetWidth \/ 2) - (elementWidth \/ 2);\n                visualElement.style.left = elementLeft + 'px';\n\n                \/\/ Mobile: Dynamic vertical positioning based on actual element height\n                const elementHeight = elementRect.height;\n                const gap = 30; \/\/ Increased gap between bullet and elements\n                const isTopMilestone = visualElement.classList.contains('top-milestone');\n\n                if (isTopMilestone) {\n                    \/\/ Top milestones: logos above bullet\n                    \/\/ Position so bottom of logo is 'gap' pixels above bullet center\n                    visualElement.style.top = (milestone.point.y - elementHeight - gap) + 'px';\n                } else {\n                    \/\/ Bottom milestones: logos below bullet\n                    \/\/ Position so top of logo is 'gap' pixels below bullet center\n                    visualElement.style.top = (milestone.point.y + gap) + 'px';\n                }\n            } else {\n                \/\/ Desktop: Original positioning logic\n                const yearLeft = yearLabel.offsetLeft;\n                const yearWidth = yearRect.width;\n                const yearCenterX = yearLeft + (yearWidth \/ 2);\n\n                \/\/ Center element horizontally relative to year\n                const elementLeft = yearCenterX - (elementWidth \/ 2);\n                visualElement.style.left = elementLeft + 'px';\n\n                \/\/ Position vertically below year\n                const yearVisualBottom = milestone.point.y + (yearRect.height \/ 4);\n                visualElement.style.top = (yearVisualBottom + 20) + 'px';\n            }\n        });\n    }\n\n    \/\/ Set canvas dimensions\n    function setCanvasDimensions() {\n        canvas.width = container.offsetWidth;\n        canvas.height = container.offsetHeight;\n    }\n\n    \/\/ Calculate distance between two points\n    function distance(p1, p2) {\n        return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));\n    }\n\n    \/\/ Get point on quadratic Bezier curve\n    function getQuadraticBezierPoint(p0, p1, p2, t) {\n        const x = Math.pow(1-t, 2) * p0.x + 2 * (1-t) * t * p1.x + Math.pow(t, 2) * p2.x;\n        const y = Math.pow(1-t, 2) * p0.y + 2 * (1-t) * t * p1.y + Math.pow(t, 2) * p2.y;\n        return {x, y};\n    }\n\n    \/\/ Calculate approximate length of quadratic Bezier curve\n    function getQuadraticBezierLength(p0, p1, p2) {\n        let length = 0;\n        let prev = p0;\n        const steps = 100;\n\n        for (let i = 1; i <= steps; i++) {\n            const t = i \/ steps;\n            const point = getQuadraticBezierPoint(p0, p1, p2, t);\n            length += distance(prev, point);\n            prev = point;\n        }\n\n        return length;\n    }\n\n    \/\/ Get point at specific arc length on quadratic Bezier curve\n    function getPointAtArcLength(p0, p1, p2, targetLength) {\n        let accumulated = 0;\n        let prev = p0;\n        const steps = 100;\n\n        for (let i = 1; i <= steps; i++) {\n            const t = i \/ steps;\n            const point = getQuadraticBezierPoint(p0, p1, p2, t);\n            const segmentLength = distance(prev, point);\n\n            if (accumulated + segmentLength >= targetLength) {\n                const ratio = (targetLength - accumulated) \/ segmentLength;\n                return {\n                    x: prev.x + ratio * (point.x - prev.x),\n                    y: prev.y + ratio * (point.y - prev.y),\n                    t: t - (1\/steps) + ratio * (1\/steps)\n                };\n            }\n\n            accumulated += segmentLength;\n            prev = point;\n        }\n\n        return p2;\n    }\n\n    \/\/ Draw the curved timeline with exact styling from poster\n    function drawTimeline() {\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n        const startX = canvas.width \/ 2;\n        const startY = 60;\n        const endY = canvas.height - 60;\n\n        ctx.beginPath();\n        ctx.moveTo(startX, startY);\n\n        const midY = (startY + endY) \/ 2;\n        const controlX1 = startX + 180;\n        const controlY1 = startY + (midY - startY) * 0.7;\n        const controlX2 = startX - 180;\n        const controlY2 = midY + (endY - midY) * 0.3;\n\n        \/\/ First curve\n        ctx.quadraticCurveTo(controlX1, controlY1, startX, midY);\n\n        \/\/ Second curve\n        ctx.quadraticCurveTo(controlX2, controlY2, startX, endY);\n\n        \/\/ Style the curve - matching poster design\n        ctx.strokeStyle = 'rgba(255, 255, 255, 0.95)';\n        ctx.lineWidth = 3;\n        ctx.lineCap = 'round';\n        ctx.lineJoin = 'round';\n        ctx.stroke();\n\n        \/\/ Add enhanced glow effect\n        ctx.shadowColor = 'rgba(255, 255, 255, 0.4)';\n        ctx.shadowBlur = 12;\n        ctx.stroke();\n\n        \/\/ Add inner glow\n        ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';\n        ctx.lineWidth = 1;\n        ctx.shadowBlur = 0;\n        ctx.stroke();\n    }\n\n    \/\/ Position milestones along the curve\n    function positionMilestones() {\n        const startX = canvas.width \/ 2;\n        const startY = 60;\n        const endY = canvas.height - 60;\n        const midY = (startY + endY) \/ 2;\n        const controlX1 = startX + 180;\n        const controlY1 = startY + (midY - startY) * 0.7;\n        const controlX2 = startX - 180;\n        const controlY2 = midY + (endY - midY) * 0.3;\n\n        const firstCurveLength = getQuadraticBezierLength(\n            {x: startX, y: startY},\n            {x: controlX1, y: controlY1},\n            {x: startX, y: midY}\n        );\n\n        const secondCurveLength = getQuadraticBezierLength(\n            {x: startX, y: midY},\n            {x: controlX2, y: controlY2},\n            {x: startX, y: endY}\n        );\n\n        const totalLength = firstCurveLength + secondCurveLength;\n        const sectionLength = totalLength \/ 3;\n\n        const milestones = [\n            {\n                id: 'milestone1',\n                contentId: 'content1',\n                yearId: 'year1',\n                point: {x: startX, y: startY}\n            },\n            {\n                id: 'milestone2',\n                contentId: 'content2',\n                yearId: 'year2',\n                point: getPointAtArcLength(\n                    {x: startX, y: startY},\n                    {x: controlX1, y: controlY1},\n                    {x: startX, y: midY},\n                    sectionLength\n                )\n            },\n            {\n                id: 'milestone3',\n                contentId: 'content3',\n                yearId: 'year3',\n                point: getPointAtArcLength(\n                    {x: startX, y: midY},\n                    {x: controlX2, y: controlY2},\n                    {x: startX, y: endY},\n                    sectionLength - (firstCurveLength - sectionLength)\n                )\n            },\n            {\n                id: 'milestone4',\n                contentId: 'content4',\n                yearId: 'year4',\n                point: {x: startX, y: endY}\n            }\n        ];\n\n        milestones.forEach((milestone, index) => {\n            const element = document.getElementById(milestone.id);\n            const content = document.getElementById(milestone.contentId);\n            const yearLabel = document.getElementById(milestone.yearId);\n            const contentBox = content.querySelector('.content-box');\n            const hotspot = document.getElementById(`hotspot${index + 1}`);\n            const logo = document.getElementById(`logo${index + 1}`);\n\n            \/\/ Position the milestone\n            element.style.left = milestone.point.x + 'px';\n            element.style.top = milestone.point.y + 'px';\n            \/\/ Reset tail orientation classes\n            element.classList.remove('tail-left', 'tail-right');\n\n            \/\/ Position the year label and content panel (opposite sides)\n            const isYearOnLeft = milestone.point.x < canvas.width \/ 2 || index === 0; \/\/ Force 1994 year to left\n\n            \/\/ Mobile detection\n            const isMobile = window.innerWidth <= 767;\n\n            if (isMobile) {\n                \/\/ Mobile: Keep year labels in their desktop positions for consistency\n                if (isYearOnLeft) {\n                    yearLabel.style.left = (milestone.point.x - 160) + 'px';\n                    element.classList.add('tail-right');\n                } else {\n                    yearLabel.style.left = (milestone.point.x + 40) + 'px';\n                    element.classList.add('tail-left');\n                }\n                yearLabel.style.top = (milestone.point.y) + 'px';\n\n                \/\/ Position visual element (logo\/flag) with mobile centering\n                if (logo) {\n                    positionVisualElement(milestone, yearLabel, logo);\n                }\n\n                \/\/ Position hotspot - reduced size for mobile to allow easier closing\n                if (isYearOnLeft) {\n                    hotspot.style.left = (milestone.point.x - 100) + 'px';\n                } else {\n                    hotspot.style.left = (milestone.point.x - 20) + 'px';\n                }\n                hotspot.style.top = (milestone.point.y - 30) + 'px';\n                hotspot.style.width = '120px'; \/\/ Reduced from 200px\n                hotspot.style.height = '60px'; \/\/ Reduced from 80px\n\n                \/\/ Mobile: Center content panels horizontally and position differentially\n                const contentWidth = 300; \/\/ From CSS .content-box width\n                const contentLeft = (container.offsetWidth \/ 2) - (contentWidth \/ 2);\n                contentBox.style.left = contentLeft + 'px';\n\n                \/\/ Mobile: Dynamic vertical positioning based on actual content height\n                const contentHeight = contentBox.getBoundingClientRect().height;\n                const gap = 30; \/\/ Increased gap between bullet and elements\n                const isTopMilestone = content.classList.contains('top-milestone');\n\n                if (isTopMilestone) {\n                    \/\/ Top milestones: content below bullet\n                    \/\/ Position so top of content is 'gap' pixels below bullet center\n                    contentBox.style.top = (milestone.point.y + gap) + 'px';\n                } else {\n                    \/\/ Bottom milestones: content above bullet\n                    \/\/ Position so bottom of content is 'gap' pixels above bullet center\n                    contentBox.style.top = (milestone.point.y - contentHeight - gap) + 'px';\n                }\n            } else {\n                \/\/ Desktop: Original positioning logic\n                if (isYearOnLeft) {\n                    \/\/ Year on the left of bullet\n                    yearLabel.style.left = (milestone.point.x - 160) + 'px';\n                    yearLabel.style.top = (milestone.point.y) + 'px';\n                    \/\/ Tail points right towards description\n                    element.classList.add('tail-right');\n\n                    \/\/ Position visual element (logo\/flag) dynamically below year\n                    if (logo) {\n                        positionVisualElement(milestone, yearLabel, logo);\n                    }\n\n                    \/\/ Position hotspot to cover ONLY year + bullet (NOT logo area)\n                    hotspot.style.left = (milestone.point.x - 180) + 'px';\n                    hotspot.style.top = (milestone.point.y - 40) + 'px';\n                    hotspot.style.width = '200px';\n                    hotspot.style.height = '80px'; \/\/ Fixed size - logo is outside hotspot\n\n                    \/\/ Panel on RIGHT side with more clearance to avoid tail overlaps\n                    contentBox.style.left = (milestone.point.x + 120) + 'px'; \/\/ +30px more clearance\n                    contentBox.style.top = (milestone.point.y - 80) + 'px'; \/\/ -20px higher to avoid lower tails\n                } else {\n                    \/\/ Year on the right of bullet\n                    yearLabel.style.left = (milestone.point.x + 40) + 'px';\n                    yearLabel.style.top = (milestone.point.y) + 'px';\n                    \/\/ Tail points left towards description\n                    element.classList.add('tail-left');\n\n                    \/\/ Position visual element (logo\/flag) dynamically below year\n                    if (logo) {\n                        positionVisualElement(milestone, yearLabel, logo);\n                    }\n\n                    \/\/ Position hotspot to cover ONLY bullet + year (NOT logo area)\n                    hotspot.style.left = (milestone.point.x - 20) + 'px';\n                    hotspot.style.top = (milestone.point.y - 40) + 'px';\n                    hotspot.style.width = '200px';\n                    hotspot.style.height = '80px'; \/\/ Fixed size - logo is outside hotspot\n\n                    \/\/ Panel on LEFT side - adjust positioning for different milestones\n                    let topOffset = -80; \/\/ Default offset\n                    if (index === 1) { \/\/ 2010 milestone\n                        topOffset = -140; \/\/ Higher to avoid overlaps\n                    } else if (index === 3) { \/\/ 2025 milestone\n                        topOffset = -100; \/\/ Optimal position for shorter content panel\n                    }\n                    contentBox.style.left = (milestone.point.x - 500) + 'px'; \/\/ -30px more clearance\n                    contentBox.style.top = (milestone.point.y + topOffset) + 'px';\n                }\n            }\n        });\n    }\n\n    \/\/ Initialize canvas\n    setCanvasDimensions();\n    drawTimeline();\n    positionMilestones();\n\n    \/\/ Position all visual elements after milestones are set up\n    setTimeout(() => {\n        \/\/ Re-access milestones array (it's defined in positionMilestones scope)\n        const milestonesData = [\n            { id: 'milestone1', yearId: 'year1' },\n            { id: 'milestone2', yearId: 'year2' },\n            { id: 'milestone3', yearId: 'year3' },\n            { id: 'milestone4', yearId: 'year4' }\n        ];\n\n        milestonesData.forEach((milestone, index) => {\n            const yearLabel = document.getElementById(milestone.yearId);\n            const logo = document.getElementById(`logo${index + 1}`);\n            const milestoneElement = document.getElementById(milestone.id);\n\n            if (logo && yearLabel && milestoneElement) {\n                \/\/ Create milestone object with point data\n                const milestoneWithPoint = {\n                    point: {\n                        x: parseInt(milestoneElement.style.left),\n                        y: parseInt(milestoneElement.style.top)\n                    }\n                };\n                positionVisualElement(milestoneWithPoint, yearLabel, logo);\n            }\n        });\n    }, 100); \/\/ Small delay to ensure DOM is ready\n\n    \/\/ Global state management for mobile interactions\n    let activeMilestoneId = null;\n\n    \/\/ Enhanced mobile and desktop interaction system\n    document.querySelectorAll('.milestone-hotspot').forEach((hotspot) => {\n        const milestoneId = hotspot.dataset.milestone;\n        const yearId = milestoneId.replace('milestone', 'year');\n        const contentId = milestoneId.replace('milestone', 'content');\n        const logoId = milestoneId.replace('milestone', 'logo');\n\n        \/\/ Shared function to show content\n        const showContent = function() {\n            \/\/ Close all other content\n            document.querySelectorAll('.milestone-content').forEach(content => {\n                content.classList.remove('active');\n            });\n            document.querySelectorAll('.milestone').forEach(m => {\n                m.classList.remove('hover-active');\n            });\n            document.querySelectorAll('.year-label').forEach(y => {\n                y.classList.remove('hover-active');\n            });\n            document.querySelectorAll('.year-logo').forEach(l => {\n                l.classList.remove('hover-active');\n            });\n\n            \/\/ Add hover states to this milestone's elements\n            const milestone = document.getElementById(milestoneId);\n            const yearLabel = document.getElementById(yearId);\n            const logo = document.getElementById(logoId);\n\n            if (milestone) milestone.classList.add('hover-active');\n            if (yearLabel) yearLabel.classList.add('hover-active');\n            if (logo) logo.classList.add('hover-active');\n\n            \/\/ Show content\n            const content = document.getElementById(contentId);\n            if (content) {\n                content.classList.add('active');\n            }\n        };\n\n        \/\/ Shared function to hide content\n        const hideContent = function() {\n            const milestone = document.getElementById(milestoneId);\n            const yearLabel = document.getElementById(yearId);\n            const logo = document.getElementById(logoId);\n\n            if (milestone) milestone.classList.remove('hover-active');\n            if (yearLabel) yearLabel.classList.remove('hover-active');\n            if (logo) logo.classList.remove('hover-active');\n\n            \/\/ Hide content\n            const content = document.getElementById(contentId);\n            if (content) {\n                content.classList.remove('active');\n            }\n        };\n\n        \/\/ Desktop hover events\n        hotspot.addEventListener('mouseenter', showContent);\n        hotspot.addEventListener('mouseleave', hideContent);\n\n        \/\/ Mobile touch and click events\n        const isMobile = window.innerWidth <= 767;\n\n        if (isMobile) {\n            \/\/ Tap to toggle with global state management\n            hotspot.addEventListener('click', function(e) {\n                e.preventDefault();\n                e.stopPropagation();\n                \n                if (activeMilestoneId === milestoneId) {\n                    \/\/ Clicking active milestone - hide it\n                    hideContent();\n                    activeMilestoneId = null;\n                } else {\n                    \/\/ Clicking different milestone - show it\n                    showContent();\n                    activeMilestoneId = milestoneId;\n                }\n            });\n\n            \/\/ Touch events for better mobile experience\n            hotspot.addEventListener('touchstart', function(e) {\n                e.preventDefault();\n                e.stopPropagation();\n                \n                if (activeMilestoneId === milestoneId) {\n                    \/\/ Touching active milestone - hide it\n                    hideContent();\n                    activeMilestoneId = null;\n                } else {\n                    \/\/ Touching different milestone - show it\n                    showContent();\n                    activeMilestoneId = milestoneId;\n                }\n            }, { passive: false });\n        }\n    });\n\n    \/\/ Close panels when tapping outside hotspots (mobile)\n    const isMobile = window.innerWidth <= 767;\n    if (isMobile) {\n        document.addEventListener('click', function(e) {\n            \/\/ Only close if clicking outside all hotspots and not on content panels\n            const clickedHotspot = e.target.closest('.milestone-hotspot');\n            const clickedContent = e.target.closest('.milestone-content');\n            \n            if (!clickedHotspot && !clickedContent) {\n                \/\/ Close all panels\n                document.querySelectorAll('.milestone-content').forEach(content => {\n                    content.classList.remove('active');\n                });\n                document.querySelectorAll('.milestone').forEach(m => {\n                    m.classList.remove('hover-active');\n                });\n                document.querySelectorAll('.year-label').forEach(y => {\n                    y.classList.remove('hover-active');\n                });\n                document.querySelectorAll('.year-logo').forEach(l => {\n                    l.classList.remove('hover-active');\n                });\n            }\n        });\n    }\n\n    \/\/ Handle window resize with debouncing\n    let resizeTimeout;\n    window.addEventListener('resize', function() {\n        clearTimeout(resizeTimeout);\n        resizeTimeout = setTimeout(() => {\n            setCanvasDimensions();\n            drawTimeline();\n            positionMilestones();\n\n            \/\/ Reposition visual elements after resize\n            setTimeout(() => {\n                const milestonesData = [\n                    { id: 'milestone1', yearId: 'year1' },\n                    { id: 'milestone2', yearId: 'year2' },\n                    { id: 'milestone3', yearId: 'year3' },\n                    { id: 'milestone4', yearId: 'year4' }\n                ];\n\n                milestonesData.forEach((milestone, index) => {\n                    const yearLabel = document.getElementById(milestone.yearId);\n                    const logo = document.getElementById(`logo${index + 1}`);\n                    const milestoneElement = document.getElementById(milestone.id);\n\n                    if (logo && yearLabel && milestoneElement) {\n                        const milestoneWithPoint = {\n                            point: {\n                                x: parseInt(milestoneElement.style.left),\n                                y: parseInt(milestoneElement.style.top)\n                            }\n                        };\n                        positionVisualElement(milestoneWithPoint, yearLabel, logo);\n                    }\n                });\n            }, 50);\n        }, 150);\n    });\n\n    \/\/ Add performance optimization\n    window.addEventListener('load', function() {\n        \/\/ Preload animations\n        document.querySelectorAll('.milestone, .year-label').forEach(el => {\n            el.style.willChange = 'transform, opacity';\n        });\n\n        \/\/ Clean up will-change after animations\n        setTimeout(() => {\n            document.querySelectorAll('.milestone, .year-label').forEach(el => {\n                el.style.willChange = 'auto';\n            });\n        }, 3000);\n    });\n});\n<\/script>\n<\/section>\t\t\t\t<\/div>\n\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>M\u00e1s de 30 a\u00f1os con un mismo enfoque Nuestro esfuerzo radica en solucionar las necesidades de nuestros clientes, gestionando proyectos de calidad. 1994 FUNDACI\u00d3N Dos generaciones de profesionales unen esfuerzos para fundar Urrea Ingenier\u00eda, S.A., con la visi\u00f3n de ofrecer un servicio integral en planificaci\u00f3n, administraci\u00f3n y ejecuci\u00f3n de construcci\u00f3n de obra civil en Guatemala. [&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-8891","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/urreaingenieria.com\/site\/wp-json\/wp\/v2\/pages\/8891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urreaingenieria.com\/site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/urreaingenieria.com\/site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/urreaingenieria.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/urreaingenieria.com\/site\/wp-json\/wp\/v2\/comments?post=8891"}],"version-history":[{"count":34,"href":"https:\/\/urreaingenieria.com\/site\/wp-json\/wp\/v2\/pages\/8891\/revisions"}],"predecessor-version":[{"id":9632,"href":"https:\/\/urreaingenieria.com\/site\/wp-json\/wp\/v2\/pages\/8891\/revisions\/9632"}],"wp:attachment":[{"href":"https:\/\/urreaingenieria.com\/site\/wp-json\/wp\/v2\/media?parent=8891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}