C\u00edrculos Ajustados con SVG<\/title>\r\n <style>\r\n body {\r\n background: #fff;\r\n font-family: Arial, sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden;\r\n }\r\n\r\n .centrar-contenido {\r\n display: flex;\r\n justify-content: center;\r\n width: 100%;\r\n }\r\n\r\n .wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n padding: 80px 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 150px;\r\n z-index: 1;\r\n }\r\n\r\n .circle-wrapper {\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .circle-block {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n .circle-container {\r\n width: 170px;\r\n height: 170px;\r\n border-radius: 50%;\r\n background: #123F6E;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);\r\n z-index: 2;\r\n }\r\n\r\n .circle {\r\n width: 130px;\r\n height: 130px;\r\n border-radius: 50%;\r\n background: linear-gradient(180deg, #0E416D 0%, #128579 100%);\r\n border: 8px solid #0891B1;\r\n }\r\n\r\n .text.right {\r\n position: absolute;\r\n left: calc(50% + 50px);\r\n max-width: 420px;\r\n text-align: left;\r\n padding-left: 15px;\r\n opacity: 0;\r\n pointer-events: none;\r\n z-index: 1;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n min-height: 170px;\r\n }\r\n\r\n .text.left {\r\n position: absolute;\r\n right: calc(50% + 50px);\r\n max-width: 420px;\r\n text-align: right;\r\n padding-right: 15px;\r\n opacity: 0;\r\n pointer-events: none;\r\n z-index: 1;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n min-height: 170px;\r\n }\r\n\r\n .text h3 {\r\n margin: 0;\r\n background-color: #123F6E;\r\n color: white;\r\n padding: 8px 20px;\r\n font-weight: 700;\r\n font-size: 20px;\r\n line-height: 1.4;\r\n display: inline-block;\r\n white-space: nowrap;\r\n opacity: 0;\r\n animation: none;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .text.right h3 {\r\n transform: translateX(-160px);\r\n border-radius: 0 68px 68px 0;\r\n padding: 8px 25px 8px 20%;\r\n margin-left: -60px;\r\n }\r\n\r\n .text.left h3 {\r\n transform: translateX(160px);\r\n border-radius: 68px 0 0 68px;\r\n margin-right: -50px;\r\n text-align: start;\r\n }\r\n\r\n .text-content {\r\n margin-top: 5px;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n color: #333;\r\n background: none;\r\n padding: 0;\r\n border-radius: 0;\r\n box-shadow: none;\r\n opacity: 0;\r\n transform: translateY(-50px);\r\n animation: none;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .text.right .text-content {\r\n padding-left: 30px;\r\n text-align: left;\r\n }\r\n\r\n .text.left .text-content {\r\n padding-right: 30px;\r\n text-align: right;\r\n }\r\n\r\n .circle-block.hovered .text {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .circle-block.hovered .text.right h3 {\r\n animation: slideTitleRight 1s forwards;\r\n }\r\n\r\n .circle-block.hovered .text.right .text-content {\r\n animation: slideTextDown 1s forwards;\r\n animation-delay: 0.7s;\r\n }\r\n\r\n .circle-block.hovered .text.left h3 {\r\n animation: slideTitleLeft 1s forwards;\r\n }\r\n\r\n .circle-block.hovered .text.left .text-content {\r\n animation: slideTextDown 1s forwards;\r\n animation-delay: 0.7s;\r\n }\r\n\r\n @keyframes slideTitleRight {\r\n from { transform: translateX(-60px); opacity: 0; }\r\n to { transform: translateX(0); opacity: 1; }\r\n }\r\n\r\n @keyframes slideTitleLeft {\r\n from { transform: translateX(60px); opacity: 0; }\r\n to { transform: translateX(0); opacity: 1; }\r\n }\r\n\r\n @keyframes slideTextDown {\r\n to { transform: translateY(0); opacity: 1; }\r\n }\r\n\r\n .svg-contorno {\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%) scaleX(-1);\r\n width: 1100px;\r\n height: 2500px;\r\n pointer-events: none;\r\n z-index: 0;\r\n opacity: 1;\r\n }\r\n\r\n @media screen and (max-width: 768px) {\r\n .text { position: static !important; transform: none !important; max-width: 90%; margin-top: 20px; text-align: center !important; padding: 0 15px !important; }\r\n .text h3 { border-radius: 30px !important; transform: none !important; margin: 0 auto; }\r\n .text .text-content { padding: 0 !important; text-align: center !important; }\r\n .wrapper { padding: 60px 20px; gap: 40px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<svg class=\"svg-contorno\" viewBox=\"0 0 120 1100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" preserveAspectRatio=\"xMidYMid meet\">\r\n <path d=\"M 60 10 \r\n a 70 70 0 0 1 0 140\r\n a 70 70 0 0 0 0 140\r\n a 70 70 0 0 1 0 140\r\n a 70 70 0 0 0 0 140\r\n a 70 70 0 0 1 0 140\r\n a 70 70 0 0 0 0 140\r\n a 70 70 0 0 1 0 140\"\r\n stroke=\"#0891B1\"\r\n stroke-width=\"4\"\r\n fill=\"none\" \/>\r\n<\/svg>\r\n\r\n\r\n<div class=\"centrar-contenido\">\r\n <div class=\"wrapper\">\r\n \r\n <div class=\"circle-wrapper\">\r\n <div class=\"circle-block\" id=\"circle1\">\r\n <div class=\"circle-container\"><div class=\"circle\"><\/div><\/div>\r\n <div class=\"text right\">\r\n <h3>1. Diagn\u00f3stico del entorno<\/h3>\r\n <div class=\"text-content\">\r\n <p>Observamos antes de intervenir. Evaluamos higiene, orden, distribuci\u00f3n del mobiliario y condiciones estructurales para detectar vulnerabilidades invisibles.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"circle-wrapper\">\r\n <div class=\"circle-block\" id=\"circle2\">\r\n <div class=\"circle-container\"><div class=\"circle\"><\/div><\/div>\r\n <div class=\"text left\">\r\n <h3>2. Planificaci\u00f3n estrat\u00e9gica<\/h3>\r\n <div class=\"text-content\">\r\n <p>Determinamos las especies presentes y aquellas que podr\u00edan establecerse, dentro y fuera del sitio. Establecemos zonas cr\u00edticas y rutas de acceso.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"circle-wrapper\">\r\n <div class=\"circle-block\" id=\"circle3\">\r\n <div class=\"circle-container\"><div class=\"circle\"><\/div><\/div>\r\n <div class=\"text right\">\r\n <h3>3. Recolecci\u00f3n y an\u00e1lisis de informaci\u00f3n<\/h3>\r\n <div class=\"text-content\">\r\n <p>Instalamos instrumentos de monitoreo y definimos frecuencias de lectura. Analizamos los datos, generamos estad\u00edsticas y establecemos niveles de tolerancia seg\u00fan el tipo de operaci\u00f3n.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"circle-wrapper\">\r\n <div class=\"circle-block\" id=\"circle4\">\r\n <div class=\"circle-container\"><div class=\"circle\"><\/div><\/div>\r\n <div class=\"text left\">\r\n <h3>4. Capacitar para prevenir<\/h3>\r\n <div class=\"text-content\">\r\n <p>Informamos al personal del sitio. La prevenci\u00f3n es un trabajo conjunto, y la informaci\u00f3n clara hace la diferencia.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"circle-wrapper\">\r\n <div class=\"circle-block\" id=\"circle5\">\r\n <div class=\"circle-container\"><div class=\"circle\"><\/div><\/div>\r\n <div class=\"text right\">\r\n <h3>5. Evaluaci\u00f3n de esfuerzos previos<\/h3>\r\n <div class=\"text-content\">\r\n <p>Revisamos si hubo programas anteriores y evaluamos su eficacia real.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"circle-wrapper\">\r\n <div class=\"circle-block\" id=\"circle6\">\r\n <div class=\"circle-container\"><div class=\"circle\"><\/div><\/div>\r\n <div class=\"text left\">\r\n <h3>6. Plan de acci\u00f3n personalizado<\/h3>\r\n <div class=\"text-content\">\r\n <p>Dise\u00f1amos un programa operativo que incluye:<br>\r\n - Uso racional de agentes de control (productos de baja toxicidad, aprobados y registrados)<br>\r\n - Manejo de \u00e1reas cr\u00edticas<br>\r\n - Recomendaciones de limpieza, mantenimiento y residuos<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"circle-wrapper\">\r\n <div class=\"circle-block\" id=\"circle7\">\r\n <div class=\"circle-container\"><div class=\"circle\"><\/div><\/div>\r\n <div class=\"text right\">\r\n <h3>7. Seguimiento y mejora continua<\/h3>\r\n <div class=\"text-content\">\r\n <p>Documentamos todo: desde gr\u00e1ficos poblacionales hasta reportes t\u00e9cnicos y estad\u00edsticos. Se entrega una Carpeta Operativa con respaldo legal y evidencia t\u00e9cnica.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n const circles = document.querySelectorAll('.circle-block');\r\n\r\n window.addEventListener('scroll', () => {\r\n circles.forEach(circleBlock => {\r\n const rect = circleBlock.getBoundingClientRect();\r\n const isVisible = rect.top < window.innerHeight * 0.75;\r\n\r\n if (isVisible) {\r\n circleBlock.classList.add('hovered');\r\n } else {\r\n circleBlock.classList.remove('hovered');\r\n }\r\n });\r\n });\r\n\r\n window.dispatchEvent(new Event('scroll'));\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5ea38d6 elementor-hidden-desktop e-flex e-con-boxed e-con e-parent\" data-id=\"5ea38d6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0ff2cb5 elementor-hidden-desktop elementor-widget elementor-widget-html\" data-id=\"0ff2cb5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Identificaci\u00f3n de riesgos<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n background-color: #f5f5f5;\r\n padding: 0;\r\n }\r\n\r\n .timeline {\r\n position: relative;\r\n margin-left: 20px;\r\n }\r\n\r\n .timeline-line {\r\n position: absolute;\r\n left: 0px;\r\n top: 0;\r\n width: 4px;\r\n background: #00AA9D;\r\n border-radius: 2px;\r\n height: 0;\r\n transition: height 0.8s ease;\r\n z-index: 0;\r\n }\r\n\r\n .card {\r\n max-width: 500px;\r\n margin-bottom: 56px;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 0.6s ease;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .card.show {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .etiqueta {\r\n display: flex;\r\n align-items: center;\r\n background-color: #0d3b66;\r\n color: white;\r\n font-weight: bold;\r\n font-size: 14px;\r\n padding: 8px 20px 8px 35px;\r\n border-radius: 0 25px 25px 0;\r\n width: fit-content;\r\n position: relative;\r\n }\r\n\r\n .etiqueta .circle {\r\n position: absolute;\r\n left: 0;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: linear-gradient(180deg, #0E416D 0%, #128579 100%);\r\n border: 5px solid #00AA9D;\r\n transform: translateX(-50%);\r\n z-index: 2;\r\n }\r\n\r\n .card p {\r\n margin-top: 8px;\r\n font-size: 13px;\r\n color: #333;\r\n line-height: 1.5;\r\n padding-left: 35px;\r\n }\r\n\r\n .card:last-child::after {\r\n content: \"\";\r\n position: absolute;\r\n left: -20px;\r\n bottom: -28px;\r\n height: 28px;\r\n width: 4px;\r\n background: #f5f5f5;\r\n z-index: 3;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .timeline {\r\n margin-left: 10px;\r\n }\r\n\r\n .etiqueta {\r\n padding-left: 30px;\r\n }\r\n\r\n .card p {\r\n padding-left: 30px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"timeline\" id=\"timeline\">\r\n \r\n <div class=\"timeline-line\" id=\"timeline-line\"><\/div>\r\n\r\n \r\n <div class=\"card\">\r\n <div class=\"etiqueta\"><div class=\"circle\"><\/div>1. Diagn\u00f3stico del entorno<\/div>\r\n <p>Observamos antes de intervenir. Evaluamos higiene, orden, distribuci\u00f3n del mobiliario y condiciones estructurales para detectar vulnerabilidades invisibles.<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <div class=\"etiqueta\"><div class=\"circle\"><\/div>2. Identificaci\u00f3n de riesgos<br>activos y potenciales<\/div>\r\n <p>Determinamos las especies presentes y aquellas que podr\u00edan establecerse, dentro y fuera del sitio. Establecemos zonas cr\u00edticas y rutas de acceso.<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <div class=\"etiqueta\"><div class=\"circle\"><\/div>3. Recolecci\u00f3n y an\u00e1lisis de <br>informaci\u00f3n del entorno<\/div>\r\n <p>Observamos antes de intervenir. Evaluamos higiene, orden, distribuci\u00f3n del mobiliario y condiciones estructurales para detectar vulnerabilidades invisibles.<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <div class=\"etiqueta\"><div class=\"circle\"><\/div>4. Capacitar para prevenir<\/div>\r\n <p>Informamos al personal del sitio. La prevenci\u00f3n es un trabajo conjunto, y la informaci\u00f3n clara hace la diferencia.<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <div class=\"etiqueta\"><div class=\"circle\"><\/div>5. Evaluaci\u00f3n de esfuerzos <br>previos<\/div>\r\n <p>Revisamos si hubo programas anteriores y evaluamos su eficacia real.<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <div class=\"etiqueta\"><div class=\"circle\"><\/div>6. Plan de acci\u00f3n personalizado<\/div>\r\n <p>Dise\u00f1amos un programa operativo que incluye:<br>\r\n Uso racional de agentes de control (productos de baja toxicidad, aprobados y registrados)<br>\r\n Manejo de \u00e1reas cr\u00edticas<br>\r\n Recomendaciones de limpieza, mantenimiento y residuos\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <div class=\"etiqueta\"><div class=\"circle\"><\/div>7. Seguimiento y mejora <br>continua<\/div>\r\n <p>Documentamos todo: desde gr\u00e1ficos poblacionales hasta reportes t\u00e9cnicos y estad\u00edsticos. Se entrega una Carpeta Operativa con respaldo legal y evidencia t\u00e9cnica.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const timeline = document.getElementById('timeline');\r\n const timelineLine = document.getElementById('timeline-line');\r\n const cards = document.querySelectorAll('.card');\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('show');\r\n } else {\r\n entry.target.classList.remove('show');\r\n }\r\n });\r\n\r\n updateLineHeight();\r\n }, { threshold: 0.5 });\r\n\r\n cards.forEach(card => observer.observe(card));\r\n\r\nfunction updateLineHeight() {\r\n const visibleCards = Array.from(cards).filter(card =>\r\n card.classList.contains('show')\r\n );\r\n\r\n if (visibleCards.length > 0) {\r\n const firstCardTop = cards[0].offsetTop;\r\n const lastVisibleCard = visibleCards[visibleCards.length - 1];\r\n\r\n \/\/ Encontrar la posici\u00f3n del c\u00edrculo dentro de la \u00faltima tarjeta visible\r\n const etiqueta = lastVisibleCard.querySelector('.etiqueta');\r\n const circle = etiqueta.querySelector('.circle');\r\n const circleCenter = circle.offsetTop + (circle.offsetHeight \/ 2);\r\n\r\n const lastLinePoint = lastVisibleCard.offsetTop + circleCenter;\r\n\r\n const height = lastLinePoint - firstCardTop;\r\n timelineLine.style.height = height + 'px';\r\n } else {\r\n timelineLine.style.height = '0px';\r\n }\r\n}\r\n\r\n\r\n \/\/ Asegura que se calcule al cargar\r\n window.addEventListener('load', updateLineHeight);\r\n window.addEventListener('resize', updateLineHeight);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3406055 e-con-full e-flex e-con e-parent\" data-id=\"3406055\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5772ea7 elementor-widget elementor-widget-html\" data-id=\"5772ea7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"aurora-container\">\r\n <section class=\"content\">\r\n <h1>Nuestro objetivo no es solo erradicar una infestaci\u00f3n. <br>\r\n Es dise\u00f1ar un sistema que evite su regreso y<br>\r\n fortalezca la operaci\u00f3n de nuestros clientes.<\/h1>\r\n <button class=\"button\" id=\"open-popup\">SOLICITA TU DIAGN\u00d3STICO<\/button>\r\n <\/section>\r\n\r\n <section class=\"up\"><\/section>\r\n <section class=\"down\"><\/section>\r\n <section class=\"left\"><\/section>\r\n <section class=\"right\"><\/section>\r\n<\/div>\r\n\r\n<style>\r\nbody {\r\n margin:0; \r\n}\r\n\r\n.button {\r\n font-size:20px; \r\n font-family: Avant-Garde-Gothic-Bold, sans-serif;\r\n background: #46fef1;\r\n padding:15px 25px;\r\n border-radius: 10px;\r\n border: none;\r\n margin-top: 30px; \r\n cursor: pointer;\r\n max-width: 90%; \/* evita que se desborde *\/\r\n word-wrap: break-word;\r\n}\r\n\r\n.aurora-container {\r\n position: relative;\r\n width: 100%; \r\n height: 700px; \r\n overflow: hidden;\r\n margin: 0;\r\n display: flex; \r\n align-items: center; \r\n justify-content: center; \r\n flex-direction: column; \r\n background-image: \r\n url('https:\/\/materialyequipo.com\/mipsa\/wp-content\/uploads\/2025\/09\/patrones-2.png'),\r\n linear-gradient(80deg, rgb(25, 93, 114), rgb(41, 179, 158));\r\n background-size: cover;\r\n background-position: center;\r\n background-blend-mode: overlay; \r\n padding: 0 20px;\r\n box-sizing: border-box;\r\n}\r\n\r\n.content {\r\n text-align: center;\r\n color: white;\r\n font-size: 22px;\r\n font-family: Avant-Garde-Gothic-Bold, sans-serif;\r\n z-index: 2; \r\n padding: 20px; \r\n}\r\n\r\n.aurora-container .up,\r\n.aurora-container .down,\r\n.aurora-container .left,\r\n.aurora-container .right {\r\n position: absolute;\r\n z-index: 1;\r\n}\r\n\r\n.aurora-container .down {\r\n top: -400px;\r\n right: -400px;\r\n height: 400px;\r\n width: 400px;\r\n border-radius: 25%;\r\n background-image: linear-gradient(80deg, rgb(218, 209, 209), rgb(34, 201, 137));\r\n filter: blur(80px);\r\n animation: elemento1 35s infinite;\r\n}\r\n@keyframes elemento1 {\r\n 0%, 100% { top: -400px; right: -400px; }\r\n 70% { top: -100px; right: 800px; }\r\n}\r\n\r\n.aurora-container .up {\r\n top: -400px;\r\n left: -400px;\r\n height: 1000px;\r\n width: 1000px;\r\n border-radius: 25%;\r\n background-image: linear-gradient(80deg, rgb(17, 3, 3), rgb(12, 53, 66));\r\n filter: blur(80px);\r\n animation: diagonal 30s infinite;\r\n}\r\n@keyframes diagonal {\r\n 0%, 100% { top: -400px; left: -400px; }\r\n 70% { top: 600px; left: 800px; }\r\n}\r\n\r\n.aurora-container .left {\r\n top: 500px;\r\n left: -600px;\r\n height: 300px;\r\n width: 800px;\r\n border-radius: 25%;\r\n background-image: linear-gradient(80deg, rgb(218, 209, 209), rgb(34, 201, 137));\r\n filter: blur(80px);\r\n animation: elemento2 40s infinite;\r\n}\r\n@keyframes elemento2 {\r\n 0%, 100% { top: 500px; left: -600px; }\r\n 70% { top: 500px; left: 800px; }\r\n}\r\n\r\n.aurora-container .right {\r\n top: 50px;\r\n left: 100px;\r\n height: 300px;\r\n width: 800px;\r\n border-radius: 25%;\r\n background-image: linear-gradient(80deg, rgb(51, 151, 118), rgb(34, 201, 137));\r\n filter: blur(80px);\r\n animation: elemento3 40s infinite;\r\n}\r\n@keyframes elemento3 {\r\n 0%, 100% { top: 100px; left: -300px; }\r\n 70% { top: 500px; left: 800px; }\r\n}\r\n\r\n\/* \ud83d\udd39 RESPONSIVO *\/\r\n@media (max-width: 1024px) {\r\n .aurora-container { height: 600px; padding: 0 20px; }\r\n .content { font-size: 20px; }\r\n .content h1 { font-size: 26px; line-height: 1.3; }\r\n .button { font-size: 16px; padding: 10px 18px; }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .aurora-container { height: 550px; padding: 0 15px; }\r\n .content { font-size: 18px; }\r\n .content h1 { font-size: 22px; line-height: 1.3; }\r\n .button { font-size: 14px; padding: 8px 15px; }\r\n}\r\n\r\n.button:hover {\r\n background-color: #00847A;\r\n color: #fff;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .aurora-container { height: 500px; padding: 0 10px; }\r\n .content { font-size: 16px; }\r\n .content h1 { font-size: 18px; line-height: 1.3; }\r\n .button { \r\n font-size: 12px; \r\n padding: 6px 12px; \r\n width: 100%; \r\n max-width: 280px; \r\n }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.getElementById('open-popup').addEventListener('click', function() {\r\n const tempLink = document.createElement('a');\r\n tempLink.href = '#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjI1NTkiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D';\r\n document.body.appendChild(tempLink);\r\n tempLink.click();\r\n tempLink.remove();\r\n});\r\n<\/script>\r\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>Nuestro Proceso de Servicio: Manejo Integrado de Riesgos Sanitarios \u00a0Dise\u00f1amos sistemas de control ambiental personalizados, basados en datos, evidencia y colaboraci\u00f3n con nuestros clientes. As\u00ed funciona nuestro proceso:\u00a0\u00a0 Nuestro Proceso de Servicio: Manejo Integrado de Riesgos Sanitarios Dise\u00f1amos sistemas de control ambiental personalizados, basados en datos, evidencia y colaboraci\u00f3n con nuestros clientes. As\u00ed funciona nuestro […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-38","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mipsafumigaciones.com\/index.php\/wp-json\/wp\/v2\/pages\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mipsafumigaciones.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mipsafumigaciones.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mipsafumigaciones.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mipsafumigaciones.com\/index.php\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":6,"href":"https:\/\/mipsafumigaciones.com\/index.php\/wp-json\/wp\/v2\/pages\/38\/revisions"}],"predecessor-version":[{"id":2589,"href":"https:\/\/mipsafumigaciones.com\/index.php\/wp-json\/wp\/v2\/pages\/38\/revisions\/2589"}],"wp:attachment":[{"href":"https:\/\/mipsafumigaciones.com\/index.php\/wp-json\/wp\/v2\/media?parent=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}