.burbuja {
  position: fixed;              /* Se pega a la ventana */
  width: 840px;
  height: 840px;
  pointer-events: none;         /* No bloquea el mouse */
  border-radius: 50%;
  background: radial-gradient(circle, rgba(4, 151, 242, 0.2) 0%, rgba(255,255,255,0) 60%);
  mix-blend-mode: lighten;
  transform: translate(-50%, -50%); /* Centra la burbuja en (left, top) */
  will-change: left, top;
  transition: filter .2s ease;  /* opcional: efecto sutil al moverse */
  z-index: 9999;              /* Siempre encima */
}

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove margin and padding from all elements */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Remove quotes from blockquotes */
blockquote {
  quotes: none;
}

/* Remove default list styles */
ul, ol {
  list-style: none;
}

/* Remove link text decoration */
a {
  text-decoration: none;
}

a:hover{
  transition: 900ms ease-in-out;
  color: rgba(27, 28, 29, 0.79);
}

/* Remove the appearance of form elements (buttons, input fields, etc.) */

input,
select,
textarea {
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
}

/* Normalize tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* Remove the outline on focusable elements like links and buttons */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

/* Reset HTML5 elements like header, footer, etc. */
header,
footer,
section,
article,
aside,
nav,
figure,
figcaption,
main,
mark,
summary,
details {
  display: block;
}


/*---------CLASES REUTILIZABLES ------------*/

.yellow{
  color: #f1c40f !important;
}







/* Set up a consistent font-family */
body {
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    background-color: #EFFCF5;
    line-height: 1.1;
    color: var(--text);
    
}


/* Normalize form field styles */
input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Ensure images are responsive */
img {
  width: 100%;
  height: auto;
  display: block;
}



/* Definir variables globales en :root */
:root {
  /* Colores */
      --primary-color:#033b64;
    --secoundary-color:#002e51;
    --tertiary-color:#004964;
    --acecent-color:#128493;
    --text-color:#299caa;
    --title-color:#fefffe;
  --color-primary: #3498db; /* Azul */
  --color-secondary: #2ecc71; /* Verde */
  --color-background: #f4f4f9; /* Fondo claro */
  --color-text: #333; /* Texto oscuro */
  --color-link: #2980b9; /* Enlaces */
  --color-link-hover: #1d6fa5; /* Enlaces al pasar el mouse */
  --yellow: #f1c40f; /* Amarillo */
  --red: #e74c3c; /* Rojo */
  --green: #2ecc71; /* Verde */
  --gray-light: #ecf0f1; /* Gris claro */
  --gray-dark: #424343; /* Gris oscuro */  
  
   --bg: #0b1020;
      --panel: #121832;
      --muted: #a8b3cf;
      --text: #676869;
      --accent: #7aa2ff;
      --accent-2: #9bffd1;
      --card: #0e152b;
      --ring: rgba(122,162,255,.55);
      --radius: 16px;
  
  /* Fuentes */
  --font-family-base: 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading-1: 'Roboto', sans-serif;
    --font-family-heading-2: 'Poppins", sans-serif';
    --font-family-subheading: 'Inter', sans-serif;
  --font-size-base: 16px; /* Tamaño base */
  --font-size-heading: 2rem; /* Tamaño para encabezados */

  
  /* Espaciado */
  --spacing-unit: 1rem; /* Unidad de espaciado base */
  --spacing-lg: 2rem; /* Espaciado grande */
  --spacing-sm: 0.5rem; /* Espaciado pequeño */

  /* Bordes */
  --border-radius: 8px; /* Bordes redondeados */
  --border-width: 1px; /* Ancho del borde */

  /* Sombras */
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */

  /* Transiciones */
  --transition-speed: 0.3s; /* Velocidad de transición */

  --size: 300px;
  --border: 10px;
  --radius: 8px; /* en estrella suele verse mejor 0 */
}

.green-gradient{
  background: #15cb04;
  background: linear-gradient(90deg, rgba(21, 203, 4, 1) 0%, rgba(36, 102, 226, 1) 100%);
 
}

.blue{
  color: #2563EB
}

.fa-paintbrush{
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 0.3em;
}

.margin-bottom1{
  margin-bottom: 1.8em;
}

h1,h2 {
  font-size: 3rem;
  margin-bottom: 0.7em;
}

