Código fuente del sitio Drenax Pro

2026-02-19 23:21:07 +00:00
commit a2f9669c3a
76 changed files with 6040 additions and 0 deletions
--- a/public_html/views/arrendamiento.php
+++ b/public_html/views/arrendamiento.php
@@ -0,0 +1,36 @@
+<section class="arr-header">
+  <div class="cap-content">
+    <div class="ref-cta-container">
+      <span class="ref-cta-text ref-cta-box" style="font-size:3.5em;color:yellow;background-color:#191990">ARRENDAMIENTO</span><br>
+    </div>
+  </div>
+</section>
+<section class="ld-red">
+  <div class="floating-block-container" style="top:-135px">
+      <div class="floating-block-dual">
+        <div class="floating-block-content">
+          <p class="subtitle" style="padding:0.75em 0 0.5em">Flexibilidad operativa con respaldo profesional</p>
+          <p class="description">En DRENAX PRO ofrecemos el servicio de arrendamiento de unidades hidroneumáticas, brindando soluciones prácticas, seguras y eficientes para empresas que requieren equipos de alto rendimiento sin comprometer su liquidez.</p>
+        </div>
+        <div class="floating-block-arrow"></div>
+      </div>
+      <div class="arr-card">
+        <div class="card-header">
+          <h3 class="header-subtitle" style="font-size:2em;font-weight:600">Nuestro esquema de renta se adapta a tus necesidades operativas, ya sea por días, semanas o meses, con unidades listas para trabajar y soporte técnico incluido.</h3>
+        </div>
+      </div>
+      <div class="cat-cta-container">
+        <span class="ref-cta-text ref-cta-no-box">BENEFICIOS</span><br>
+      </div>
+      <div class="blocks-container" style="padding-bottom:3em">
+        <span class="block-rnd-box">Equipos Vactor® y remolques totalmente funcionales</span>
+        <span class="block-rnd-box">Mantenimiento preventivo incluido durante el periodo de renta</span>
+        <span class="block-rnd-box">Capacitación básica para operarios</span>
+        <span class="block-rnd-box">Ideal para proyectos temporales, emergencias o contratos específicos.</span>
+      </div>
+        <h3 class="header-title" style="font-size:2em;font-weight:700;color:yellow;">HAZ CRECER TU OPERACIÓN<br>SIN COMPRAR EQUIPO</h3>
+      <div class="cat-cta-container">
+        <span class="ref-cta-text cat-cta-box" style="background-color:#191990;padding:5px 40px">CONTÁCTANOS</span>
+      </div>
+  </div>
+</section>
--- a/public_html/views/capacitacion.php
+++ b/public_html/views/capacitacion.php
@@ -0,0 +1,38 @@
+<section class="cap-header">
+  <div class="cap-content">
+    <div class="cap-cta-container">
+      <span class="ref-cta-text ref-cta-no-box" style="font-size:2.5em">CAPACITACIÓN</span><br>
+      <span class="ref-cta-text ref-cta-no-box" style="font-size:3.5em;display:inline-block;margin-top:-0.5em">ESPECIALIZADA</span>
+    </div>
+  </div>
+</section>
+<section class="ld-red">
+  <div class="floating-block-container" style="top:-135px">
+      <div class="floating-block-dual">
+        <div class="floating-block-content">
+          <p class="subtitle">Formamos operadores expertos para un <br> rendimiento seguro y eficiente</p>
+          <p class="description">Nuestro programa de capacitación especializada está diseñado para que tu personal aproveche al máximo cada unidad, garantizando eficiencia, seguridad y prolongando la vida útil de los equipos.</p>
+        </div>
+        <div class="floating-block-arrow"></div>
+      </div>
+      <div class="cat-cta-container">
+        <span class="ref-cta-text ref-cta-no-box">¿QUÉ INCLUYE</span><br>
+        <span class="ref-cta-text ref-cta-no-box">NUESTRA CAPACITACIÓN?</span>
+      </div>
+      <div class="blocks-container" style="padding-bottom:2em">
+        <span class="block-rnd-box">Operación segura y correcta del equipo</span>
+        <span class="block-rnd-box">Mantenimiento preventivo básico</span>
+        <span class="block-rnd-box">Diagnóstico de fallas comunes</span>
+        <span class="block-rnd-box">Certificación de participación</span>
+      </div>
+      <div class="cap-card">
+        <div class="card-header">
+          <h3 class="header-title" style="font-size:2em;font-weight:700;color:yellow">INVIERTE EN CONOCIMIENTO</h3>
+          <h3 class="header-subtitle" style="font-size:2em;font-weight:700">ahorra en operación</h3>
+        </div>
+      </div>
+      <div class="cat-cta-container">
+        <span class="ref-cta-text cat-cta-box" style="background-color:#191990;padding:5px 40px">CONTÁCTANOS</span>
+      </div>
+  </div>
+</section>
--- a/public_html/views/contacto.php
+++ b/public_html/views/contacto.php
@@ -0,0 +1,101 @@
+    <section class="con-header">
+        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3622.6692367345922!2d-107.44532304898458!3d24.772527454798077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86bcd0e99c9709ab%3A0x67cabc5b60f2d83a!2sDrenax!5e0!3m2!1ses-419!2smx!4v1559760076691!5m2!1ses-419!2smx" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>    </section>
+    <section class="con-white">
+        <div class="con-doble row">
+            <div class="col-lg-5 con-doble--left">
+                <h4>UBÍCANOS</h4>
+                <div class="cont-doble--card">
+                    <div class="card-tit"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="map-marker-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-map-marker-alt fa-w-12 fa-3x"><path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" class=""></path></svg><strong>Sucursal Culiacán</strong></div>
+                    <div class="card-bot" id="cln">
+                        <div><p>Calle Diez #3482 Col. San Rafael
+                                Culiacán, Sinaloa CP 80150</p>
+                            <p>Oficina <a href="tel:6677139250">(667) 713 9250/60</a></p>  
+                            <p class="whatsapp"><span></span>WhatsApp: (667) 431 9211</p>  
+                            <p><a href="mainto:atencionaclientes@drenax.mx">atencionaclientes@drenax.mx</a></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="cont-doble--card">
+                    <div class="card-tit"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="map-marker-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-map-marker-alt fa-w-12 fa-3x"><path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" class=""></path></svg><strong>Sucursal Los Mochis</strong></div>
+                    <div class="card-bot" id="mzt">
+                        <div>
+                            <p>Blvd. Bienestar No. 973 Col. Toledo 
+                                Corro  C. P. 81290
+                                Los Mochis, Sinaloa
+                            </p>
+                            <p>Oficina <a href="tel:6681009191">(668)100 9191</a>
+                            </p> 
+                            <p class="whatsapp"><span></span>WhatsApp: (668) 162 0261</p>   
+                            <p><a href="mainto:losmochis@drenax.mx">losmochis@drenax.mx</a></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="cont-doble--card">
+                    <div class="card-tit"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="map-marker-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-map-marker-alt fa-w-12 fa-3x"><path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" class=""></path></svg><strong>Sucursal Mazatlán</strong></div>
+                    <div class="card-bot" id="mch">
+                        <div>
+                            <p>Oñate L8 Fracc. Corredor de Abastos
+                                    CP 82159 Mazatlán, Sinaloa.
+                            </p>
+                            <p>Oficina <a href="tel:6691351212">(669) 135-1212</a>
+                            </p>
+                            <p class="whatsapp"><span></span>WhatsApp: (669) 441 4500</p>    
+                            <p><a href="mainto:mazatlan@drenax.mx">mazatlan@drenax.mx</a></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-7 con-doble--right">
+                 <div class="cot-card">
+                    <div id="form-content">            
+                        <h5>¡Mándanos mensaje!</h5>
+                        <form id="form" action="views/correo.php">
+                            <label for="name">Nombre</label>
+                            <input type="text" id="name" name="name" required>
+                            <label for="tel">Teléfono</label>
+                            <input type="text" id="tel" name="tel" required>
+                            <label for="email">Correo</label>
+                            <input type="email" type="email" id="email" name="email" required> 
+                            <label for="para">Para</label>
+                            <select id="para" name="para">
+                                <option value="culiacan">Culiacán</option>
+                                <option value="mochis">Mazatlán</option>
+                                <option value="mazatlan">Los Mochis</option>
+                            </select>
+                            <label for="tipo">Tipo de servicio</label>
+                            <div class="radio-buttons">
+                                <label for="para">Residencial</label>
+                                <input type="radio" name="tipo" id="tipo" value="res">
+                                <label for="para">Empresarial</label>
+                                <input type="radio" name="tipo" id="tipo" value="emp">  
+                            </div>
+                            <label for="message">Mensaje</label>
+                            <textarea name="message" id="message" cols="30" rows="10" required></textarea>
+                            <button id="submit" type="submit" name="submit" class="btn btn-primary btn-sm">Enviar</button>
+                        </form>
+                    </div>
+                    <div class="loader hidden"></div>
+                    <div id="success" class="hidden">
+                        <h3>MENSAJE ENVIADO</h3>
+                        <p>Lo atenderemos lo antes posible</p>
+                        <button type="button" name="volver" class="btn btn-primary btn-sm btn-volver">Volver</button>
+                    </div>
+                    <div id="error" class="hidden">
+                        <h3>ERROR</h3>
+                        <p>Intente de nuevo más tarde</p>
+                        <button type="button" name="volver" class="btn btn-primary btn-sm btn-volver">Volver</button>
+                    </div>
+                </div>
+                <h5>O comunícate con nosotros vía:</h5>
+                <div class="social-icons">
+                    <a href="mailto:atencionaclientes@drenax.com.mx"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-envelope fa-w-16 fa-3x"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" class=""></path></svg></a>
+                    <a href="https://messenger.com/t/drenaxoficial" target="_blank"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-messenger" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-facebook-messenger fa-w-16 fa-3x"><path fill="currentColor" d="M256.55 8C116.52 8 8 110.34 8 248.57c0 72.3 29.71 134.78 78.07 177.94 8.35 7.51 6.63 11.86 8.05 58.23A19.92 19.92 0 0 0 122 502.31c52.91-23.3 53.59-25.14 62.56-22.7C337.85 521.8 504 423.7 504 248.57 504 110.34 396.59 8 256.55 8zm149.24 185.13l-73 115.57a37.37 37.37 0 0 1-53.91 9.93l-58.08-43.47a15 15 0 0 0-18 0l-78.37 59.44c-10.46 7.93-24.16-4.6-17.11-15.67l73-115.57a37.36 37.36 0 0 1 53.91-9.93l58.06 43.46a15 15 0 0 0 18 0l78.41-59.38c10.44-7.98 24.14 4.54 17.09 15.62z" class=""></path></svg></a>
+                    <a href="https://www.instagram.com/drenaxoficial/" target="_blank"><svg viewBox="0 0 512.00096 512.00096" xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-envelope fa-w-16 fa-3x"><path fill="currentColor" d="m373.40625 0h-234.8125c-76.421875 0-138.59375 62.171875-138.59375 138.59375v234.816406c0 76.417969 62.171875 138.589844 138.59375 138.589844h234.816406c76.417969 0 138.589844-62.171875 138.589844-138.589844v-234.816406c0-76.421875-62.171875-138.59375-138.59375-138.59375zm-117.40625 395.996094c-77.195312 0-139.996094-62.800782-139.996094-139.996094s62.800782-139.996094 139.996094-139.996094 139.996094 62.800782 139.996094 139.996094-62.800782 139.996094-139.996094 139.996094zm143.34375-246.976563c-22.8125 0-41.367188-18.554687-41.367188-41.367187s18.554688-41.371094 41.367188-41.371094 41.371094 18.558594 41.371094 41.371094-18.558594 41.367187-41.371094 41.367187zm0 0"/><path fill="currentColor" d="m256 146.019531c-60.640625 0-109.980469 49.335938-109.980469 109.980469 0 60.640625 49.339844 109.980469 109.980469 109.980469 60.644531 0 109.980469-49.339844 109.980469-109.980469 0-60.644531-49.335938-109.980469-109.980469-109.980469zm0 0"/><path d="m399.34375 96.300781c-6.257812 0-11.351562 5.09375-11.351562 11.351563 0 6.257812 5.09375 11.351562 11.351562 11.351562 6.261719 0 11.355469-5.089844 11.355469-11.351562 0-6.261719-5.09375-11.351563-11.355469-11.351563zm0 0"/></svg></a>
+                </div>
+               
+                <div class="con-sucursal">
+                    <div class="con-sucursal-ban"><p>Sucursal culiacán</p></div>
+                </div>
+            </div>
+        </div>
+    </section>
--- a/public_html/views/correo.php
+++ b/public_html/views/correo.php
@@ -0,0 +1,65 @@
+<?php
+
+use PHPMailer\PHPMailer\PHPMailer;
+require '../vendor/autoload.php';
+
+$name = $_POST['name'];
+$tel = $_POST['tel'];
+$email = $_POST['email'];
+$local = $_POST['para'];
+$service = $_POST['tipo'];
+$message = $_POST['message'];
+
+//Create a new PHPMailer instance
+$mail = new PHPMailer;
+//Tell PHPMailer to use SMTP
+$mail->isSMTP();
+//Enable SMTP debugging
+// 0 = off (for production use)
+// 1 = client messages
+// 2 = client and server messages
+$mail->SMTPDebug = 2;
+//Set the hostname of the mail server
+$mail->Host = 'smtp.gmail.com';
+// use
+// $mail->Host = gethostbyname('smtp.gmail.com');
+// if your network does not support SMTP over IPv6
+//Set the SMTP port number - 587 for authenticated TLS, a.k.a. RFC4409 SMTP submission
+$mail->Port = 587;
+//Set the encryption system to use - ssl (deprecated) or tls
+$mail->SMTPSecure = 'tls';
+//Whether to use SMTP authentication
+$mail->SMTPAuth = true;
+//Username to use for SMTP authentication - use full email address for gmail
+$mail->Username = "contacto@drenax.com.mx";
+//Password to use for SMTP authentication
+$mail->Password = "Drenax.123!";
+//Set who the message is to be sent from
+$mail->setFrom('contacto@drenax.com.mx', 'Desde WEB drenax.com.mx');
+//Set an alternative reply-to address
+//$mail->addReplyTo('replyto@example.com', 'First Last');
+//Set who the message is to be sent to
+$mail->addAddress($email, $name);
+//Set the subject line
+$mail->Subject = $service;
+//Read an HTML message body from an external file, convert referenced images to embedded,
+//convert HTML into a basic plain-text alternative body
+//$mail->msgHTML(file_get_contents('contents.html'));
+//Replace the plain text body with one created manually
+$mail->Body = $message.' '.$name.' '.$tel;
+//Attach an image file
+//$mail->addAttachment('images/phpmailer_mini.webp');
+//send the message, check for errors
+if (!$mail->send()) {
+    http_response_code(500);
+    echo "Mailer Error: " . $mail->ErrorInfo;
+} else {
+    http_response_code(200);
+    echo "Message sent!";
+    //Section 2: IMAP
+    //Uncomment these to save your message in the 'Sent Mail' folder.
+    #if (save_mail($mail)) {
+    #    echo "Message saved!";
+    #}
+}
+?>
--- a/public_html/views/cotizacion.php
+++ b/public_html/views/cotizacion.php
@@ -0,0 +1,44 @@
+    <section class="cot-main">
+        <div class="cont-bg">
+            <div class="cot-card">
+                <div id="form-content">            
+                    <h5>¡Mándanos mensaje!</h5>
+                    <form id="form" action="views/correo.php">
+                        <label for="name">Nombre</label>
+                        <input type="text" id="name" name="name" required>
+                        <label for="tel">Teléfono</label>
+                        <input type="text" id="tel" name="tel" required>
+                        <label for="email">Correo</label>
+                        <input type="email" type="email" id="email" name="email" required> 
+                        <label for="para">Para</label>
+                        <select id="para" name="para">
+                            <option value="culiacan">Culiacán</option>
+                            <option value="mochis">Mazatlán</option>
+                            <option value="mazatlan">Los Mochis</option>
+                        </select>
+                        <label for="tipo">Tipo de servicio</label>
+                        <div class="radio-buttons">
+                            <label for="para">Residencial</label>
+                            <input type="radio" name="tipo" id="tipo" value="res">
+                            <label for="para">Empresarial</label>
+                            <input type="radio" name="tipo" id="tipo" value="emp">  
+                        </div>
+                        <label for="message">Mensaje</label>
+                        <textarea name="message" id="message" cols="30" rows="10" required></textarea>
+                        <button id="submit" type="submit" name="submit" class="btn btn-primary btn-sm">Enviar</button>
+                    </form>
+                </div>
+                <div class="loader hidden"></div>
+                <div id="success" class="hidden">
+                    <h3>MENSAJE ENVIADO</h3>
+                    <p>Lo atenderemos lo antes posible</p>
+                    <button type="button" name="volver" class="btn btn-primary btn-sm btn-volver">Volver</button>
+                </div>
+                <div id="error" class="hidden">
+                    <h3>ERROR</h3>
+                    <p>Intente de nuevo más tarde</p>
+                    <button type="button" name="volver" class="btn btn-primary btn-sm btn-volver">Volver</button>
+                </div>
+            </div>   
+        </div>
+    </section>
--- a/public_html/views/drenaxpro.php
+++ b/public_html/views/drenaxpro.php
@@ -0,0 +1,184 @@
+<section class="pro-header">
+</section>
+<section class="ld-red">
+  <div class="floating-block-container">
+      <div class="cat-cta-container">
+        <span class="ref-cta-text pro-cta-box">COMPRA Y RENTA</span>
+      </div>
+      <div class="pro-floating-block">
+        <div class="pro-floating-block-content">
+          <p class="title">EQUIPOS HIDRONEUMÁTICOS VACTOR</p>
+          <p class="subtitle" style="margin-bottom:0.25em">Potencia, rendimiento y confiabilidad en cada operación. </p>
+          <p class="description">Nuestros equipos hidroneumáticos Vactor están diseñados para brindar soluciones eficientes en la limpieza y desazolve de redes de drenaje, alcantarillado y líneas subterráneas. Gracias a su tecnología de alta presión y sistema de vacío, permiten una operación segura, rápida y con el menor impacto ambiental.</p>
+        </div>
+        <div class="floating-block-arrow"></div>
+      </div>
+      <div class="cat-cta-container" style="padding-bottom:0">
+        <span class="ref-cta-text ref-cta-no-box">CARACTERÍSTICAS</span>
+      </div>
+      <section class="row center-row inicio-cards--5" style="padding: 2rem 0 3rem 0">
+        <div class="card-5 col-lg-3 col-lg-offset-1">
+          <svg xmlns="http://www.w3.org/2000/svg" height="110" fill="yellow" style="padding-bottom:1em" class="bi bi-arrows-move" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"/>
+          </svg>
+          <p class="card-5--title">TECNOLOGÍA DE ALTA SUCCIÓN Y PRESIÓN.</p>
+        </div>
+        <div class="card-5 col-lg-3">
+          <svg xmlns="http://www.w3.org/2000/svg" height="110" fill="yellow" style="padding-bottom:1em" class="bi bi-boombox" viewBox="0 0 16 16">
+            <path d="M2.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m2 0a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m7.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m1.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m-7-1a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm5.5 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
+            <path d="M11.5 13a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m0-1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3M5 10.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
+            <path d="M7 10.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0m-1 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>
+            <path d="M14 2V2h1a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h13M1 3v3h14V3zm14 4H1v7h14z"/>
+          </svg>
+          <p class="card-5--title">SISTEMAS DE CONTROL INTUITIVOS.</p>
+        </div>
+        <div class="card-5 col-lg-3">
+          <svg xmlns="http://www.w3.org/2000/svg" height="110" viewBox="0 0 16 16" fill="yellow" style="padding-bottom:1em">
+            <path d="M4.377 1.591C1.96 1.591-.002 4.34-.002 7.73c0 2.139.794 4.123 2.096 5.238a.7.7 0 0 0-.048.245v1.544c0 .326.236.588.528.588s.527-.262.527-.588V13.6a3.25 3.25 0 0 0 1.276.266q3.636.001 7.273.007v-.007a3.2 3.2 0 0 0 1.194-.245v1.126c0 .326.235.588.527.588s.528-.262.528-.588v-1.544a.7.7 0 0 0-.033-.206c1.322-1.109 2.132-3.11 2.132-5.269 0-3.39-1.96-6.138-4.379-6.138H4.377zm2.21.839H9.41c-.565.466-1.047 1.105-1.412 1.867-.365-.762-.847-1.4-1.411-1.867m-2.598.043v10.523c-1.627-.329-2.85-2.585-2.85-5.262s1.223-4.932 2.85-5.261m8.04 0c1.628.329 2.85 2.585 2.85 5.261s-1.222 4.933-2.85 5.261zm-7.21.007c1.194.26 2.203 1.58 2.619 3.426.131.586.199 1.205.199 1.829 0 .622-.067 1.239-.198 1.823-.415 1.85-1.424 3.17-2.62 3.431zm6.38 0v10.51c-1.207-.264-2.223-1.608-2.63-3.482a8.4 8.4 0 0 1-.188-1.773c0-.606.064-1.208.189-1.779.408-1.871 1.423-3.213 2.63-3.476m-3.201 8.681c.367.767.852 1.408 1.42 1.875h-2.84c.568-.467 1.053-1.108 1.42-1.875"/>
+          </svg>
+          <p class="card-5--title">TANQUES DE GRAN CAPACIDAD Y DURABILIDAD.</p>
+        </div>
+        <div class="card-5 col-lg-3">
+          <svg xmlns="http://www.w3.org/2000/svg" height="110" fill="yellow" style="padding-bottom:1em" class="bi bi-moisture" viewBox="0 0 16 16">
+            <path d="M13.5 0a.5.5 0 0 0 0 1H15v2.75h-.5a.5.5 0 0 0 0 1h.5V7.5h-1.5a.5.5 0 0 0 0 1H15v2.75h-.5a.5.5 0 0 0 0 1h.5V15h-1.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5zM7 1.5l.364-.343a.5.5 0 0 0-.728 0l-.002.002-.006.007-.022.023-.08.088a29 29 0 0 0-1.274 1.517c-.769.983-1.714 2.325-2.385 3.727C2.368 7.564 2 8.682 2 9.733 2 12.614 4.212 15 7 15s5-2.386 5-5.267c0-1.05-.368-2.169-.867-3.212-.671-1.402-1.616-2.744-2.385-3.727a29 29 0 0 0-1.354-1.605l-.022-.023-.006-.007-.002-.001zm0 0-.364-.343zm-.016.766L7 2.247l.016.019c.24.274.572.667.944 1.144.611.781 1.32 1.776 1.901 2.827H4.14c.58-1.051 1.29-2.046 1.9-2.827.373-.477.706-.87.945-1.144zM3 9.733c0-.755.244-1.612.638-2.496h6.724c.395.884.638 1.741.638 2.496C11 12.117 9.182 14 7 14s-4-1.883-4-4.267"/>
+          </svg>
+          <p class="card-5--title">EFICIENCIA EN LIMPIEZA PROFUNDA Y MANTENIMIENTO PREVENTIVO.</p>
+        </div>
+      </section>
+      <div class="cat-cta-container" style="padding-bottom:0">
+        <span class="ref-cta-text gal-cta-box">GALERÍA</span>
+      </div>
+      <div class="slider-container">
+        <div class="slider">
+          <a href="#" class="slider-item">
+            <img src="../assets/img/blue_industrial.jpg" alt="Descripción de la imagen 1" data-full="imagen1-full.jpg">
+          </a>
+          <a href="#" class="slider-item">
+            <img src="../assets/img/rf-bg.jpg" alt="Descripción de la imagen 2" data-full="imagen2-full.jpg">
+          </a>
+          <a href="#" class="slider-item">
+            <img src="../assets/img/blue_industrial.jpg" alt="Descripción de la imagen 3" data-full="imagen3-full.jpg">
+          </a>
+          </div>
+        <button class="prev-btn">◀️</button>
+        <button class="next-btn" style="right:0">▶️</button>
+      </div>
+      <div class="pro-cta-container">
+        <span class="pro-cta-text pro-cta-no-box">IDEAL PARA</span>
+      </div>
+      <div class="list-container"  style="margin-bottom:-240px;">
+        <ul class="pro-list">
+          <li>Empresas de servicios municipales</li>
+          <li>Contratistas de infraestructura</li>
+          <li>Mantenimiento industrial</li>
+          <li>Obras públicas</li>
+        </ul>
+      </div>
+  </div>
+</section>
+<div id="lightbox" class="lightbox">
+  <span class="close-btn" style="color:white;padding-bottom:50vh">&times;</span>
+  <button id="prev-lightbox-btn" class="lightbox-nav prev">◀️</button>
+  <img id="lightbox-image" src="" alt="">
+  <button id="next-lightbox-btn" class="lightbox-nav next">▶️</button>
+</div>
+<section class="ld-blue-simple" style="height:60vh;">
+  <div class="floating-block-container" style="top:-240px;">
+    <div class="cat-end-card">
+    </div>
+    <div class="end-cta-container">
+      <span class="end-cta-text ref-cta-no-box">Con Vactor, tu operación esta equipada con la mejor tecnología y respaldo profesional</span>
+    </div>
+  </div>
+</section>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const slider = document.querySelector('.slider');
+    const sliderItems = document.querySelectorAll('.slider-item');
+    const totalItems = sliderItems.length;
+    let currentIndex = 0;
+
+    // Botones del slider
+    const prevSliderBtn = document.querySelector('.prev-btn');
+    const nextSliderBtn = document.querySelector('.next-btn');
+
+    // Elementos del lightbox
+    const lightbox = document.getElementById('lightbox');
+    const lightboxImage = document.getElementById('lightbox-image');
+    const closeBtn = document.querySelector('.close-btn');
+    const prevLightboxBtn = document.getElementById('prev-lightbox-btn');
+    const nextLightboxBtn = document.getElementById('next-lightbox-btn');
+
+    // --- Funcionalidad del Slider ---
+    function updateSliderPosition() {
+      slider.style.transform = `translateX(${-currentIndex * 100}%)`;
+    }
+
+    // Asegúrate de que los botones existan antes de añadir el listener
+    if (nextSliderBtn) {
+      nextSliderBtn.addEventListener('click', () => {
+        currentIndex = (currentIndex + 1) % totalItems;
+        updateSliderPosition();
+      });
+    }
+
+    if (prevSliderBtn) {
+      prevSliderBtn.addEventListener('click', () => {
+        currentIndex = (currentIndex - 1 + totalItems) % totalItems;
+        updateSliderPosition();
+      });
+    }
+
+    // --- Funcionalidad del Lightbox ---
+    // Abrir Lightbox al hacer clic en una imagen del slider
+    sliderItems.forEach((item, index) => {
+      item.addEventListener('click', (e) => {
+        e.preventDefault();
+        currentIndex = index;
+        const fullImageSrc = item.querySelector('img').getAttribute('src');
+        lightboxImage.src = fullImageSrc; // Establece la primera imagen sin fade
+        lightbox.style.display = 'flex';
+        // Aseguramos que no haya clase fade-out al abrir
+        lightboxImage.classList.remove('fade-out');
+      });
+    });
+
+    // Cerrar Lightbox
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => {
+        lightbox.style.display = 'none';
+      });
+    }
+
+    // Navegar en Lightbox con crossfade
+    function updateLightboxImage() {
+      // 1. Añadir clase para empezar el fade-out
+      lightboxImage.classList.add('fade-out');
+
+      // 2. Esperar a que la imagen se desvanezca (o un poco menos para que no sea tan lento)
+      // El tiempo de espera debe coincidir con la duración de la transición en CSS
+      setTimeout(() => {
+        // 3. Cambiar la fuente de la imagen
+        const newImageSrc = sliderItems[currentIndex].querySelector('img').getAttribute('src');
+        lightboxImage.src = newImageSrc;
+
+        // 4. Quitar la clase para que la nueva imagen aparezca con fade-in
+        lightboxImage.classList.remove('fade-out');
+      }, 300); // 300ms es el tiempo de la transición CSS
+    }
+
+    if (nextLightboxBtn) {
+      nextLightboxBtn.addEventListener('click', () => {
+        currentIndex = (currentIndex + 1) % totalItems;
+        updateLightboxImage();
+      });
+    }
+
+    if (prevLightboxBtn) {
+      prevLightboxBtn.addEventListener('click', () => {
+        currentIndex = (currentIndex - 1 + totalItems) % totalItems;
+        updateLightboxImage();
+      });
+    }
+  });
+</script>
--- a/public_html/views/entrega.php
+++ b/public_html/views/entrega.php
@@ -0,0 +1,36 @@
+<section class="llave-header">
+  <div class="cap-content">
+    <div class="ref-cta-container">
+      <span class="ref-cta-text ref-cta-box" style="font-size:3.5em;color:yellow;background-color:#191990">LLAVE EN MANO</span><br>
+    </div>
+  </div>
+</section>
+<section class="ld-red">
+  <div class="floating-block-container" style="top:-135px">
+      <div class="floating-block-dual">
+        <div class="floating-block-content">
+          <p class="subtitle" style="padding:0.75em 0 0.5em">Tu equipo listo para operar desde el primer día</p>
+          <p class="description">En DRENAX PRO ofrecemos un servicio integral de entrega de llaves en mano, pensado para que tu unidad llegue completamente equipada, configurada y lista para trabajar sin complicaciones ni tiempos muertos.</p>
+        </div>
+        <div class="floating-block-arrow"></div>
+      </div>
+      <div class="llave-card">
+        <div class="card-header">
+          <h3 class="header-subtitle" style="font-size:2em;font-weight:600">Nuestro esquema de renta se adapta a tus necesidades operativas, ya sea por días, semanas o meses, con unidades listas para trabajar y soporte técnico incluido.</h3>
+        </div>
+      </div>
+      <div class="cat-cta-container">
+        <span class="ref-cta-text ref-cta-no-box">¿QUÉ INCLUYE<br>NUESTRO SERVICIO?</span>
+      </div>
+      <div class="blocks-container" style="padding-bottom:3em">
+        <span class="block-rnd-box">Unidad completamente operativa y equipada</span>
+        <span class="block-rnd-box">Capacitación técnica para operadores</span>
+        <span class="block-rnd-box">Asesoría en documentación y puesta en marcha</span>
+        <span class="block-rnd-box">Soporte postventa garantizado</span>
+      </div>
+        <h3 class="header-title" style="font-size:2em;font-weight:700;color:yellow;">SOLO RECIBE,<br>ENCIENDE Y TRABAJA</h3>
+      <div class="cat-cta-container">
+        <span class="ref-cta-text cat-cta-box" style="background-color:#191990;padding:5px 40px">CONTÁCTANOS</span>
+      </div>
+  </div>
+</section>
--- a/public_html/views/equiposreconstruidos.php
+++ b/public_html/views/equiposreconstruidos.php
@@ -0,0 +1,19 @@
+<section class="ehc-header">
+  <div class="ehc-content">
+    <div class="ehc-logo"></div>
+    <p class="ehc-slogan">Equipamos con tecnología, capacitamos con experiencia.</p>
+    <div class="cta-container">
+      <span class="cta-text cta-box">EQUIPOS RECONSTRUIDOS</span>
+      <span class="cta-text cta-no-box">Y USADOS</span>
+    </div>
+  </div>
+</section>
+<section class="ld-white row ws-x--bg">
+    <div class="products-grid">
+      <div style="text-align:center;padding:4rem 2rem">
+        <h3 style="color:#191990;font-weight:700">Por el momento no hay equipos disponibles</h3>
+        <p style="color:#666;font-size:1.1em">Contáctanos para consultar disponibilidad de equipos reconstruidos y usados.</p>
+        <a href="?id=cot" style="display:inline-block;margin-top:1em;background-color:#C13123;color:#fff;padding:10px 30px;border-radius:5px;text-decoration:none;font-weight:600">SOLICITAR INFORMACIÓN</a>
+      </div>
+    </div>
+</section>
--- a/public_html/views/familiadrenax.php
+++ b/public_html/views/familiadrenax.php
@@ -0,0 +1,74 @@
+    <section class="fd-header">
+        <div class="fd-header--right">
+            <div class="fd-header--img"></div>
+            <div class="fd-header--txt">
+                <h2><span>"</span>SOMOS UNA GRAN FAMILIA<span>"</span></h2>
+                <p>Nuestros colaboradores son el activo más importante de la empresa, en especial los encargados del área operativa, ya que son ellos quienes representan cada una de las áreas de Drenax.</p>
+            </div>
+        </div>
+    </section>
+    <section class="qs-white">
+        <div class="col-xs-12 fd-main row"> 
+            <div class="col-md-6 fd-main--item">
+                <div class="fdmi fdmi-1"></div>
+            </div>
+            <div class="col-md-6 fd-main--item fdmi-txt">
+                <h3>Colaboradores felices</h3>
+                <p class="fdmi-txt--p">Contar con colaboradores orgullosos de pertenecer a esta gran familia, es la mejor recompensa a nuestra labor, nuestro compromiso es con nuestros clientes, pero en igual medida también lo es con nuestros colaboradores.
+
+                        Realizar actividades que permitan el desarrollo y capacitación de nuestros colaboradores, es una actividad constante dentro y fuera de nuestra empresa, nuestro crecimiento no se puede lograr sin el crecimiento personal y profesional de cada uno de los integrantes del equipo.</p>
+            </div>
+            <div class="col-md-6 fd-main--item">
+                <div class="fdmi fdmi-2"></div>
+            </div>
+            <div class="col-md-6 fd-main--item">
+                <div class="fdmi fdmi-3"></div>
+            </div>
+            <div class="col-md-12 fd-main--item">
+                <div class="fdmi fdmi-6"></div>
+            </div>
+        </div>
+        <div class="white-section col-xs-12">
+            <h3>¡Conoce nuestras sucursales!</h3>
+            <div class="sucursales">
+                    <button type="button" class="btn btn-outline-primary"><a href="/?id=con#cln">Culiacán</a></button>
+                    <button type="button" class="btn btn-outline-primary"><a href="/?id=con#mzt">Mazatlán</a></button>
+                    <button type="button" class="btn btn-outline-primary"><a href="/?id=con#mch">Los Mochis</a></button>
+                    <div class="btn-prox-flex">
+                        <button type="button" disabled  class="btn btn-outline-primary prox">Guadalajara</button>
+                        <span class="prox-text">¡Próximamente!</span>
+                    </div>
+                    
+            </div>
+        </div>
+    </section >
+    <section class="qs-white title-voluntariado">
+        <h3>Comprometidos con nuestra comunidad</h3>
+    </section>
+    <section class="fd-bottom">
+    </section>
+    <section class="">
+        <div class="col-xs-12 fd-main row"> 
+            
+            <div class="col-md-3 fd-main--item voluntariado">
+                <div class="fdmi fdmi-7"></div>
+            </div>
+            <div class="col-md-3 fd-main--item voluntariado">
+                <div class="fdmi fdmi-8"></div>
+            </div>
+            <div class="col-md-3 fd-main--item voluntariado">
+                <div class="fdmi fdmi-9"></div>
+            </div>
+            <div class="col-md-3 fd-main--item voluntariado">
+                <div class="fdmi fdmi-10"></div>
+            </div>
+        </div>
+        
+    </section>
+    <section class="qs-white title-voluntariado">
+        <h3>DRENAX EN ACCIÓN SOCIAL</h3>
+        <p>Formando alianzas para contribuir con la sociedad y grupos vulnerables</p>
+        <div class="col-lg-6 inicio-white--video video-small video-center">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/P0JRtgqYExk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>></iframe>
+        </div>    
+    </section>
--- a/public_html/views/hidrocarros.php
+++ b/public_html/views/hidrocarros.php
@@ -0,0 +1,69 @@
+<section class="ehc-header">
+  <div class="ehc-content">
+    <div class="ehc-logo"></div>
+    <p class="ehc-slogan">Equipamos con tecnología, capacitamos con experiencia.</p>
+    <div class="cta-container">
+      <span class="cta-text cta-box">VENTA Y RENTA</span>
+      <span class="cta-text cta-no-box">DE EQUIPOS</span>
+    </div>
+  </div>
+</section>
+<section class="ld-white row ws-x--bg">
+    <div class="products-grid">
+        <div class="product-card">
+          <div class="product-image vac-con-112"></div>
+          <div class="info-block blue-bg">
+            <h3 class="product-name">VACCON 12</h3>
+            <p class="product-details">ID: V047-2025 Año: 2007 Serie: VRD-4212-LHA</p>
+          </div>
+          <div class="btn-block red-bg">
+            <a href="#" class="info-btn" data-toggle="modal" data-target="#modal-vaccon12">MÁS INFORMACIÓN</a>
+          </div>
+        </div>
+    </div>
+</section>
+
+<!-- Modal VACCON 12 -->
+<div class="modal fade equipo-modal" id="modal-vaccon12" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header equipo-modal-header">
+        <h4 class="modal-title">VACCON 12</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="equipo-gallery">
+          <div class="equipo-gallery-main">
+            <img id="vaccon12-main-img" src="assets/img/equipos/vaccon12/web/DSC08920.jpg" alt="VACCON 12">
+          </div>
+          <div class="equipo-gallery-thumbs">
+            <img class="equipo-thumb active" src="assets/img/equipos/vaccon12/web/DSC08920.jpg" alt="VACCON 12 - Vista 1" onclick="changeMainImage('vaccon12-main-img', this)">
+            <img class="equipo-thumb" src="assets/img/equipos/vaccon12/web/DSC08925.jpg" alt="VACCON 12 - Vista 2" onclick="changeMainImage('vaccon12-main-img', this)">
+            <img class="equipo-thumb" src="assets/img/equipos/vaccon12/web/DSC08938.jpg" alt="VACCON 12 - Vista 3" onclick="changeMainImage('vaccon12-main-img', this)">
+            <img class="equipo-thumb" src="assets/img/equipos/vaccon12/web/DSC08940.jpg" alt="VACCON 12 - Vista 4" onclick="changeMainImage('vaccon12-main-img', this)">
+            <img class="equipo-thumb" src="assets/img/equipos/vaccon12/web/DSC08947.jpg" alt="VACCON 12 - Vista 5" onclick="changeMainImage('vaccon12-main-img', this)">
+            <img class="equipo-thumb" src="assets/img/equipos/vaccon12/web/DSC08953.jpg" alt="VACCON 12 - Vista 6" onclick="changeMainImage('vaccon12-main-img', this)">
+            <img class="equipo-thumb" src="assets/img/equipos/vaccon12/web/DSC08957.jpg" alt="VACCON 12 - Vista 7" onclick="changeMainImage('vaccon12-main-img', this)">
+            <img class="equipo-thumb" src="assets/img/equipos/vaccon12/web/DSC08968.jpg" alt="VACCON 12 - Vista 8" onclick="changeMainImage('vaccon12-main-img', this)">
+            <img class="equipo-thumb" src="assets/img/equipos/vaccon12/web/DSC08969.jpg" alt="VACCON 12 - Vista 9" onclick="changeMainImage('vaccon12-main-img', this)">
+            <img class="equipo-thumb" src="assets/img/equipos/vaccon12/web/DSC08970.jpg" alt="VACCON 12 - Vista 10" onclick="changeMainImage('vaccon12-main-img', this)">
+            <img class="equipo-thumb" src="assets/img/equipos/vaccon12/web/DSC08980.jpg" alt="VACCON 12 - Vista 11" onclick="changeMainImage('vaccon12-main-img', this)">
+            <img class="equipo-thumb" src="assets/img/equipos/vaccon12/web/DSC08989.jpg" alt="VACCON 12 - Vista 12" onclick="changeMainImage('vaccon12-main-img', this)">
+          </div>
+        </div>
+        <div class="equipo-info">
+          <table class="equipo-specs">
+            <tr><th>ID</th><td>V047-2025</td></tr>
+            <tr><th>Año</th><td>2007</td></tr>
+            <tr><th>Serie</th><td>VRD-4212-LHA</td></tr>
+          </table>
+        </div>
+      </div>
+      <div class="modal-footer equipo-modal-footer">
+        <a href="?id=cot" class="btn equipo-btn-contact">SOLICITAR INFORMACIÓN</a>
+      </div>
+    </div>
+  </div>
+</div>
--- a/public_html/views/hidroremolques.php
+++ b/public_html/views/hidroremolques.php
@@ -0,0 +1,60 @@
+<section class="ehc-header">
+  <div class="ehc-content">
+    <div class="ehc-logo"></div>
+    <p class="ehc-slogan">Equipamos con tecnología, capacitamos con experiencia.</p>
+    <div class="cta-container">
+      <span class="cta-text cta-box">VENTA Y RENTA</span>
+      <span class="cta-text cta-no-box">DE EQUIPOS</span>
+    </div>
+  </div>
+</section>
+<section class="ld-white row ws-x--bg">
+    <div class="products-grid">
+      <div class="product-card">
+        <div class="product-image sewer-uss-jetting"></div>
+        <div class="info-block blue-bg">
+          <h3 class="product-name">Sewer USS Jetting</h3>
+          <p class="product-details">ID: VC047-2025 Horas: 389 Serie: 2115 P118</p>
+        </div>
+        <div class="btn-block red-bg">
+          <a href="#" class="info-btn" data-toggle="modal" data-target="#modal-sewer-uss">MÁS INFORMACIÓN</a>
+        </div>
+      </div>
+    </div>
+</section>
+
+<!-- Modal Sewer USS Jetting -->
+<div class="modal fade equipo-modal" id="modal-sewer-uss" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header equipo-modal-header">
+        <h4 class="modal-title">Sewer USS Jetting</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="equipo-gallery">
+          <div class="equipo-gallery-main">
+            <img id="sewer-uss-main-img" src="assets/img/sewer-uss-jetting.png" alt="Sewer USS Jetting">
+          </div>
+          <div class="equipo-gallery-thumbs">
+            <img class="equipo-thumb active" src="assets/img/sewer-uss-jetting.png" alt="Sewer USS Jetting - Vista 1" onclick="changeMainImage('sewer-uss-main-img', this)">
+            <!-- Agregar más fotos aquí -->
+            <!-- <img class="equipo-thumb" src="assets/img/sewer-uss-2.jpg" alt="Sewer USS Jetting - Vista 2" onclick="changeMainImage('sewer-uss-main-img', this)"> -->
+          </div>
+        </div>
+        <div class="equipo-info">
+          <table class="equipo-specs">
+            <tr><th>ID</th><td>VC047-2025</td></tr>
+            <tr><th>Horas</th><td>389</td></tr>
+            <tr><th>Serie</th><td>2115 P118</td></tr>
+          </table>
+        </div>
+      </div>
+      <div class="modal-footer equipo-modal-footer">
+        <a href="?id=cot" class="btn equipo-btn-contact">SOLICITAR INFORMACIÓN</a>
+      </div>
+    </div>
+  </div>
+</div>
--- a/public_html/views/inspecciondetuberias.php
+++ b/public_html/views/inspecciondetuberias.php
@@ -0,0 +1,36 @@
+<section class="it-header">
+        <div class="ld-header--txt">
+            <div class="icon-arrow-red"></div>
+            <p class="ld-header--p">INSPECCIÓN DE <br><span>TUBERÍAS</span></p>
+        </div>
+</section>
+<section class="it-red row">
+        <p>En búsqueda de brindarle a nuestros clientes una solución integral se incorporaron a nuestras divisiones de servicios la categoría de inspección de tuberías, conformada por los siguientes servicios.
+        </p>
+</section>
+<section class="it-white row ws-x--bg">
+        <div class="col-md-4">
+            <div class="it-white--img it-white--img1">
+                    <div class="it-white--fig"><p>Video inspección</p></div>
+            </div>
+            <p class="it-white--txt">Sistema de inspección para analizar tuberías de 2 a 12 pulgadas. El equipo nos permite detectar tuberías quebradas, con raíces o malas instalaciones. Nuestros clientes podrán dar solución de forma eficiente ya que sabrán con exactitud en que altura se encuentra el daño.</p>
+        </div>
+         <div class="col-md-4">
+            <div class="it-white--img it-white--img2">
+                    <div class="it-white--fig"><p>Localización de tuberías</p></div>
+            </div>
+            <p class="it-white--txt">Instrumento de precisión para la localización de redes de servicios públicos, cuenta con tecnología GPS y Bluetooth para integrarse fácilmente con dispositivos externos de captura de datos.
+                    El equipo esta enfocado a la detección de tuberías de cobre y en algunos casos es utilizado para la detección de registros.</p>
+        </div>
+         <div class="col-md-4">
+            <div class="it-white--img it-white--img3">
+                    <div class="it-white--fig"><p>Detector de fugas</p></div>
+            </div>
+            <p class="it-white--txt">En ocasiones detectamos que tenemos un incremento en el consumo de agua, y no sabemos a que se debe, ya que no observamos humedad, este equipo detectará exactamente donde se encuentra la fuga  por medio de ondas que son captadas por un micrófono que amplifica el ruido de la presión de agua.</p>
+        </div>
+        <div class="white-section col-xs-12">
+            <h3>¿Necesitas una cotización?</h3>
+            <p>¡Estamos para Servirte!</p>
+            <a href="?id=cot"><button type="button" class="btn btn-primary btn-sm">Cotizar</button></a>
+        </div>
+</section>
--- a/public_html/views/limpiezadedrenaje.php
+++ b/public_html/views/limpiezadedrenaje.php
@@ -0,0 +1,52 @@
+    <section class="ld-header">
+        <div class="ld-header--txt">
+            <div class="icon-arrow-red"></div>
+            <p class="ld-header--p">LIMPIEZA DE <br><span>DRENAJE</span></p>
+        </div>
+    </section>
+    <section class="ld-blue">
+        <div class="ld-blue--left">
+            <div class="camion-img"></div>
+        </div>
+        <p class="ld-blue--right">Actualmente Drenax cuenta con diferentes equipos especializados en la limpieza de drenajes como manuales, eléctricos y mecánicos. Nuestro objetivo es muy claro, ofrecerte un servicio de la más alta calidad, en óptimos tiempos de respuesta y con una operación estandarizada.
+                    A continuación te mostramos cuales son las características de las 3 categorías de equipos que tenemos para la realización de servicios de limpieza de drenajes.</p>
+  
+    </section>
+    <section class="ld-red row">
+        <div class="col-md-4 ld-red--item">
+            <div class="blue-icon"></div>
+            <div class="ld-red--txt">
+                <p class="ld-red--txt_title">Hidroneumático (Hidrojet)</p>
+                <p class="ld-red--txt_p">Equipo especializado en la limpieza de tubería de drenaje sanitario y pluvial de 4 a 6 pulgadas, trabaja con agua a presión por medio de un mecanismo que permite la limpieza de 360° del tubo, cuenta con 120 mts de manguera y efectúa la limpieza con una presión de 3500 psi.</p>
+            </div>
+        </div>
+        <div class="col-md-4 ld-red--item">
+            <div class="blue-icon"></div>
+            <div class="ld-red--txt">
+                <p class="ld-red--txt_title">Hidroneumático con Succión (Vactor)</p>
+                <p class="ld-red--txt_p">Limpieza de tubería de drenaje sanitario y pluvial de 6 a 36 pulgadas, trabaja con agua a presión por medio de un mecanismo que permite la limpieza de 360° del tubo, cuenta con 120 mts de manguera para realizar la limpieza de tubería, efectúa la limpieza con una presión de 3500 psi, succiona lodos pesados (plantas tratadoras, cárcamos, letrinas, etc.) y el tanque de desechos tiene una capacidad de 12,000 lts.</p>
+            </div>
+        </div>
+        <div class="col-md-4 ld-red--item">
+            <div class="blue-icon"></div>
+            <div class="ld-red--txt">
+                <p class="ld-red--txt_title">Hidroneumático con Succión (Eductor)</p>
+                <p class="ld-red--txt_p">Enfocado a tubería de drenaje sanitario y pluvial de 4 a 8 pulgadas, trabaja con agua a presión por medio de un mecanismo que permite la limpieza de 360° del tubo, cuenta con 120 mts de manguera para realizar la limpieza de tubería y con 100 mts para succionar desechos, efectúa la limpieza con una presión de 3500 psi, succiona líquidos y semilíquidos ( fosas sépticas, trampas de grasas y lodos, cisternas, cárcamos, etc.) y el tanque de desechos tiene una capacidad de 15,000 lts.</p>
+            </div>
+        </div>
+    </section>
+    <section class="ld-white row ws-x--bg ">
+        <div class="col-md-4">
+            <div class="ld-white--img ld-white--img1"></div>
+        </div>
+        <div class="col-md-4">
+            <div class="ld-white--img ld-white--img2"></div>
+        </div>
+        <div class="col-md-4">
+            <div class="ld-white--img ld-white--img3"></div>
+        </div>
+        <div class="white-section col-xs-12">
+            <h3>¿Necesitas una cotización?</h3>
+            <p>¡Estamos para Servirte!</p>
+            <a href="?id=cot"><button type="button" class="btn btn-primary btn-sm">Cotizar</button></a>        </div>
+    </section>
--- a/public_html/views/limpiezadeescaleras.php
+++ b/public_html/views/limpiezadeescaleras.php
@@ -0,0 +1,48 @@
+    <section class="le-header">
+        <div class="ld-header--txt">
+            <div class="icon-arrow-red"></div>
+            <p class="ld-header--p">LIMPIEZA DE <br><span>ESCALERAS</span></p>
+        </div>
+    </section>
+    <section class="lp-blue row">
+        <p>Realiza la limpieza de escaleras eléctricas y tapetes móviles en movimiento, con un sistema europeo de auto-dirección con cerdas equidistantes; obteniendo la eliminación de polvo, sedimento hasta las incrustaciones más resistentes, logrando mantener en buen estado tus instalaciones.</p>
+    </section>
+    <section class="lp-white row ws-x--bg">
+        <div class="col-xs-12 le-main row"> 
+            <div class="col-md-6 -main--item">
+                <div class="lemi-img lemi-1"></div>
+            </div>
+            <div class="col-md-6 le-main--item lemi-txt">
+                <div>
+                    <svg viewBox="0 0 329 329"><defs><style>.a{clip-path:url(#b);}.b{fill:none;stroke:#102056;stroke-miterlimit:10;stroke-width:17.57px;}</style><clipPath id="b"><rect width="329" height="329"/></clipPath></defs><g id="a" class="a"><path class="b" d="M1451.276,77.937h51.085v41.479h43.226v44.972h39.733v42.353h42.789v44.1h44.1v49.339H1450.839Z" transform="translate(-1397.339 -24.437)"/></g></svg>
+                </div>
+                <p class="lemi-txt--p">Realiza la limpieza de escaleras eléctricas y tapetes móviles en movimiento,</p>
+                <p class="span">con un sistema europeo de auto-dirección con cerdas equidistantes; obteniendo la eliminación de polvo, sedimento hasta las incrustaciones más resistentes, logrando mantener en buen estado tus instalaciones.</p>
+            </div>
+            <div class="col-md-3 le-main--item">
+                <div class="lemi-img lemi-2"></div>
+            </div>
+            <div class="col-md-3 le-main--item">
+                <div class="lemi-img lemi-3"></div>
+            </div>
+            <div class="col-md-3 le-main--item">
+                <div class="lemi-img lemi-4"></div>
+            </div>
+            <div class="col-md-3 le-main--item">
+                <div class="lemi-img lemi-5"></div>
+            </div>
+            <div class="col-md-6 le-main--item lemi-txt lemi-txt-right">
+                <div>
+                    <svg viewBox="0 0 329 329"><defs><style>.c{clip-path:url(#d);}.d{fill:#102056;}</style><clipPath id="d"><rect width="329" height="329"/></clipPath></defs><g id="c" class="c"><g transform="translate(-343.642 -1262)"><g transform="translate(1813 650)"><path class="d" d="M-1241.843,855.186a29.713,29.713,0,0,1-23.692-11.758,29.922,29.922,0,0,1-21.711,9.233,30.061,30.061,0,0,1-30.026-30.027,6.462,6.462,0,0,1,6.461-6.462,6.462,6.462,0,0,1,6.462,6.462,17.123,17.123,0,0,0,17.1,17.1,17.023,17.023,0,0,0,16.338-12.024,6.476,6.476,0,0,1,6.561-4.534,6.46,6.46,0,0,1,5.967,5.291,16.8,16.8,0,0,0,16.537,13.792,16.753,16.753,0,0,0,16.572-14.038,6.463,6.463,0,0,1,2.688-4.245,6.464,6.464,0,0,1,4.916-1.036,18.692,18.692,0,0,0,3.558.352,18.591,18.591,0,0,0,18.57-18.571,18.577,18.577,0,0,0-16.216-18.4,6.46,6.46,0,0,1-4.419-2.614,6.462,6.462,0,0,1-1.118-5.011,10.909,10.909,0,0,0,.2-2.045,10.81,10.81,0,0,0-10.8-10.8,10.8,10.8,0,0,0-8.064,3.645,6.463,6.463,0,0,1-9.123.542,6.462,6.462,0,0,1-.541-9.122,23.735,23.735,0,0,1,17.728-7.988,23.752,23.752,0,0,1,23.652,21.9,31.548,31.548,0,0,1,21.621,29.891,31.53,31.53,0,0,1-31.494,31.495h-.015A29.622,29.622,0,0,1-1241.843,855.186Z"/></g><g transform="translate(1813 650)"><path class="d" d="M-1367.1,835.559a30.419,30.419,0,0,1-30.377-29.731,41.219,41.219,0,0,1-29.877-39.557,41.192,41.192,0,0,1,42.916-41.119,38.572,38.572,0,0,1,36.679-26.326,38.7,38.7,0,0,1,32.61,17.829,38.953,38.953,0,0,1,30.318-14.331,39.167,39.167,0,0,1,39.122,39.123,38.538,38.538,0,0,1-1.807,11.7,32.363,32.363,0,0,1,11.337,24.5,32.4,32.4,0,0,1-22.988,30.847,32.229,32.229,0,0,1-31.1,23.8,32.229,32.229,0,0,1-20.9-7.715,32.044,32.044,0,0,1-21.922,8.616,32.3,32.3,0,0,1-15.482-3.975A30.353,30.353,0,0,1-1367.1,835.559Zm-19.1-97.522a28.266,28.266,0,0,0-28.234,28.234,28.25,28.25,0,0,0,24.659,27.976,6.469,6.469,0,0,1,4.419,2.615,6.462,6.462,0,0,1,1.117,5.011,17.636,17.636,0,0,0-.324,3.3,17.48,17.48,0,0,0,17.46,17.46,17.469,17.469,0,0,0,13.042-5.891,6.464,6.464,0,0,1,8.885-.741,19.084,19.084,0,0,0,12.089,4.268,19.234,19.234,0,0,0,16.263-8.939,6.457,6.457,0,0,1,5.309-2.979,6.439,6.439,0,0,1,5.429,2.754,19.335,19.335,0,0,0,15.817,8.263,19.288,19.288,0,0,0,19.154-17.011,6.462,6.462,0,0,1,5.492-5.635,19.378,19.378,0,0,0,16.518-19.075,19.392,19.392,0,0,0-9.539-16.626,6.461,6.461,0,0,1-2.554-8.346,25.935,25.935,0,0,0,2.562-11.23,26.228,26.228,0,0,0-26.2-26.2,26.074,26.074,0,0,0-25.026,18.42,6.464,6.464,0,0,1-6.561,4.534,6.462,6.462,0,0,1-5.967-5.292,25.778,25.778,0,0,0-25.374-21.16,25.7,25.7,0,0,0-25.428,21.54,6.467,6.467,0,0,1-2.688,4.243,6.463,6.463,0,0,1-4.916,1.036A28.5,28.5,0,0,0-1386.2,738.037Z"/></g></g></g></svg></div>
+                <p class="lemi-txt--p">Sanitización de pasamanos con vapor seco</p>
+                <p class="span">Realiza la limpieza de pasa manos, con equipo de vapor seco, logrando la eliminación de polvo y sanitización de tus instalaciones.</p>
+            </div>
+            <div class="col-md-6 le-main--item">
+                <div class="lemi-img lemi-6"></div>
+            </div>
+        </div>
+         <div class="white-section col-xs-12">
+            <h3>¿Necesitas una cotización?</h3>
+            <p>¡Estamos para Servirte!</p>
+            <a href="?id=cot"><button type="button" class="btn btn-primary btn-sm">Cotizar</button></a>        </div>
+    </section>
--- a/public_html/views/limpiezadepisos.php
+++ b/public_html/views/limpiezadepisos.php
@@ -0,0 +1,48 @@
+    <section class="lp-header">
+        <div class="ld-header--txt">
+            <div class="icon-arrow-red"></div>
+            <p class="ld-header--p">LIMPIEZA DE <br><span>PISOS</span></p>
+        </div>
+    </section>
+    <section class="lp-blue row">
+       <p>La división de Limpieza de Pisos cuenta con los siguientes servicios enfocados a mantener vialidades e instalaciones completamente limpias y seguras.</p>
+    </section>
+    <section class="lp-white row ws-x--bg">
+        <div class="col-md-3">
+            <div class="lp-white--img lp-white--img1">
+                    <div class="lp-white--fig"><p>Barrido Mecanizado</p></div>
+            </div>
+            <p class="lp-white--txt">La Barredora Tennant modelo T-800 que permite la limpieza de estacionamientos y vialidades. Es utilizado mayormente en superficies con asfalto o piso hidráulico, no levanta tierra durante la realización de la limpieza, ya que cuenta con un sistema similar al de las aspiradoras, es de fácil acceso a lugares más reducidos, debido a que cuenta con dimensiones más pequeñas. 
+                <br><span>Ver fotos en servicio...</span>
+            </p>
+        </div>
+        <div class="col-md-3">
+            <div class="lp-white--img lp-white--img2">
+                    <div class="lp-white--fig"><p>Restregado de Pisos</p></div>
+            </div>
+            <p class="lp-white--txt">La restregadora Tennant T-20 es un equipo que trabaja por medio de cepillos, agua y químicos para eliminar suciedad, grasa y manchas en pisos. Es muy efectivo para lugares angostos como banquetas, al igual que en lugares muy amplios como bodegas o almacenes.
+                <br><span>Ver fotos en servicio...</span>
+            </p>
+        </div>
+        <div class="col-md-3">
+            <div class="lp-white--img lp-white--img3">
+                    <div class="lp-white--fig"><p>Lavado a Vapor</p></div>
+            </div>
+            <p class="lp-white--txt">Equipo que conjuga la presión con temperatura, esto te permitirá eliminar completamente señales de suciedad, grasa u otros residuos en diferentes superficies como pisos, paredes, equipos, etc.
+                <br><span>Ver fotos en servicio...</span>
+            </p>
+        </div>
+        <div class="col-md-3">
+            <div class="lp-white--img lp-white--img4">
+                <div class="lp-white--fig"><p>Desincrustación de Chicles</p></div>
+            </div>
+            <p class="lp-white--txt">Eliminar chicles de banquetas o vialidades no ha sido una tarea sencilla, sin embargo este equipo está especializado en sustraer el chicle, dejando sin residuo alguno la superficie. Trabaja por medio de vapor seco que en combinación de un químico revientan el chicle en menos de 6 segundos.
+                <br><span>Ver fotos en servicio...</span>                
+            </p>
+        </div>
+        <div class="white-section col-xs-12">
+             <div class="lp-white--img5"></div>
+            <h3>¿Necesitas una cotización?</h3>
+            <p>¡Estamos para Servirte!</p>
+            <a href="?id=cot"><button type="button" class="btn btn-primary btn-sm">Cotizar</button></a>        </div>
+    </section>
--- a/public_html/views/main.php
+++ b/public_html/views/main.php
--- a/public_html/views/mantenimiento.php
+++ b/public_html/views/mantenimiento.php
@@ -0,0 +1,71 @@
+    <section class="ma-header">
+        <div class="ld-header--txt">
+            <div class="icon-arrow-red"></div>
+            <p class="ld-header--p">MANTENIMIENTO <br><span>DE EQUIPO</span></p>
+        </div>
+    </section>
+    <section class="lp-blue row">
+        <p>En DRENAX, conocemos la necesidad de asegurar que los equipos de su empresa reciban el mantenimiento apropiado, la seguridad de sus empleados y la productividad dependen del correcto funcionamiento de sus vehículos.</p>
+    </section>
+    <section class="lp-white row ws-x--bg">
+        <div class="lp-doble">
+            <div class="lp-doble--left">
+                <p><strong>Deseamos</strong> contribuir en el éxito de su empresa, entendiendo el valor del tiempo y los beneficios de contar con equipos en buenas condiciones, mientras más tiempo pasen sus unidades en operación, mejores resultados tendrán.
+                        El programa de mantenimiento DRENAX, le ayudara a mantener la rentabilidad, ya que todos nuestros trabajos cuentan con garantía. 
+                <br>
+                <strong>Conoce los servicios en lo que te podemos apoyar:</strong>
+                </p>
+            </div>
+            <div class="lp-doble--right">
+                <div class="lp-doble-item">
+                    <div class="arrow-icon"></div>
+                    <p>Cambios de aceites y filtros (motor principal y auxiliar).</p>
+                </div>
+                <div class="lp-doble-item">
+                    <div class="arrow-icon"></div>
+                    <p>Lavado (lavado de motor a vapor).</p>
+                </div>
+                <div class="lp-doble-item">
+                    <div class="arrow-icon"></div>
+                    <p>Verificación diaria, semanal, mensual y anual (según manual de fábrica).</p>
+                </div>
+                <div class="lp-doble-item">
+                    <div class="arrow-icon"></div>
+                    <p>Mantenimiento preventivo y correctivo (equipo Vactor Elgin, Tennant).</p>
+                </div>
+                <div class="lp-doble-item">
+                    <div class="arrow-icon"></div>
+                    <p>Sistemas hidráulicos.</p>
+                </div>
+                <div class="lp-doble-item">
+                    <div class="arrow-icon"></div>
+                    <p>Sistemas neumáticos.</p>
+                </div>
+                <div class="lp-doble-item">
+                    <div class="arrow-icon"></div>
+                    <p>Bombas de alta presión (bombas roder).</p>
+                </div>
+                <div class="lp-doble-item">
+                    <div class="arrow-icon"></div>
+                    <p>Carrete telescópico.</p>
+                </div>
+                <div class="lp-doble-item">
+                    <div class="arrow-icon"></div>
+                    <p>Pluma telescópica.</p>
+                </div>
+                <div class="lp-doble-item">
+                    <div class="arrow-icon"></div>
+                    <p>Mangueras y tubos de succión. Turbinas y sopladores.</p>
+                </div>
+                <div class="lp-doble-item">
+                    <div class="arrow-icon"></div>
+                    <p>Cambios de aceites y filtros (motor principal y auxiliar).</p>
+                </div>
+            </div>
+        </div>
+        <div class="white-section col-xs-12">
+            <h3>¿Necesitas una cotización?</h3>
+            <p>¡Estamos para Servirte!</p>
+            <a href="?id=cot"><button type="button" class="btn btn-primary btn-sm">Cotizar</button></a>
+        </div>
+    </section>
--- a/public_html/views/mantenimientopro.php
+++ b/public_html/views/mantenimientopro.php
@@ -0,0 +1,37 @@
+<section class="manpro-header">
+  <div class="cap-content">
+    <div class="cap-cta-container">
+      <span class="ref-cta-text ref-cta-no-box" style="font-size:2.5em">MANTENIMIENTO</span><br>
+      <span class="ref-cta-text ref-cta-no-box" style="font-size:3.5em;display:inline-block;margin-top:-0.5em">DE EQUIPOS</span>
+    </div>
+  </div>
+</section>
+<section class="ld-red">
+  <div class="floating-block-container" style="top:-135px">
+      <div class="floating-block-dual">
+        <div class="floating-block-content">
+          <p class="subtitle">Mantén tus equipos en óptimas condiciones <br> con respaldo técnico especializado</p>
+          <p class="description">En DRENAX PRO brindamos servicio de mantenimiento preventivo y correctivo para equipos hidroneumáticos Vactor y otras marcas. Nuestro equipo técnico está certificado para garantizar el máximo rendimiento y la vida útil de tus unidades.</p>
+        </div>
+        <div class="floating-block-arrow"></div>
+      </div>
+      <div class="cat-cta-container">
+        <span class="ref-cta-text ref-cta-no-box">NUESTROS SERVICIOS</span>
+      </div>
+      <div class="blocks-container" style="padding-bottom:2em">
+        <span class="block-rnd-box">Mantenimiento preventivo programado</span>
+        <span class="block-rnd-box">Mantenimiento correctivo y reparación mayor</span>
+        <span class="block-rnd-box">Diagnóstico y evaluación de equipos</span>
+        <span class="block-rnd-box">Servicio en sitio o en nuestro taller</span>
+      </div>
+      <div class="cap-card">
+        <div class="card-header">
+          <h3 class="header-title" style="font-size:2em;font-weight:700;color:yellow">EQUIPO EN BUEN ESTADO</h3>
+          <h3 class="header-subtitle" style="font-size:2em;font-weight:700">operación sin interrupciones</h3>
+        </div>
+      </div>
+      <div class="cat-cta-container">
+        <span class="ref-cta-text cat-cta-box" style="background-color:#191990;padding:5px 40px">CONTÁCTANOS</span>
+      </div>
+  </div>
+</section>
--- a/public_html/views/quienessomos.php
+++ b/public_html/views/quienessomos.php
@@ -0,0 +1,146 @@
+    <section class="qs-header">
+        <div class="qs-header--card">
+            <div class="card-left">
+                
+                <div>
+                        <h2 >¿Quiénes<br> somos? </h2>
+                </div>
+                <div>
+                    <p>Somos una empresa socialmente responsable, dedicada a La Limpieza y Desazolve de Drenajes, fosas sépticas y una amplia gama de servicios con el objetivo de mantener un ambiente limpio y seguro para satisfacer sus requerimientos específicos.</p>
+                    <p>Con más de 30 años al servicio Drenax se consolida como número uno en el estado. Contamos con más de 10,000 clientes satisfechos. Nuestro equipo altamente capacitado te dará la asesoria adecuada para mantener en perfectas condiciones tus espacios.</p>
+                </div>
+            </div>
+            <div class="card-right"></div>
+        </div>
+    </section>
+    <section class="qs-estado">
+        <div class="qs-estado--left">
+            <p>Empresa multiservicios líder en la Industría de inspección y limpieza de drenajes</p>
+        </div>
+        <div class="qs-estado--right">
+            <p class="qs-estado--t">COBERTURA EN <br><span>TODO EL ESTADO</span></p>
+            <p class="qs-estado--b">Contamos con servicio los 365 días del año las 24 horas del día.</p>
+        </div>
+    </section>
+    <section class="qs-white">
+        <div class="white-section col-xs-12">
+            <h3>¡Conoce nuestras sucursales!</h3>
+            <div class="sucursales">
+                    <button type="button" class="btn btn-outline-primary"><a href="/?id=con#cln">Culiacán</a></button>
+                    <button type="button" class="btn btn-outline-primary"><a href="/?id=con#mzt">Mazatlán</a></button>
+                    <button type="button" class="btn btn-outline-primary"><a href="/?id=con#mch">Los Mochis</a></button>
+                    <div class="btn-prox-flex">
+                        <button type="button" disabled  class="btn btn-outline-primary prox">Guadalajara</button>
+                        <span class="prox-text">¡Próximamente!</span>
+                    </div>
+                    
+            </div>
+            <div class="filo row col-xs-12">
+                <div class="misionvision col-lg-5">
+                    <div class="mv-item">
+                        <div class="mv-icon">
+                            <svg viewBox="0 0 329 329"><defs><style>.a{clip-path:url(#b);}.b{fill:#fff;}</style><clipPath id="b"><rect width="329" height="329"/></clipPath></defs><g id="a" class="a"><g transform="translate(-271.789 -858.956)"><g transform="translate(326.789 930.956)"><path class="b" d="M-1347.835,286.424a5.469,5.469,0,0,0-5.468-5.468h-57.927a5.467,5.467,0,0,0-5.468,5.468v34.765a5.465,5.465,0,0,0,5.468,5.468h52.459V342.1l-52.459,52.476-13.513-13.517a5.475,5.475,0,0,0-4.35-1.58,5.45,5.45,0,0,0-4.005,2.325l-52.134,74.977a5.459,5.459,0,0,0-.355,5.653,5.462,5.462,0,0,0,4.845,2.934h208.536c.007,0,.011,0,.015,0a5.465,5.465,0,0,0,5.468-5.468,5.445,5.445,0,0,0-1.21-3.432l-79.9-113.83Zm-57.927,29.3V291.892h46.991v23.829Zm-64.519,138.717,42.427-61.02,12.755,12.762a5.474,5.474,0,0,0,3.87,1.6,5.472,5.472,0,0,0,3.867-1.6l53.323-53.344,71.315,101.6Zm0,0" transform="translate(1486.211 -280.956)"/></g></g></g></svg>
+                        </div>
+                        <div class="mv-txt">
+                            <h4>Misión</h4>
+                            <p>Creamos ambientes limpios y seguros para el bienestar de la comunidad.</p>
+                        </div>
+                    </div>  
+                    <div class="mv-item">
+                        <div class="mv-icon">
+                            <svg viewBox="0 0 329 329"><defs><style>.a{clip-path:url(#b);}.b{fill:#fff;}</style><clipPath id="b"><rect width="329" height="329"/></clipPath></defs><g id="a" class="a"><g transform="translate(1199.727 -184.859)"><g transform="translate(-1139.727 244.859)"><path class="b" d="M-980.178,269.28V244.859h-110.708V269.28h-48.842V453.25h208.391V269.28Zm-12.211-12.211V441.039H-1004.6V366.556h-61.865v74.483h-12.211V257.07Zm-24.42,133.907h-37.446v-12.21h37.446Zm-37.446,12.211h12.618v37.852h-12.618Zm24.828,0h12.618v37.852h-12.618Zm-98.089-121.7h36.631V441.039h-36.631Zm183.969,159.549h-36.631V281.49h36.631Zm0,0" transform="translate(1139.727 -244.859)"/></g><g transform="translate(-1115.306 293.701)"><rect class="b" width="12.21" height="12.21" transform="translate(0 0)"/></g><g transform="translate(-1115.306 318.121)"><rect class="b" width="12.21" height="12.21" transform="translate(0 0)"/></g><g transform="translate(-1115.306 342.542)"><rect class="b" width="12.21" height="12.21"/></g><g transform="translate(-1115.306 366.963)"><rect class="b" width="12.21" height="12.21"/></g><g transform="translate(-967.968 293.701)"><rect class="b" width="12.21" height="12.21" transform="translate(0 0)"/></g><g transform="translate(-967.968 318.121)"><rect class="b" width="12.21" height="12.21" transform="translate(0 0)"/></g><g transform="translate(-967.968 342.542)"><rect class="b" width="12.21" height="12.21"/></g><g transform="translate(-967.968 366.963)"><rect class="b" width="12.21" height="12.21"/></g><g transform="translate(-1115.306 391.384)"><rect class="b" width="12.21" height="12.21" transform="translate(0 0)"/></g><g transform="translate(-967.968 391.384)"><rect class="b" width="12.21" height="12.21" transform="translate(0 0)"/></g><g transform="translate(-1066.464 269.28)"><path class="b" d="M-996.575,271.955h-61.865v36.224h61.865Zm-12.21,24.013h-37.446v-11.8h37.446Zm0,0" transform="translate(1058.44 -271.955)"/></g><g transform="translate(-1066.464 318.122)"><path class="b" d="M-996.575,326.146h-61.865V362.37h61.865Zm-12.21,24.013h-37.446v-11.8h37.446Zm0,0" transform="translate(1058.44 -326.146)"/></g></g></g></svg>
+                        </div>
+                        <div class="mv-txt">
+                            <h4>Visión</h4>
+                            <p>Somos una empresa líder en limpieza integral, contamos con colaboradores orgullosos y en constante innovación, consolidando nuestra calidad y liderazgo a nivel nacional.</p>
+                        </div>
+                    </div>   
+                </div>
+                <div class="valores col-lg-7">
+                    <h4>Nuestros valores</h4>
+                    <div class="v-item">
+                        <div class="v-icon">
+                             <svg viewBox="0 0 329 329"><defs><style>.a{clip-path:url(#b);}.b{fill:#fff;}</style><clipPath id="b"><rect width="329" height="329"/></clipPath></defs><g id="a" class="a"><g transform="translate(766 -210)"><path class="b" d="M-712.434,477.8h223.361a23.845,23.845,0,0,0,23.818-23.818,23.855,23.855,0,0,0-15.878-22.453V406.341a117.4,117.4,0,0,0-24.376-71.853,121.371,121.371,0,0,0-55.577-40.461,23.847,23.847,0,0,0-23.788-22.656h-31.758a23.846,23.846,0,0,0-23.788,22.656A121.361,121.361,0,0,0-696,334.488a117.4,117.4,0,0,0-24.376,71.853v25.183a23.856,23.856,0,0,0-15.879,22.453A23.845,23.845,0,0,0-712.434,477.8Zm40.227-146.008V358.7a7.939,7.939,0,0,0,7.939,7.94,7.939,7.939,0,0,0,7.939-7.94v-39.37a103.269,103.269,0,0,1,15.879-8.3v63.548a7.939,7.939,0,0,0,7.939,7.939,7.939,7.939,0,0,0,7.94-7.939V295.189a7.948,7.948,0,0,1,7.939-7.939h31.758a7.949,7.949,0,0,1,7.939,7.939v4.661c0,.023,0,.045,0,.068v74.665A7.939,7.939,0,0,0-569,382.522a7.939,7.939,0,0,0,7.94-7.939V311.035a103.434,103.434,0,0,1,15.878,8.3V358.7a7.94,7.94,0,0,0,7.94,7.94,7.94,7.94,0,0,0,7.939-7.94V331.787a103.338,103.338,0,0,1,32.287,74.554v23.818H-704.494V406.341A103.338,103.338,0,0,1-672.207,331.787Zm-40.227,114.25h223.361a7.949,7.949,0,0,1,7.94,7.94,7.948,7.948,0,0,1-7.94,7.939H-712.434a7.948,7.948,0,0,1-7.939-7.939A7.949,7.949,0,0,1-712.434,446.037Z"/></g></g></svg>
+                        </div>
+                        <div class="mv-txt">
+                            <p> Servicio profesional: Realizar un servicio bien, a la primera vez.</p>
+                        </div>
+                    </div> 
+                    <div class="v-item">
+                        <div class="v-icon">
+                            <svg viewBox="0 0 329 329"><defs><style>.a{clip-path:url(#b);}.b{fill:#fff;}</style><clipPath id="b"><rect width="329" height="329"/></clipPath></defs><g id="a" class="a"><g transform="translate(-167.804 -198.594)"><g transform="translate(304.339 244.594)"><path class="b" d="M331.108,254.641a5.025,5.025,0,1,0-3.552-1.472A5.072,5.072,0,0,0,331.108,254.641Z" transform="translate(-326.085 -244.594)"/></g><g transform="translate(287.34 244.594)"><path class="b" d="M362.133,377.382a12.974,12.974,0,0,0,16.825-12.388v-23.4a13.138,13.138,0,0,0,20.224-13.446l-4.162-21.1a43.809,43.809,0,0,0-12.092-22.629l-7.116-7.1v-27.7a5.023,5.023,0,0,0-10.047,0V279.4a5.025,5.025,0,0,0,1.476,3.557l8.593,8.569a33.807,33.807,0,0,1,9.329,17.458l4.162,21.1a3.1,3.1,0,0,1-6.053,1.338l-2.15-8.771a6.195,6.195,0,0,0-12.212,1.476v40.861a2.923,2.923,0,0,1-5.821.385V344.041a5.023,5.023,0,0,0-5.023-5.023h-.028a5.023,5.023,0,0,0-5.023,5.023v20.953c0,.274.012.545.028.815V372.5a2.925,2.925,0,1,1-5.85,0v-6.695c.017-.269.029-.539.029-.811V344.041a5.024,5.024,0,0,0-5.023-5.023h-.029a5.024,5.024,0,0,0-5.023,5.023v21.336a2.923,2.923,0,0,1-5.822-.382V357.5c.017-.269.029-.539.029-.811V344.041a5.024,5.024,0,0,0-5.023-5.023H326.3a5.024,5.024,0,0,0-5.023,5.023v13.03a2.923,2.923,0,0,1-5.822-.382V312.52a33.7,33.7,0,0,1,9.97-24.022l5.554-5.538a5.021,5.021,0,0,0,1.477-3.557V267.532a5.023,5.023,0,1,0-10.047,0v9.786l-4.078,4.065a43.678,43.678,0,0,0-12.923,31.136v44.17a12.962,12.962,0,0,0,16.556,12.464,12.971,12.971,0,0,0,16.137,8.228,12.968,12.968,0,0,0,24.032,0Z" transform="translate(-305.409 -244.594)"/></g><g transform="translate(203.804 377.339)"><path class="b" d="M328.184,440.623a12.921,12.921,0,0,0-2.427-3.039,12.974,12.974,0,0,0-12.018-20.817,12.977,12.977,0,0,0-19.144-8.376l-20.265,11.7A13.138,13.138,0,0,0,252.573,409.3l-16.2,14.158a43.816,43.816,0,0,0-13.552,21.786l-2.587,9.711-13.922,8.037a5.023,5.023,0,1,0,5.023,8.7l15.727-9.081a5.023,5.023,0,0,0,2.342-3.057l3.124-11.726a33.811,33.811,0,0,1,10.455-16.808l16.2-14.157a3.1,3.1,0,0,1,4.415.341,3.107,3.107,0,0,1-.23,4.231l-6.521,6.248a6.194,6.194,0,0,0,7.383,9.837l35.387-20.43a2.917,2.917,0,0,1,3.159,4.9L284.384,432.61a5.023,5.023,0,0,0-1.839,6.862l.007.012.007.012a5.024,5.024,0,0,0,6.863,1.838l18.146-10.476c.236-.137.465-.282.691-.432l5.8-3.346a2.925,2.925,0,0,1,2.925,5.066l-5.8,3.348c-.241.12-.48.245-.716.381l-18.147,10.476a5.024,5.024,0,0,0-1.838,6.863,5.176,5.176,0,0,0,.673.907,5.006,5.006,0,0,0,6.2.956l18.476-10.668a2.923,2.923,0,0,1,2.58,5.233l-6.488,3.745c-.242.121-.483.247-.719.383L300.253,460.1a5.023,5.023,0,0,0-1.839,6.862,5.113,5.113,0,0,0,4.369,2.537,5,5,0,0,0,2.508-.674l11.286-6.516a2.918,2.918,0,0,1,3.649,1.238,2.929,2.929,0,0,1-1.07,4l-16.1,9.295L280.9,489.624A33.7,33.7,0,0,1,255.114,493l-7.573-2.041a5.02,5.02,0,0,0-3.819.5l-15.727,9.08a5.023,5.023,0,1,0,5.023,8.7l13.921-8.037,5.559,1.5a43.68,43.68,0,0,0,33.427-4.376L298.611,491h0l9.466-5.465.86-.5h0l15.24-8.8a12.98,12.98,0,0,0,2.519-20.575A12.993,12.993,0,0,0,328.184,440.623Z" transform="translate(-203.804 -406.052)"/></g><g transform="translate(333.884 370.089)"><path class="b" d="M486.63,461.423l-13.922-8.037-1.482-5.564a43.681,43.681,0,0,0-20.5-26.761l-22.152-12.79-16.1-9.3a12.963,12.963,0,0,0-19.07,8.1,12.991,12.991,0,0,0-15.2,9.866,12.967,12.967,0,0,0-12.014,20.809,12.985,12.985,0,0,0,2.317,20.767l20.266,11.7a13.138,13.138,0,0,0,1.533,24.237L410.66,501.4a43.819,43.819,0,0,0,25.643.844l9.7-2.615,13.922,8.037a5.023,5.023,0,0,0,5.023-8.7l-15.728-9.08a5.017,5.017,0,0,0-3.819-.5l-11.717,3.157a33.8,33.8,0,0,1-19.784-.65l-20.358-6.948a3.1,3.1,0,0,1-1.912-3.994,3.11,3.11,0,0,1,3.78-1.916l8.671,2.523a6.194,6.194,0,0,0,4.829-11.312l-35.387-20.431a2.925,2.925,0,0,1,.705-5.358,2.9,2.9,0,0,1,1.872.123l18.48,10.669a5,5,0,0,0,6.2-.954,5.153,5.153,0,0,0,.677-.909,5.024,5.024,0,0,0-1.838-6.863l-18.146-10.476c-.238-.136-.478-.263-.721-.384l-5.795-3.345a2.925,2.925,0,0,1,2.924-5.066l5.8,3.346c.225.15.455.3.691.432l18.146,10.477a5,5,0,0,0,6.2-.955,5.172,5.172,0,0,0,.676-.908,5.023,5.023,0,0,0-1.838-6.863l-18.394-10.62a2.918,2.918,0,0,1,3.159-4.9l6.49,3.747c.224.148.452.293.688.43l10.954,6.323a5,5,0,0,0,6.2-.954,5.152,5.152,0,0,0,.677-.909,5.023,5.023,0,0,0-1.838-6.862l-11.285-6.516a2.923,2.923,0,0,1,3.242-4.85l15.24,8.8h0l.86.5,9.466,5.465h0l12.686,7.325a33.7,33.7,0,0,1,15.818,20.645l2.019,7.578a5.02,5.02,0,0,0,2.342,3.057l15.727,9.081a5.023,5.023,0,1,0,5.023-8.7Z" transform="translate(-362.021 -397.233)"/></g></g></g></svg>
+                        </div>
+                        <div class="mv-txt">
+                            <p>Trabajo en equipo: Unidos se trabaja mejor.</p>
+                        </div>
+                    </div> 
+                    <div class="v-item">
+                        <div class="v-icon">
+                            <svg viewBox="0 0 329 329"><defs><style>.a{clip-path:url(#b);}.b{fill:#fff;}</style><clipPath id="b"><rect width="329" height="329"/></clipPath></defs><g id="a" class="a"><g transform="translate(-0.428 -0.781)"><g transform="translate(-558 -215)"><path class="b" d="M833.969,437.587a33.785,33.785,0,0,0-46.1-8.673l-29.78,19.336h-8.419a33.59,33.59,0,0,0,6.769-20.258V421.24H714.264c-3.735,0-5.216-2.67-7.632-4.475a47.371,47.371,0,0,0-62.454,0l-5.084,4.475H607.428v81.031H758.687l79.094-59.32Zm-79.783,51.179H620.933V434.745H644.19l8.91-7.841a33.837,33.837,0,0,1,44.61,0c1.792,1.209,6.724,7.8,16.554,7.8h27.51a20.334,20.334,0,0,1-19.1,13.551H688.91v13.505h73.176l33.172-21.539a20.211,20.211,0,0,1,23.034.469Z"/></g><g transform="translate(-559 -229)"><path class="b" d="M813.507,285.59a38.091,38.091,0,0,0-29.986-13.809A40.426,40.426,0,0,0,749.749,290.1a40.421,40.421,0,0,0-33.771-18.319,38.1,38.1,0,0,0-29.985,13.807c-6.743,8.171-10.456,19.382-10.456,31.566,0,23.473,14.549,40.073,33.631,57.011,9.792,8.692,1.1.691,41.429,35.8,13.559-12.016,29.633-25.5,48.038-43.306,12.524-12.121,25.328-27.482,25.328-49.5C823.963,304.971,820.25,293.761,813.507,285.59Zm-24.263,71.36c-16.881,16.329-32.31,29.417-38.65,35.053-24.8-21.5-23.034-19.64-31.522-27.138-19.324-17.071-30.03-29.773-30.03-47.71,0-15.863,8.329-31.868,26.936-31.868A27.243,27.243,0,0,1,743,312.689H756.5a27.243,27.243,0,0,1,27.019-27.4c18.607,0,26.936,16.005,26.936,31.867C810.458,334.128,799.733,346.8,789.244,356.95Z"/></g></g></g></svg>
+                        </div>
+                        <div class="mv-txt">
+                            <p>Honestidad: Somos verdaderos, somos honestos.</p>
+                        </div>
+                    </div> 
+                    <div class="v-item">
+                        <div class="v-icon">
+                        <svg viewBox="0 0 329 329"><defs><style>.a{clip-path:url(#b);}.b{fill:#0b1c48;}</style><clipPath id="b"><rect width="329" height="329"/></clipPath></defs><g id="a" class="a"><g transform="translate(33.176 -41.418)"><g transform="translate(15.824 110.228)"><path class="b" d="M131.925,278.59a6.182,6.182,0,0,0-5.463-5.463C77.54,267.693,35.837,287.263,1.82,322.28a255.11,255.11,0,0,0-25.387,30.867c-12.2-.5-25.723,5.023-35.312,14.612l-17.486,17.486a6.184,6.184,0,0,0-.983,7.464,6.184,6.184,0,0,0,6.955,2.88,86.09,86.09,0,0,1,16.983-2.651,47.929,47.929,0,0,1,5.838.048c-3.859,7.422-6.816,13.639-7.8,15.2a6.185,6.185,0,0,0,.861,7.665l10.118,10.117c-14.726,20.084-14.969,30.37-14.917,31.827a6.212,6.212,0,0,0,6.5,5.978c3.452,0,13.351-1.465,31.372-14.848l10.644,10.643a6.184,6.184,0,0,0,7.715.829c1.665-1.07,7.516-3.9,14.534-7.571.116,5.23-.593,12.911-2.134,23.322a6.187,6.187,0,0,0,10.486,5.278L37.3,463.935a48.831,48.831,0,0,0,13.859-34.974c10.785-7.536,32.481-26.7,32.481-26.7s53.652-75.4,48.288-123.673ZM120.1,284.951a123.464,123.464,0,0,1-3.133,38.756c-7.616-2.4-15.063-7.111-21.787-13.834-6.749-6.75-11.471-14.226-13.86-21.871a124.663,124.663,0,0,1,38.779-3.051ZM-54.216,380.583l4.079-4.081A39.045,39.045,0,0,1-32.4,366.419c-3.333,5.292-6.305,10.346-8.927,15.01a49.639,49.639,0,0,0-12.885-.846Zm11.7,29.769c1.338-2.64,2.956-5.95,5.927-11.562l8.138,8.14q-4.542,4.873-8.225,9.261Zm30.233-2.365c4.505-4.5,8.825-5.326,14.191-5.442-.118,5.23-.957,9.7-5.447,14.185-19.194,19.194-32.35,27.764-40.217,31.59,3.882-8.019,12.475-21.335,31.473-40.333Zm6.953,39.551-6.375-6.377c2.911-2.473,5.987-5.214,9.232-8.254l8.663,8.664c-5.7,3.041-8.071,4.185-11.52,5.968Zm33.884,7.654-4.948,4.95a60.3,60.3,0,0,0-.3-13.737c4.546-2.56,9.484-5.462,14.658-8.709a36.458,36.458,0,0,1-9.405,17.5ZM17.444,435.34,6.36,424.254c8.2-9.026,7.9-17.722,7.9-27.882a6.181,6.181,0,0,0-6.182-6.182c-9.492,0-18.627-.509-27.882,7.9L-30.393,387.5c28.9-50.685,62.315-82.774,99.853-95.987,2.972,9.616,8.756,18.88,16.976,27.1,8.182,8.183,17.4,13.952,26.977,16.936-13.291,37.332-45.372,70.721-95.97,99.787Zm0,0" transform="translate(78.176 -272.228)"/></g><g transform="translate(118.937 156.32)"><path class="b" d="M87.374,331.685a30.913,30.913,0,1,0,0,43.718,30.951,30.951,0,0,0,0-43.718ZM78.63,366.659a18.547,18.547,0,1,1,0-26.23,18.567,18.567,0,0,1,0,26.23Zm0,0" transform="translate(-34.618 -322.647)"/></g></g></g></svg>
+                        </div>
+                        <div class="mv-txt">
+                            <p>Innovación: Mejoramos constantemente nuestra persona, servicio y equipo de trabajo.</p>
+                        </div>
+                    </div> 
+                    <div class="v-item">
+                        <div class="v-icon">
+                                <svg viewBox="0 0 329 329"><defs><style>.f{clip-path:url(#g);}.g{fill:#0b1c48;}</style><clipPath id="g"><rect width="329" height="329"/></clipPath></defs><g id="f" class="f"><g transform="translate(450.708 -184.085)"><path class="g" d="M-201,263.14a58.386,58.386,0,0,0-82.478,0l-33.243,33.243a58.365,58.365,0,0,0-9.4,12.3,58.208,58.208,0,0,0-12.289,9.391l-33.243,33.243a58.387,58.387,0,0,0,0,82.48,58.388,58.388,0,0,0,82.478,0l33.243-33.244a58.325,58.325,0,0,0,9.41-12.3,58.145,58.145,0,0,0,12.281-9.388L-201,345.618a58.386,58.386,0,0,0,0-82.478Zm-96.664,162.171a46.372,46.372,0,0,1-65.507,0,46.372,46.372,0,0,1,0-65.507l33.243-33.243a46.372,46.372,0,0,1,65.506,0,46.546,46.546,0,0,1,5.936,7.278l-10.452,10.453a9.153,9.153,0,0,1-13.081-.134,21.368,21.368,0,0,0-30.187,0l-33.37,33.368a21.371,21.371,0,0,0,0,30.187,21.372,21.372,0,0,0,30.188,0l16.619-16.619a58.622,58.622,0,0,0,31.012,4.308ZM-263.071,312l14.291-14.29a9.353,9.353,0,0,1,13.215,0,9.356,9.356,0,0,1,0,13.215l-14.293,14.291a58.578,58.578,0,0,0-6.073-7.14A58.516,58.516,0,0,0-263.071,312Zm-53.648,66.863a58.6,58.6,0,0,0,7.139,6.076l-14.291,14.289a9.353,9.353,0,0,1-13.215,0,9.355,9.355,0,0,1,0-13.214l14.292-14.292a59.051,59.051,0,0,0,6.074,7.141Zm107.236-41.73-33.243,33.243a46.373,46.373,0,0,1-65.507,0,46.6,46.6,0,0,1-5.935-7.28l10.452-10.451a9.355,9.355,0,0,1,13.215,0,21.275,21.275,0,0,0,30.052.134l33.37-33.367a21.372,21.372,0,0,0,0-30.188,21.369,21.369,0,0,0-30.188,0l-16.619,16.618a58.631,58.631,0,0,0-31.012-4.307l29.91-29.907a46.371,46.371,0,0,1,65.506,0,46.371,46.371,0,0,1,0,65.506Zm0,0" transform="translate(0 0)"/></g></g></svg>
+                        </div>
+                        <div class="mv-txt">
+                            <p>Integridad y Convivencia: Todos somos familia.</p>
+                        </div>
+                    </div> 
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="timeline">
+        <h3>Una empresa con experiencia</h3>
+        <p>-Linea del tiempo Drenax-</p>
+        <div class="timeline">
+            <div class="row col-md-12"> 
+                <div class="col-xl-4 tl-item-ar o-1">
+                    <h4>1994</h4>
+                    <p>Todo inicio con el nombre de Multiservicios Salazar, una empresa dedicada a la Limpieza de Redes de Drenaje Sanitarios. Desde un inicio el servicio fue ofrecido a hogares, comercios e industrias y  se adquirieron con el paso del tiempo equipos con mayor tecnología.</p>
+                </div>
+                <div class="col-xl-4 tl-item-ar o-2">
+                    <h4>2002</h4>
+                    <p>ya se atendían a más de 500 empresas de Culiacán y ciudades vecinas, en el sector residencial se tenía una base de datos con más de 1000 clientes, en ese momento ya se contaban con 4 unidades en diferentes categorías.</p>
+                </div>
+                <div class="col-xl-4 tl-item-ar o-3">
+                    <h4>2014</h4>
+                    <p>Drenax ya es una empresa consolidada en el estado de Sinaloa con 3 sucursales, Culiacán, una en los Mochis y otra en Mazatlán, con más de 40 empleados y 30 unidades en las diferentes categorías como lo son Drenajes, Inspección de Tuberías, Limpieza de Pisos y Sanitización de ambientes. </p>
+                </div>
+                
+                <div class="col-xl-4 tl-item-ab o-4">
+                    <h4>1997</h4>
+                    <p>Adquirimos nuestro primer equipo Hidroneumático para dar el servicio de limpieza y desazolve en instalaciones de drenaje sanitario y pluvial. Salazar, una empresa dedicada a la Limpieza de Redes de Drenaje Sanitario. </p></div>
+                <div class="col-xl-4 tl-item-ab o-5">
+                    <h4>2006</h4>
+                    <p>Cambiamos de nombre comercial y razón social a DRENAX, S.A de C.V.. Para ese tiempo nuestra visión era más clara, ser líder regional en limpieza de drenajes, para ello ya se contaban con 7 vehículos, y no solo nos enfocamos al drenaje, incursionamos en el barrido mecanizado y el restregado de pisos.</p></div>
+                <div class="col-xl-4 tl-item-ab o-6">
+                    <h4>2025</h4>
+                    <p>Actualmente, Drenax es empresa consolidada y líder en el sector con más de 50 colaboradores y 3 ubicaciones en el estado de Sinaloa. </p>
+                </div>
+            </div>
+            <div class="tl-line">
+                <div class="circle-1"></div>
+                <div class="circle-2"></div>
+                <div class="circle-3"></div>
+                <div class="circle-4"></div>
+                <div class="circle-5"></div>
+                <div class="circle-6"></div>
+            </div>
+        </div>
+    </section>
+    <section class="img-bottom">
+        <h3 style="text-align: center;">Más de 10,000 clientes satisfechos...</h3>
+    </section>
--- a/public_html/views/refacciones.php
+++ b/public_html/views/refacciones.php
@@ -0,0 +1,57 @@
+<section class="ref-header">
+  <div class="ref-content">
+    <div class="ref-cta-container">
+      <span class="ref-cta-text ref-cta-no-box">TODO LO QUE NECESITAS PARA MANTENER</span>
+      <span class="ref-cta-text ref-cta-box">TU OPERACIÓN EN MOVIMIENTO</span>
+    </div>
+  </div>
+</section>
+<section class="ld-red">
+  <div class="floating-block-container">
+      <div class="cat-cta-container">
+        <span class="ref-cta-text cat-cta-box">CATÁLOGO</span>
+      </div>
+      <div class="floating-block">
+        <div class="floating-block-content">
+          <p class="description">En DRENAX PRO contamos con un amplio stock de refacciones para equipos hidroneumáticos, Vactor® y maquinaria especializada en limpieza de drenaje. Ofrecemos piezas originales y compatibles, seleccionadas para garantizar el máximo rendimiento, durabilidad y seguridad de tus unidades.</p>
+        </div>
+        <div class="floating-block-arrow"></div>
+      </div>
+      <div class="blocks-container">
+        <span class="block-tex-box">Componentes hidráulicos</span>
+        <span class="block-tex-box">Boquillas</span>
+        <span class="block-tex-box">Mangueras</span>
+        <span class="block-tex-box">Filtros</span>
+        <span class="block-tex-box">Accesorios</span>
+        <span class="block-tex-box">Refacciones específicas</span>
+        <span class="block-tex-box">según tu equipo</span>
+      </div>
+      <div class="cat-cta-container">
+        <span class="ref-cta-text ref-cta-no-box">TENEMOS LO</span><br>
+        <span class="ref-cta-text ref-cta-no-box">QUE NECESITAS</span>
+      </div>
+      <div class="cat-card">
+        <div class="card-header">
+          <h3 class="header-title">¿Por qué elegir nuestras refacciones?</h3>
+        </div>
+        <div class="card-description">
+          <p>Productos de alta calidad y disponibilidad inmediata.</p>
+          <p>Asesoría personalizada para encontrar la pieza correcta.</p>
+          <p class="highlight">Envíos a todo México.</p>
+          <p>Soporte técnico con respaldo DRENAX PRO.</p>
+        </div>
+      </div>
+  </div>
+</section>
+<section class="ld-blue-simple" style="height:60vh;">
+  <div class="floating-block-container" style="top:-400px;">
+    <div class="cat-cta-container">
+      <span class="ref-cta-text cat-cta-box" style="background-color:#191990;">CATÁLOGO</span>
+    </div>
+    <div class="cat-end-card">
+    </div>
+    <div class="cat-cta-container">
+      <span class="ref-cta-text ref-cta-no-box">MANTÉN TU EQUIPO AL 100%</span>
+    </div>
+  </div>
+</section>