/*!
 * Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    font-family: 'Raleway', sans-serif;
}

html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
        transition: background .5s ease-in-out, padding .5s ease-in-out;
    }
    .top-nav-collapse {
        padding: 0;
    }
}

.navbar-default .navbar-toggle {
    border-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}


/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

.lead {
    margin-bottom: 21px;
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.4;
    font-weight: 700;
}

h1,
.h1 {
    font-size: 3em;
    font-weight: 400;
}

.badge {
    background-color: white;
    color: #da0000;
    margin: 10px 0 !important;
    margin-left:20px !important;
    cursor:pointer;
}

.navbar .navbar-nav .btn-danger {
    margin:10px 0 !important;
}

.btn-default {
    color: #ffffff;
    background-color: transparent;
    border: 2px solid #fff;
}

.btn-lg,
.btn-group-lg > .btn {
    padding: 18px 30px;
    font-size: 19px;
    line-height: 1.3333333;
    border-radius: 0;
}

.navbar-default {
    background-color: transparent;
    border-color: transparent;
}

.navbar-brand {
    float: left;
    padding: 14.5px 15px;
    font-size: 19px;
    line-height: 21px;
}

.navbar-default .navbar-brand {
    color: #FFF;
    font-weight: 700;
    letter-spacing: 1px;
}

.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover {
    color: #5C0B0D;
    background-color: transparent;
}

.navbar-default .navbar-nav > li > a {
    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 10px;
    font-size: 1.1rem !important;
}

.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 30px;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #B71C1C;
    background-color: #6C0000;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #6C0000;
    cursor: pointer;
    font-weight: 700;
    -webkit-transition: background 0.5s ease-in;
    -moz-transition: background 0.5s ease-in;
    -ms-transition: background 0.5s ease-in;
    -o-transition: background 0.5s ease-in;
    transition: background 0.5s ease-in;
}

nav.navbar.navbar-default.navbar-fixed-top.top-nav-collapse {
    background-color: #B71C1C !important;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.22);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.22);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}


/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

.panel {
    margin-bottom: 21px;
    background-color: #ffffff;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.intro-section {
    height: 700px;
    padding-top: 150px;
    color: #fff;
    background: url(../img/bg-ingenet.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.intro-section a {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1em;
}

.btn-default {
    color: #ffffff;
    background-color: transparent;
    border: 2px solid #fff;
}

.btn-default:hover {
    color: #A4141B !important;
    background-color: #fff;
    border: 2px solid #fff;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.how-section .panel {
    margin-top: -50px;
    padding: 100px;
    background: rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(240, 240, 240, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0);
}

.how-section h2 {
    font-size: 42px;
    color: #da0000;
    font-weight: 500;
    text-align: right;
}

.how-section h4 {
    font-size: 18px;
    line-height: 1.5em;
    color: #393535;
    font-weight: 500;
}

.how-section {
    text-align: center;
    background: #f0f0f0;
}

.services-section {
    background: #fff;
    color: white;
    line-height: 2em;
}

.services-section h3 {
    line-height: 1.5em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

/* Efecto hover para las cajas de servicios */
.services-section [class*="service-"] {
    transition: all 0.3s ease-in-out;
}