.btn{
  display: block;
  text-align: center;
  margin: 2em auto;
  background: #17A14F;
  background: linear-gradient(90deg,rgba(23, 161, 79, 1) 30%, rgba(36, 102, 228, 1) 100%);
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 600;
}
.btn-2{
  display: block;
  text-align: center;
  background: #f8faf9;
  color:#2465E6;
  padding: 0.5em 1em;
  margin-top: 0.5em;
  border-radius: 0.5em;
  width: 45%;
  font-size: 0.8em;
}

.primaryButn{
  margin: 2em 0em;
  background-color: #22c55e;
  color: #fff;
  padding: 1em;
  border-radius: 0.5em;
  border: none;
  box-shadow: 1px 2 5px #a09f9f;
  font-weight: 600;
}

.btn3{
  width: 200px;
  margin: 2em auto;
background: rgba(34, 197, 94, 0.2); /* 20% */
  color: #110e0e;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 600;
}

.btn3:hover{
  background: rgba(34, 197, 94, 0.4); /* 40% */
  transition: 900ms ease-in-out;
  box-shadow: 2px 2px 20px rgba(0,0,0,0.4);
  translate: 0px -3px;
 
}

.cf-width-auto{
  background: #17A14F;
  background: linear-gradient(90deg,rgba(23, 161, 79, 1) 30%, rgba(36, 102, 228, 1) 100%);
  width: 100% !important;
  font-size: 2em !important;
  font-weight: bold;
  border-radius: 12px;
}


.header_container{
   background-color: #fff;
   padding: 1em 1.5em;
   position: sticky;
  
}

.logoLink{
  color:#000 !important;
}



.top_ContainerInfo .fa-solid{
  color: #15cb04;
  padding: 0px 5px;
}

.js-mail { display:inline-flex; align-items:center; gap:.5rem; }

.contactInfo{
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0em 0em 0.6em 0em;
}