.services-section [class*="service-"]:hover {
    transform: translateY(-10px); /* Ligeramente hacia arriba */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.service-01 {
    background-color: #b71b1c;
    background-image: url(../img/services1.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 80px;
    min-height: 600px;
}

.service-02 {
    background-color: #da0000;
    background-image: url(../img/services2.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 80px;
    min-height: 600px;
}

.service-03 {
    background-color: #ff2524;
    background-image: url(../img/services3.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 80px;
    min-height: 600px;
}

.services-content {
    margin-top: -50px;
    margin-bottom: 50px;
    z-index: 10;
    position: relative;
}

.services-content h2 {
    color: #BC000C;
    font-weight: 400;
    font-size: 2em;
}

.services-content .panel {
    padding: 100px;
    padding-bottom: 0px;
    background: rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(240, 240, 240, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0);
}

.services-content ul li {
    list-style-type: none;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 50px;
    color: #979797;
}

.services-content .izq {
    padding-right: 40px;
}

.services-content .row.vertical-divider {
    overflow: hidden;
}

.services-content .row.vertical-divider > div[class^="col-"] {
    text-align: center;
    border-left: 2px solid #979797;
}

.services-content .row.vertical-divider div[class^="col-"]:first-child {
    border-left: none;
}

.services-content .row.vertical-divider div[class^="col-"]:last-child {
    border-right: none;
}

.how-section ul {
  list-style-type: none;
  padding-left: 0;
  line-height: 1.8em;
  font-weight: 500;
  color: #333;
}

.how-section h4 {
  margin-bottom: 15px;
  color: #b71c1c;
  text-transform: uppercase;
  font-weight: 700;
}


/* ====== Ajustes Responsivos para los Modales ====== */
.modal-responsive {
  width: 96%;
  margin: 10px auto;
  max-width: 1200px; /* puedes ajustar hasta 1400px si quieres más ancho */
}

@media (min-width: 768px) {
  .modal-responsive { width: 92%; }
}

@media (min-width: 992px) {
  .modal-responsive { width: 88%; }
}

@media (min-width: 1200px) {
  .modal-responsive { width: 85%; }
}

/* Scroll interno para contenido largo */
.modal-responsive .modal-body {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

/* Asegurar que las imágenes sean fluidas */
.modal-responsive img {
  width: 100%;
  height: auto;
  display: block;
}

/* Evitar scroll brusco al abrir modal */
.modal { 
  overflow-y: auto;
}

.exp-section {
    height: auto !important;
    min-height: 0;
    background: url(../img/exp-bg.jpg) right center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 30%;
    color: #fff;
    padding-top: 30px;
    background-color: #BD2325;
}

.exp-section h2 {
    font-size: 2.5em;
    margin-top: -8px;
    font-weight: 400;
}

.exp-section .btn {
    border: 2px solid #fff;
    padding: 20px 50px;
}

.exp-section a {
    color: #fff;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 700;
}

.exp-section .btn:hover {
    border: 2px solid #fff;
    background: #fff;
    color: #BD2325;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.exp-section h2, .exp-section h4, .exp-section h5 {
  color: #fff;
}

.exp-section ul {
  list-style-type: disc;
  margin-left: 20px;
  color: #fff;
}

.exp-section p {
  color: #fff;
}

.exp-section em, .exp-section p[style*="italic"] {
  color: #ffebee;
}


.customers-section {
    height: auto;
    padding: 50px 0px;
    background-color: #3D2D2D;
    color: #fff;
    text-align: center;
}

.customers-section img {
    padding: 10px;
}

.customers-section .viewall {
    margin-top: 20px;
    text-transform: uppercase;
}

/* Efecto hover para los logos de clientes */
#customers .img-responsive {
    transition: all 0.1s ease-in-out;
    filter: grayscale(80%); /* Inicia en escala de grises */
}

#customers .img-responsive:hover {
    transform: scale(1.1); /* Ligeramente más grande */
    filter: grayscale(0%);   /* Vuelve al color original */
}

/* Estilos para el Carrusel de Clientes (Slick) */
.customer-carousel .slick-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 140px;          /* alto del “box” que contendrá el logo */
    margin: 0 12px;         /* ya lo tenías, lo reafirmamos */
}

.customer-carousel .slick-slide img {
    width: auto;
    max-height: 200px; /* Altura fija para alinear todos los logos verticalmente */
    object-fit: contain; /* Asegura que el logo se vea bien sin deformarse */
    margin: 0 auto; /* Centra la imagen dentro de su contenedor */
}

/* Asegura alineación vertical del track completo */
.customer-carousel .slick-track {
  display: flex !important;
  align-items: center;
}

/* Flechas (mostrar y estilizar para tu fondo #3D2D2D) */
.customer-carousel .slick-prev,
.customer-carousel .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 2px solid #fff;
  color: #fff;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
}

/* ——— Flechas Slick: quitar tema y dibujar nuestra flecha ——— */

/* Botón limpio (solo borde) */
.customer-carousel .slick-prev,
.customer-carousel .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent !important;   /* sin fondo */
  border: 2px solid #fff;
  color: #fff;                          /* color de la flecha */
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}