.topCityInfo ul{
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.logo{
  margin: 0.7em 0em 0.3em 0em;
  font-size: 1.7em;
}

.navigationContainer{
  margin: 2em 0em;
}

.logo .fa-solid{

  color: #15cb04;
}

.green{
  color: #15cb04;
}

.miniSlogan{
  display: block;
  margin-top: -0.8em;
  margin-left: 2.2em;
}


.navMenu li a{
  color: #000;
  font-weight: 600;
  display: block;
  padding-bottom: 0.5em;
}
.navMenu li a:hover{
  color: #15cb04;
  border-bottom: 2px solid #15cb04;
}

.navMenu{
  display: none;
}

/*################## MENU MOVIL ###################*/
.ocm{position:relative; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif}

.ocm__toggle{
  appearance:none;
  border:1px solid #e2e8f0;
  background: #189E56;
  background: linear-gradient(90deg, rgba(24, 158, 86, 1) 0%, rgba(30, 128, 160, 1) 56%, rgba(36, 102, 226, 1) 100%);
  border-radius:10px;
  padding:.5rem .75rem;
  font-weight:600;
  cursor:pointer; 
  float: right; 
  margin-top: 40px;
  color: #fff;
}

.ocm__toggle:hover{background:#047857; }


/* Overlay */
.ocm__overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:998;opacity:0;transition:opacity .2s ease}
.ocm__overlay.is-open{opacity:1}


/* Panel */
.ocm__panel{position:fixed;left:0;top:0;height:100vh;width:300px;max-width:88vw;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.2);z-index:999;transform:translateX(-110%);transition:transform .25s ease}
.ocm__panel.is-open{transform:translateX(0); text-align: center;}
.ocm__panel{padding:12px}
.ocm__link{display:block;padding:.6rem .7rem;border-radius:8px;color:#0f172a}
.ocm__link:hover{background:#f1f5f9}
.ocm__cta{display:block;margin-top:.5rem;background:#059669;color:#fff;text-align:center;padding:.65rem .75rem;border-radius:10px;font-weight:700}
.ocm__cta:hover{background:#047857}

.nav li{
  padding-bottom: 1em;
}


/* Desktop: show inline simple nav (optional). Hide toggle if you already have a main menu. */
@media (min-width: 768px){
.ocm{display:flex;gap:1rem;align-items:center}
.ocm__panel{position:static;height:auto;width:auto;transform:none;box-shadow:none;background:transparent;display:flex;gap:.5rem;padding:0}
.ocm__link{padding:.25rem .5rem}
.ocm__overlay{display:none}
}

/*#################################################*/



.btnCotizacion{
  margin-top: -0.5em;
  margin-right: 1.5em;
  padding: 0.6em;
  border-radius: 0.5em;
  background: #189E56;
  background: linear-gradient(90deg, rgba(24, 158, 86, 1) 0%, rgba(30, 128, 160, 1) 56%, rgba(36, 102, 226, 1) 100%);
  color: #fff !important;
}

.heroContainer{
  text-align: center;
  padding: 5em 0.5em;
  background: #189E56;
background: linear-gradient(297deg,rgba(24, 158, 86, 1) 0%, rgba(36, 102, 226, 1) 45%, rgba(24, 158, 86, 1) 100%);
color: #fff;
}
  
.ecologico{
  width: 70%;
  display: block;
  padding: 1em;
  border: #fff solid 0.01em;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
  border-radius: 2em;
  background: #5186BB;
  margin: 0em auto 3em auto;
  font-size: 1.2em;
  color: #fff;
  font-weight: 600;

}

.ecologico:hover{
  background-color: #004964;
  transition: 900ms ease-in-out;
  box-shadow: 2px 2px 20px rgba(0,0,0,0.4);
  translate: 0px -3px;
}

.heroBanner h2{
  font-size: 2.5rem;
  margin-bottom: 0.9em;
  font-weight: bold;

}

.profesional{
   color:#D5E569;
}

.heroSlogan{
  width: 90%;
  margin: 0em auto 2em auto;
  font-size: 1.2rem;
  text-align: center;

}

.heroBanner button{
  padding: 1em 2em;
  border-radius: 0.5em;
  border: 1px solid #333;
  background: #fff;
  color: #15cb04;
  font-size: 1rem;
  font-weight: 600;

}

.heroBanner > button{
  margin-bottom: 1em;

}

.heroBanner > button:hover{
  background-color: rgba(0,227,0,0.15);
  color: #fff;
  transition: 1s ease-in-out;
 
  
}

.btn1 .fa-solid{
  color: #000;
  margin-right: 0.5em;
}

.bottomContainer{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 2.5em;
  padding: 3em 1em;
  margin-top: 3em;
  line-height: 1.5em;
  font-size: 0.8em;
}

.bottomContainer a{
  color: #fff;
}

.bottomContainer h3{
  color:  #15cb04;
}


.logoPiePagina{
  width: 300px;
}

.logoPiePagina p{
  padding-top: 1em;
}





.servicesHeader{
  text-align: center;
  margin: 2em 2em ;

}

.servicesHeader h2{
  font-size: 2rem;
  margin-bottom: 0.5em;
  font-weight: bold;
}

 .cards_container {
                display: flex;
                flex-direction: column;
                gap: 20px;
                justify-content: center;
                margin-top: 5em;
            }
            .card {
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                width: 90%;
                margin: auto;
                overflow: hidden;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                padding: 1em;
            }

           

            .card ul{
              padding: 0em 1.5em;
              margin: 1.6em 0em;

            }

            .card ul li::before{
              padding: 0.3em 0em;
              position: relative;
              content: "✔";
              margin: 0em 1em;
              color: #22c55e;
            }

             .card .fa-solid{
                color: #15cb04;
                font-size: 5rem;
                margin-bottom: 0.3em;
                text-align: center;
                display: block;
                margin: auto;
                text-shadow: linear-gradient(297deg,rgba(24, 158, 86, 1) 0%, rgba(36, 102, 226, 1) 45%, rgba(24, 158, 86, 1) 100%) 1px 1px 10px;
              

            }
            .card:hover {
                transform: translateY(-10px);
                box-shadow: 0 8px 15px rgba(0,0,0,0.2);
            }
            .card img {
                width: 100%;
                height: auto;
            }
            .card h3 {
                font-size: 1.5em;
                margin: 15px 0;
                text-align: center;
            }
            .card p {
                padding: 0 15px 15px;
                color: #555;
            }
            .btn4 {
                margin: 15px auto;
                display: block;
                width: 80%;
                text-align: center;
                padding: 10px 20px;
                background-color: #22c55e;
                color: white;
                text-decoration: none;
                border-radius: 5px;
                transition: background-color 0.3s ease;
            }
            .btn4:hover {
                background-color: #0c7e36;
            }

             .card-2{
                width:90%;
                overflow: hidden;
                padding: 1em;
                text-align: center;
            }

             .card-2 ul{
              padding: 0em 1.5em;
              margin: 1.6em 0em;

            }

           

             .card-2 .fa-solid{
                color: #15cb04;
                font-size: 5rem;
                margin-bottom: 0.3em;
                text-align: center;
                display: block;
                margin: auto;
                text-shadow: linear-gradient(297deg,rgba(24, 158, 86, 1) 0%, rgba(36, 102, 226, 1) 45%, rgba(24, 158, 86, 1) 100%) 1px 1px 10px;
              

            }
           
            .card-2 img {
                width: 35%;
                display: block;
                margin: auto;
                height: auto;
            }
            .card-2 h3 {
                font-size: 1.2em;
                margin: 15px 0;
                text-align: center;
            }
            .card-2 p {
                padding: 0 15px 15px;
                color: #555;
            }


.reachOut{
               
                margin-top: 50px;
                padding: 3em;
                background: #2466E3;
                background: linear-gradient(297deg,rgba(36, 102, 227, 1) 19%, rgba(23, 161, 78, 1) 100%);
                color: #fff;
            }
            .reachOut ul{
                list-style: none;
                text-align: center;
                display: flex;
                flex-direction: column;
                gap: 2em;
                justify-content: center;
            }
            .reachOut ul li h4{
                font-size: 3em;
                margin-bottom: 10px;
                font-weight: bold;
            }
            .reachOut ul li p{
                font-size: 1em;
            }


.card-3 {
                
                border-radius: 10px;
                padding: 20px;
                width: 80%;
                margin: auto;
            }
            .card-3 h2{
                color: #27ae60;
            }
           
             .card-3 ul{
                margin: 2em;
                
            }
            .card-3 ul li{
                margin-bottom: 10px;
                
            }

            .checkMark li{
                list-style: list-style-image url('http://localhost/bj/images/check-mark%20(2).png');
                position: relative;
                padding-left: 20px;
            }
            .starMark li{
                list-style: list-style-image url('http://localhost/bj/images/star-mark.png');
                position: relative;
                padding-left: 20px;
            }
            .btn3{
                display: inline-block;
                padding: 10px 20px;
                background-color: #27ae60;
                color: white;
                border-radius: 5px;
                text-decoration: none;
                font-weight: bold;
                margin-bottom: 15px;
            }
.background-gradiente{
  background: #189E56;
  background: linear-gradient(297deg,rgba(24, 158, 86, 1) 0%, rgba(36, 102, 226, 1) 45%, rgba(24, 158, 86, 1) 100%);
  overflow: hidden;
  color: #fff;
  margin: 2em oem;
}

.background-gradiente h2{
  color: #fff;
  font-size: 2em;
}


.four_cards_container{
                display: flex;
                flex-direction: column;
                width: 90%;
                margin: 3em auto;
                flex-wrap: wrap;
            }

            .cards_content{
                display: flex;
                flex-direction: column;
                gap: 2em;
                justify-content: center;
                margin-bottom: 2em;
           
                
            }

            .card-4{
                background-color: #fff;
                padding: 1.6em;
                border-radius: 12px;
                width: 80%;
                margin: auto;
                box-shadow: 1px 4px 15px #737373;
            }

            .card-4 h3{
                margin-bottom: 1em;
            }


 .icon-1{
  display: block;
  padding: 0.2em;
  width: 60px;
  background: linear-gradient(297deg,rgba(24, 158, 86, 1) 0%, rgba(36, 102, 226, 1) 45%, rgba(24, 158, 86, 1) 100%);
  color: #fff;
  font-size: 2em;
  text-align: center;
  margin: 0em 0.5em 0em 0em;
  border-radius: 12px;
 }

 .inviteToJoin{
  width: 75%;
  padding: 3em;
  border-radius: 12px;
  text-align: center;
  margin: 0em auto 2em auto;
  color: #fff;
  background: linear-gradient(297deg,rgba(24, 158, 86, 1) 0%, rgba(36, 102, 226, 1) 45%, rgba(24, 158, 86, 1) 100%);
 }

  .inviteToJoin h2{
    font-size: 1.6em;
  }


 .primaryButn .fa-solid{
  margin-right: 0.5em;
 }




 /*#################### ESTILOS PARA LA TABULACION DE SERVICIOS ##############*/


  .wrap { max-width: 1100px; margin: 32px auto 56px; padding: 0 16px; }

    .heading {
      margin: 5em 0em;
      text-align: center;
    }
    .heading h1 { margin:0; font-size: clamp(22px, 4vw, 32px); font-weight: 800; }
    .heading p { margin:6px 0 0;  }

    /* ===== Tabs ===== */
    .tabs {
      position: relative;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: calc(var(--radius) + 8px);
      padding: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }

    /* Toggle (solo móvil) */
    .tabs-toggle { display: none; align-items:center; gap:8px; width:100%;
      background: rgba(255,255,255,.06); color: var(--text);
      border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
      padding: 12px 14px; font-weight: 700; cursor: pointer; }
    .tabs-toggle svg { width:18px; height:18px; }

    /* Fila de pestañas */
    .tab-row {
      display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
      margin-top: 0;
    }
   .tab-btn {
      position: relative; 
      appearance:none; 
      border:none; 
      background: transparent; 
      color: var(--text);
      font-weight: 600; 
      padding: 14px 14px; 
      border-radius: var(--radius); cursor: pointer;
      transition: transform .15s ease, color .2s ease, background .2s ease;
      outline: none;
      z-index: 1;
    }

    .tab-btn .fa-solid{
      margin-right: 0.5em;
      color: #15cb04;
    }
    .tab-btn:hover { color: #050404; background: rgba(182, 19, 19, 0.05); }
    .tab-btn[aria-selected="true"] { color: #070606; }

    /* Indicador (solo desktop/tablet) */
    .tabs-indicator { position:absolute; height: 46px; top: 10px; left: 10px; width: 0;
      background: linear-gradient(135deg, rgba(122,162,255,.18), rgba(155,255,209,.18));
      border: 1px solid rgba(122,162,255,.35); border-radius: var(--radius);
      box-shadow: 0 10px 30px rgba(122,162,255,.15); transition: transform .35s cubic-bezier(.22,1,.36,1), width .35s cubic-bezier(.22,1,.36,1);
      pointer-events: none; }

    /* Panels */
    .panels { margin-top: 16px; }
    /*.panel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
      border-radius: calc(var(--radius) + 4px); padding: 18px; box-shadow: 0 10px 35px rgba(0,0,0,.35); }
      */

    .grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }

       .service-card {
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      padding: 18px; position: relative; overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      background-color: #fff;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .service-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35); border-color: rgba(122,162,255,.4); }
    .service-card h3 { margin: 10px 0 8px; font-size: 18px; }
    

    .badge {
      display:inline-flex; align-items:center; gap:8px; font-size: 1.5em; font-weight: bold;
      color: var(--color-secondary); padding: 1.5em 0em 0em 0em; 
      
    }
    .badge svg { width: 14px; height: 14px; }

       .service-card h3 { margin: 10px 0 8px; font-size: 1.5em; }
    .mainBenefit-card h3 { margin: 10px 0 8px; font-size: 1.5em; color: #000;}
    .service-card p { margin: 0;  line-height: 1.5; }
    .service-card ul { margin: 10px 0 0 18px; padding: 0;  }
    .service-card ul li{line-height: 1.5em; }
    .mainBenefit-card { margin: 10px 0 0 18px; padding: 0;  }
   .mainBenefit-card ul li{line-height: 1.5em; }
    .service-card .fa-solid{padding-right: 0.5em; color: #0c7e36; font-size: 1.6em;}
    .mainBenefit-card .fa-solid{padding-right: 0.5em; color: #f8f005; font-size: 1.6em; font-size: 0.7em; text-align: center center;}

    .mainBenefit-card{
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      padding: 18px; position: relative; overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    
     
    }

    /* Aparición suave */
    .panel.reveal .service-card { opacity: 0; transform: translateY(8px); }
    .panel.reveal .service-card { animation: fadeUp .45s ease forwards; }
    .panel.reveal .service-card:nth-child(1) { animation-delay: .02s; }
    .panel.reveal .service-card:nth-child(2) { animation-delay: .12s; }
    @keyframes fadeUp { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }

    /* Utils */
    [hidden] { display: none !important; }

    /* ------- Móvil ------- */
    @media (max-width: 640px) {
      .tabs { padding: 10px; }
      .tabs-toggle { display: inline-flex; }
      .tab-row { display: none; grid-auto-flow: row; }
      .tabs.is-open .tab-row { display: grid; margin-top: 8px; }
      .tab-btn { text-align: left; width: 100%; }
      .tabs-indicator { display: none; }
    }

    .contEsp{
      margin: 2em 0em;
      padding: 1em;
      background: #2A7B9B;
      background: linear-gradient(153deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%);
      color: #fff !important;
      border-radius: 12px;
    }
    .contEsp h3{color: #fff;}

    /* ###################### FIN DE TABULADOR DE SERVICIOS ##################*/


    .process-cards_container{
      display: flex;
      flex-direction: column;
      color: #fff;
      align-items: center;
      align-content: center;
      justify-content: center;
      gap: 2em;
      padding: 3em 0em;


    }

    .process-cards_container p{
      color: #fff;
    }
    .ProcessOrd{
      width: 80px;
      height: 80px;
      background: #15cb04;
      background: linear-gradient(90deg, rgba(21, 203, 4, 1) 0%, rgba(36, 102, 226, 1) 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      font-weight: 600;
      margin: auto;
    }

    .readyAction{
      width: 95%;
      padding: 3em;
      border-radius: 12px;
      text-align: center;
      margin: 4em auto 2em auto;
      color: #fff;
      background: linear-gradient(297deg,rgba(24, 158, 86, 1) 0%, rgba(36, 102, 226, 1) 45%, rgba(24, 158, 86, 1) 100%);
    }

     .readyAction h2{
      font-size: 1.6em;
    }

    .FormContent{
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5em;
      
      margin-top: 1em;
    }

    .contentLeft{
      background-color: #fff;
      padding: 2em;
      border-radius: 12px;
      box-shadow: 0px 4px 5px;
    }

    .contentRight{
      width: 90%;
      margin: auto;
    }

    .cardon{
      background-color: #fff;
      padding: 1em;
      box-shadow: #afaeae 0px 4px 6px;
    }

    

    .contactFormInfo{
      color: #fff;
     background: linear-gradient(297deg,rgba(24, 158, 86, 1) 0%, rgba(36, 102, 226, 1) 45%, rgba(24, 158, 86, 1) 100%);
     padding: 2em;
     border-radius: 12px;
    }

    .contactFormHeader .fa-regular{
      margin-right: 1em;
      font-size: 1.5em;
      color: green;


    }
    .contactFormInfo h3{
      display: flex;
      align-items: center;
      margin: 0em 0em 1em 0em;

    }

    .contactFormInfo img{
      width: 1.8em;
    }

      .contactFormInfo ul{
     margin: 2em 2em;

    }

     .contactFormInfo ul li{
      padding: 0em 0em 0.5em 0em;

    }

    .cf-control-input-desc{
      color: #e98605 !important;
      font-weight: bold;
    }

    .EmergencyInfo{
      margin: 2em 0em;
      background-color: #fff;
      padding: 2em;
      box-shadow: 0px 6px 8px;
      border-radius: 12px;

    }

    .EmergencyInfo h3{
      margin: 0em 0em 2em 0em;
    }

    .EmergencyInfo .fa-solid{
      margin-right: 0.5em;
      color: red;
    }
    .EmergencyInfo ul{
      margin: 0.5em 0em 0em 2em;
      list-style-type: disc;
    }

    .EmergencyInfo ul li{
      line-height: 1.2em;
    }

    .callToAction{
      display: flex;
      justify-content: center;
      padding: 1.2em;
      margin-top: 1em;
      background-color: red;
      color: #fff;
      border-radius: 12px;
      font-weight: bold;
    }

    .callToAction .fa-solid{
      color: #fff;
    }




            
          
          

.footerContainer{
  background-color: #111827;
  color: #fff;
  padding: 2em 1em;
  margin-top: 3em;
}
.footer1{
  text-align: center;
  border-top: #fff solid 0.001em;
  padding-top: 2em;
  font-size: 0.7em;
}

.footer2{
  display: none;
}












@media screen and (min-width: 768px) {


  .top_ContainerInfo{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0em 1em;
  }

  
  .contactInfo{
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  margin: 0em;
}

.topCityInfo ul{
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.navigationContainer{
  display: flex;
  align-items: center;
  
}

.navMenu{
  display: flex;
  gap: 1.5em;
  order: 2;
  flex: flex-end;
  justify-self: end;
  margin-left: auto;
}


/*################### ESTILOS PARA MENU ######################*/


          .ocm{position:relative; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif}
.ocm__toggle{appearance:none;border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:.5rem .75rem;font-weight:600;cursor:pointer}
.ocm__toggle:hover{background:#f1f5f9}


/* Overlay */
.ocm__overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:998;opacity:0;transition:opacity .2s ease}
.ocm__overlay.is-open{opacity:1}


/* Panel */
.ocm__panel{position:fixed;left:0;top:0;height:100vh;width:300px;max-width:88vw;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.2);z-index:999;transform:translateX(-110%);transition:transform .25s ease}
.ocm__panel.is-open{transform:translateX(0)}
.ocm__panel{padding:12px}
.ocm__link{display:block;padding:.6rem .7rem;border-radius:8px;color:#0f172a}
.ocm__link:hover{background:#f1f5f9}
.ocm__cta{display:block;margin-top:.5rem;background:#059669;color:#fff;text-align:center;padding:.65rem .75rem;border-radius:10px;font-weight:700}
.ocm__cta:hover{background:#047857}







  .card ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

/* 2) Reserva espacio para el pseudo-elemento */
.card ul li {
  position: relative;
  padding-left: 1.5rem; /* ajusta 1.25–1.75rem según tu diseño */
}

/* 3) Dibuja el “bullet” sin empujar el texto */
.card ul li::before {
  content: "";                 /* o "\2022" si quieres el punto Unicode */
  position: absolute;
  left: 0;                     /* se alinea con el borde del li */
  top: 0.7em;                  /* centra verticalmente (ajústalo a tu tipografía) */
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;    /* mismo color que el texto */
}





  


/* Desktop: show inline simple nav (optional). Hide toggle if you already have a main menu. */
@media (min-width: 768px){
.ocm{display:flex;gap:1rem;align-items:center}
.ocm__panel{position:static;height:auto;width:auto;transform:none;box-shadow:none;background:transparent;display:flex;gap:.5rem;padding:0}
.ocm__link{padding:.25rem .5rem}
.ocm__overlay{display:none}
}



/*####################################################*/


.btnCotizacion{
  margin-top: -0.5em;
  margin-right: 1.5em;
  padding: 0.6em;
  border-radius: 0.5em;
  background: #189E56;
  background: linear-gradient(90deg, rgba(24, 158, 86, 1) 0%, rgba(30, 128, 160, 1) 56%, rgba(36, 102, 226, 1) 100%);
  color: #fff !important;
}

.heroContainer{
  text-align: center;
  padding: 5em 0em;
  background: #189E56;
background: linear-gradient(297deg,rgba(24, 158, 86, 1) 0%, rgba(36, 102, 226, 1) 45%, rgba(24, 158, 86, 1) 100%);
color: #fff;
}
  
.ecologico{
  width: 20%;
  display: block;
  padding: 1em;
  border-radius: 2em;
  background: #5186BB;
  margin: 0em auto 3em auto;
  font-size: 1.2em;
  color: #fff;
  font-weight: 600;

}

.heroBanner h2{
  font-size: 3.7rem;
  margin-bottom: 0.9em;
  font-weight: bold;

}

.profesional{
   color:#D5E569;
}

.heroSlogan{
  width: 52%;
  margin: 0em auto 2em auto;
  font-size: 1.6rem;
  text-align: center;

}

.heroBanner button{
  padding: 1em 2em;
  border-radius: 0.5em;
  border: 1px solid #333;
  background: #fff;
  color: #15cb04;
  font-size: 1.2rem;
  font-weight: 600;

}

.heroBanner > button{
  margin-right: 1.5em;

}

.heroBanner > button:hover{
  background-color: rgba(0,227,0,0.15);
  color: #fff;
  transition: 1s ease-in-out;
 
  
}

.ocm__toggle{
  display: none;
}

.bottomContainer{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2em;
}

.cards_container {
                display: flex;
                flex-direction: row;
                width: 80%;
                margin: 3em auto;
            }


 .card {
         width: 30%;
               
            }

  .card-2{
                width:20%;
                overflow: hidden;
                padding: 1em;
                text-align: center;

}

.reachOut ul{
               
            
                flex-direction: row;
               
            }


            .card-3 {
                
                border-radius: 10px;
                padding: 20px;
                width: 50%;
                margin: auto;
            }

             .cards_content{
                flex-direction: row;
                margin: 3em 0em;
               
           
                
            }


    .process-cards_container{
      flex-direction: row;


    }

    .readyAction{
      width: 70%;
    }

    .FormContent{
      display: flex;
      flex-direction: row;
      gap: 1em;
      margin: 2em auto;
      width: 80%;
    }

     .contentRight{
      width: 50%;
    }

          }