/* MATA el pseudo-elemento del tema (que te generaba el círculo/fondo raro) */
.customer-carousel .slick-prev::before,
.customer-carousel .slick-next::before {
  content: none !important;
}

/* Nuestra flecha (SVG como máscara) */
.customer-carousel .slick-prev::after,
.customer-carousel .slick-next::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;       /* toma el color del botón */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* SVG izquierda */
.customer-carousel .slick-prev::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>");
}

/* SVG derecha */
.customer-carousel .slick-next::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
}

/* Hover: invertimos colores (fondo blanco, flecha oscura) */
.customer-carousel .slick-prev:hover,
.customer-carousel .slick-next:hover {
  background: #fff !important;
  color: #3D2D2D; /* la flecha hereda este color */
}

/* Posición lateral */
.customer-carousel .slick-prev { left: -55px; }
.customer-carousel .slick-next { right: -55px; }

/* Móvil: si las flechas molestan, ocúltalas */
@media (max-width: 576px) {
  .customer-carousel .slick-prev,
  .customer-carousel .slick-next { display: none !important; }
}


.viewall a {
    color: #fff;
    font-weight: 700;
    border: 2px solid #fff;
    padding: 15px 50px;
    letter-spacing: 1px;
    font-size: 1em;
}

.viewall a:hover {
    background: #fff;
    color: #3D2D2D;
    font-weight: 700;
    border: 2px solid #fff;
    padding: 15px 50px;
    letter-spacing: 1px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.contact-section {
    text-align: center;
    background: #eee;
}

.contact-section .content {
    background: #BD2225;
    height: 600px;
    padding: 50px 10px;
}

.contact-section .content h1 {
    text-transform: uppercase;
    color: #fff;
    text-align: left;
    margin-bottom: 30px;
}

.contact-section .map {
    background: #E8E8E8;
    height: 600px;
}

.contact-section .map #fly {
    position: relative;
    margin: 0px auto;
    width: 100px;
    padding: 10px;
    margin-top: 15px;
    height: 40px;
    border: none;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    background: #B71C1C;
    z-index: 4;
    font-size: 1.5em;
}

.contact-section .content button:hover {
    margin-top: 30px;
    background: white;
    color: #BD2225;
    text-transform: uppercase;
    font-weight: 700;
    border: 2px solid #fff;
    padding: 10px 40px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.contact-section button {
    margin-top: 30px;
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    border: 2px solid #fff;
    padding: 10px 40px;
}

.form-control-work {
    display: block;
    width: 100%;
    height: 43px;
    padding: 0;
    padding-left: 15px;
    font-size: 15px;
    line-height: 1.42857143;
    color: #495057; 
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    text-transform: uppercase;
}

.form-control-area {
    display: block;
    width: 100%;
    
    padding: 0;
    padding-left: 15px;
    font-size: 15px;
    line-height: 1.42857143;
    color: #495057; 
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control {
    display: block;
    width: 100%;
    height: 43px;
    padding: 30px;
    font-size: 15px;
    line-height: 1.42857143;
    color: #fff;
    background-color: #9C1114;
    border: 1px solid #9C1114;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    text-transform: uppercase;
}

input[type="text"]::-webkit-input-placeholder {
    color: white !important;
}

input[type="text"]:-moz-placeholder {
    /* Firefox 18- */
    color: white !important;
}

input[type="text"]::-moz-placeholder {
    /* Firefox 19+ */
    color: white !important;
}

input[type="text"]:-ms-input-placeholder {
    color: white !important;
}


/**/

input[type="email"]::-webkit-input-placeholder {
    color: white !important;
}

input[type="email"]:-moz-placeholder {
    /* Firefox 18- */
    color: white !important;
}

input[type="email"]::-moz-placeholder {
    /* Firefox 19+ */
    color: white !important;
}

input[type="email"]:-ms-input-placeholder {
    color: white !important;
}


/**/

textarea::-webkit-input-placeholder {
    color: white !important;
}

textarea:-moz-placeholder {
    /* Firefox 18- */
    color: white !important;
}

textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: white !important;
}

textarea:-ms-input-placeholder {
    color: white !important;
}

textarea {
    resize: none;
}

.footer-section .logo {
    background: #fff;
    display: flex;                 /* center it vertically */
    align-items: center;           /* center it vertically */
    justify-content: center;       /* center it horizontally */
    min-height: 200px;             /* match the height of your address box */
    padding: 20px;
}

#footer .logo img {
    display: block;        /* same as .center-block */
    max-width: 100%;       /* never wider than its container */
    height: auto;          /* keep aspect ratio */
    max-height: 260px;     /* tweak this to taste */
}

.footer-section .address {
    background: #A4141B;
    height: 300px;
}

.footer-section .address .breadcrumb {
    margin-left: 30px;
    margin-top: 30px;
    margin-bottom: 10px;
    list-style: none;
    background-color: transparent;
    border-radius: 0;
}

.footer-section .address a {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1em;
    margin-right: 30px;
    text-decoration: none;
}

.footer-section .address h3 {
    color: #fff;
    font-size: 1em;
    font-weight: 700;
}

.footer-section .address p {
    color: #fff;
    font-size: 1em;
    font-weight: 400;
}

.footer-section .sucursal {
    margin-top: 30px;
    margin-right: 20px;
}

.footer-section .breadcrumb > li + li:before {
    content: none;
}

.footer-section .line {
    border-bottom: 4px solid #961822;
}

/* Mantén siempre barra vertical para que nunca cambie el ancho del viewport */
html { overflow-y: scroll; }

/* SM */

@media(max-width:991px) {
    .services-section {
        background: #fff;
        color: white;
        line-height: 2em;
    }
    .services-section h3 {
        line-height: 1em;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 20px;
    }
    .services-section p {
        line-height: 2em;
        font-size: 1em;
    }
    .service-01 {
        background-color: #b71b1c;
        background-image: url(../img/services1.png);
        padding: 20px;
        min-height: 600px;
    }
    .service-02 {
        background-color: #da0000;
        background-image: url(../img/services2.png);
        padding: 20px;
        min-height: 600px;
    }
    .service-03 {
        background-color: #ff2524;
        background-image: url(../img/services2.png);
        padding: 20px;
        min-height: 600px;
    }
    .services-content {
        margin-top: -50px;
        margin-bottom: 50px;
        z-index: 10;
        position: relative;
    }
    .exp-section h2 {
        font-size: 2.5em;
        margin-top: -10%;
        font-weight: 400;
        text-align: right
    }
    .exp-section .btn {
        border: 2px solid #fff;
        padding: 20px 50px;
        margin-top: 5%;
    }
    .contact-section .map {
        background: #E8E8E8;
        height: 400px;
    }
    .footer-section .logo {
        background: #fff;
        height: 420px;
        padding: 130px 10px;
    }
    .footer-section .address {
        background: #A4141B;
        height: 420px;
    }
    .footer-section .address .breadcrumb {
        margin-left: 0px;
        margin-top: 50px;
        margin-bottom: 10px;
        list-style: none;
        background-color: transparent;
        border-radius: 0;
    }
}


/* XS */

@media(max-width:800px) {
    .navbar-toggle {
        position: relative;
        float: right;
        margin-right: 15px;
        padding: 9px;
        margin-top: 8px;
        margin-bottom: 8px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 0;
    }
    navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        background-color: transparent;
    }
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        background-color: #80001C;
    }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        border-color: #A70025;
    }
    .nav > li {
        position: relative;
        display: block;
        text-align: center;
    }
    .intro-section {
        height: 700px;
        padding-top: 150px;
        color: #fff;
        background: url(../img/bg-ingenet.png) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
    }
    .intro-section a {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 1em;
    }
    .btn-default {
        color: #ffffff;
        background-color: transparent;
        border: 2px solid #fff;
        margin-top: 20px;
    }
    .btn-default:hover {
        color: #A4141B;
        background-color: #fff;
        border: 2px solid #fff;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
    }
    .how-section .panel {
        margin-top: 0px;
        padding: 10px;
        background: rgba(255, 255, 255, 1);
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(240, 240, 240, 1)));
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
        background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
        background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0);
    }
    .how-section h2 {
        font-size: 42px;
        color: #da0000;
        font-weight: 500;
        text-align: center;
    }
    .how-section h4 {
        font-size: 18px;
        line-height: 1.5em;
        color: #393535;
        font-weight: 500;
        text-align: center;
    }
    .how-section {
        text-align: center;
        background: #f0f0f0;
    }
    .services-section {
        background: #fff;
        color: white;
        line-height: 2em;
    }
    .services-section h3 {
        line-height: 1em;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 20px;
    }
    .services-section p {
        line-height: 2em;
        font-size: 1em;
    }
    .service-01 {
        background-color: #b71b1c;
        background-image: none;
        padding: 20px;
        min-height: 300px;
        text-align: center;
    }
    .service-02 {
        background-color: #da0000;
        padding: 20px;
        background-image: none;
        text-align: center;
        min-height: 300px;
    }
    .service-03 {
        text-align: center;
        background-color: #ff2524;
        background-image: none;
        padding: 20px;
        min-height: 300px;
    }
    .services-content {
        margin-top: -0px;
        margin-bottom: 50px;
        z-index: 10;
        position: relative;
        padding: 0px;
    }
    .services-content .izq {
        padding: 0px;
        text-align: center;
    }
    .services-content .drcha {
        text-align: center;
        padding: 0px;
    }
    .services-content .row.vertical-divider {
        overflow: hidden;
    }
    .services-content .row.vertical-divider > div[class^="col-"] {
        text-align: center;
        border-left: none;
        border-right: none;
    }
    .services-content .row.vertical-divider div[class^="col-"]:first-child {
        border-left: none;
    }
    .services-content .row.vertical-divider div[class^="col-"]:last-child {
        border-right: none;
    }
    .services-content .panel {
        padding: 10px;
        padding-bottom: 0px;
        background: rgba(255, 255, 255, 1);
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(240, 240, 240, 1)));
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
        background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
        background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0);
    }
    .exp-section {
        height: 348px;
        background: url(../img/exp-bg.jpg) no-repeat right center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        left: 30%;
        color: #fff;
        padding-top: 20%;
        background-color: #BD2325;
    }
    .exp-section h2 {
        font-size: 2em;
        margin-top: -8px;
        font-weight: 400;
        text-align: center;
    }
    .contact-section .map {
        background: #E8E8E8;
        height: 300px;
    }
    .contact-section .content h1 {
        text-transform: uppercase;
        color: #fff;
        text-align: left;
        font-size: 2em;
        margin-bottom: 30px;
    }
    .footer-section .address {
        background: #A4141B;
        height: 410px;
    }
    .footer-section .address .breadcrumb {
        margin-left: 30px;
        margin-top: 30px;
        margin-bottom: 10px;
        list-style: none;
        background-color: transparent;
        border-radius: 0;
        text-align: center;
    }
    .footer-section .address a {
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 1em;
        margin-right: 30px;
        text-decoration: none;
    }
    .footer-section .address h3 {
        color: #fff;
        font-size: 1em;
        font-weight: 700;
        text-align: center;
    }
    .footer-section .address p {
        color: #fff;
        font-size: 1em;
        font-weight: 400;
        text-align: center;
    }
    .footer-section .sucursal {
        margin-top: 30px;
        margin-right: 20px;
    }
    .footer-section .breadcrumb > li + li:before {
        content: none;
    }
}

/* --- Overrides finales de rutas y layout --- */
/* Rutas correctas: desde /public/css/ → /public/img/ */
.exp-section {
  background-image: url('../img/exp-bg.jpg') !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;

  /* Evita que pise la sección Clientes */
  height: auto !important;
  min-height: 0 !important;
  left: auto !important;
  padding: 50px 0 !important;
}

.service-01 { background-image: url('../img/services1.png') !important; }
.service-02 { background-image: url('../img/services2.png') !important; }
.service-03 { background-image: url('../img/services2.png') !important; }



/* ============================================================
   FIX slot logo footer - responsivo (aprobado en test-footer.html)
   Agregado al final para ganar por orden de cascada sobre las
   reglas previas dispersas en los @media 576/991/800.
   ============================================================ */
.footer-section { background:#A4141B; }
.footer-section .row { display:flex !important; flex-wrap:wrap; align-items:stretch; }

.footer-section .logo {
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  height:auto !important;
  min-height:320px !important;      /* desktop: espacio blanco garantizado */
}
.footer-section .logo img,
.footer-section .logo iframe {
  display:block;
  max-width:100% !important;
  max-height:260px;
  width:auto;
  height:auto;
}

.footer-section .address {
  background:#A4141B !important;
  height:auto !important;           /* deja que el flex iguale la altura */
}

@media (max-width:991px) {
  .footer-section .logo { min-height:280px !important; }
}
@media (max-width:767px) {
  /* mobile: las columnas se apilan */
  .footer-section .row { display:flex !important; flex-direction:column !important; }
  .footer-section .logo { min-height:240px !important; padding:16px !important; }
  .footer-section .address { min-height:auto !important; }
}
@media (max-width:576px) {
  .footer-section .logo { min-height:220px !important; }
}
/* ============ fin fix slot logo footer ============ */

/* ---- Dimensiones del iframe de la animacion dentro del slot ---- */
.footer-section .logo iframe.logo-anim {
  width:100% !important;
  height:300px !important;
  max-width:560px !important;
  max-height:none !important;
  border:0 !important;
  background:#fff;
}
@media (max-width:991px) {
  .footer-section .logo iframe.logo-anim { height:280px !important; }
}
@media (max-width:767px) {
  .footer-section .logo iframe.logo-anim { height:240px !important; }
}
/* ---- fin dimensiones iframe ---- */

/* "Trabaja con nosotros" como un item mas del menu: mismo alto que los demas links */
.navbar-nav > li.nav-trabaja > a .badge {
    margin: 0 !important;
    vertical-align: middle;
}

/* Los correos se muestran tal cual (la seccion de contacto pone el texto en mayusculas) */
.footer-section .address a[href^="mailto:"] {
    text-transform: none;
}

/* Logo (negativo, fondo transparente) en lugar del texto INGENET; mismo alto de 50px de la barra */
.navbar-brand.navbar-brand-logo {
    padding-top: 2px;
    padding-bottom: 2px;
}
.navbar-brand.navbar-brand-logo img {
    height: 46px;
    width: auto;
    display: block;
}
/* Con el menu compacto (fondo rojo solido) la mitad roja de la I se pierde:
   se usa la version monocroma blanca */
.navbar-brand.navbar-brand-logo img.logo-compacto,
.top-nav-collapse .navbar-brand.navbar-brand-logo img.logo-header {
    display: none;
}
.top-nav-collapse .navbar-brand.navbar-brand-logo img.logo-compacto {
    display: block;
}

/* Formulario de contacto: verificación (izquierda) y botón (derecha) en una misma fila */
.contacto-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
}
.contact-section .contacto-acciones button,
.contact-section .contacto-acciones button:hover {
    margin-top: 0;
}
.contacto-estado {
    margin-top: 15px;
    color: #fff;
    text-align: left;
}
/* El widget agrega alto: la caja crece en vez de cortar el botón */
.contact-section .content {
    height: auto;
    min-height: 600px;
}