/* Estilo FORMULARIO PRESUPUESTO */
form {
    display: flex;
    flex-direction: column;
}

input, textarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 16px;
    transition: border-color 0.3s;
    background-color: white;
    color: black;
}

input:focus, textarea:focus {
    border-color: #007bff;
    outline: none;
}

button {
    background-color: #8f0000;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.pdng50 {
    padding-left: 80px;
    padding-right: 50px;
}

.goldborder {
    border: 1px solid #c5a200;
}

textarea {
    resize: vertical; /* Permitir solo redimensionar verticalmente */
    min-height: 100px;
}
/* END Estilo FORMULARIO PRESUPUESTO */

.neonimg {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/*** Aplicar fuente personalizada en ***/
h1, h2, h3, h4, h5, h6, small {
  font-family: 'Orbitron', sans-serif;
}

#porbitron {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
}

#porbitronabout {
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1.8;
  word-spacing: 1px;
}

#pspacegrotesk {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
}

.justify {
  text-align: justify;
}

.navfw400 {
  font-weight: 400 !important;
}
/* End Aplicar fuente personalizada en */

html.loading body {
  visibility: hidden;
}
html:not(.loading) body {
  visibility: visible;
}

.hred {
  color: darkred;
}

/* SECCIÓN LOGOTIPOS */
.logotipos {
	height: auto !important;
	background-color: white !important;
	padding-left: 1%;
	border: solid 0.5px black;
}

.h100pc {
	height: 100%;
}

.mgr10pc {
	margin-right: 10%;
}

.h50px {
	height: 50px;
}

.h70px {
	height: 70px;
}

.bshade {
	box-shadow: rgb(255, 255, 255) 0px 1px 13px, rgba(255, 215, 0, 0.24) 110px 1px 112px;
}

/* NUEVO METODO PARA LOGOTIPOS DE HALLAZGOS */
/* Contenedor del slideshow */
.slideshow-container {
  width: 100%;
  height: 200px; /* Puedes ajustar la altura */
  overflow: hidden;
  position: relative;
  padding-right: 50%;
}

/* Contenedor de las imágenes (track) */
.slideshow-track {
  display: flex;
  transition: transform 1s ease-in-out; /* Aumenté la duración de la transición */
}

/* Cada imagen (slider) */
.slider {
  min-width: 100%; /* Cada imagen ocupa el 100% del contenedor */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Eliminamos margen entre imágenes */
  margin: 0;
}

/* Estilo adicional para las imágenes */
/* img {
  max-height: 100%;
  width: auto;
} */
/* END SECCION LOGOTIPOS */

/* FUENTES PERSONALIZADAS */
.fs20 {
  font-size: 20px;
}

@font-face {
  font-family: 'Orbitron';
  src: url('/fonts/orbitron/orbitron-light.otf') format('opentype'),
       url('/fonts/orbitron/orbitron-medium.otf') format('opentype'),
       url('/fonts/orbitron/orbitron-bold.otf') format('opentype'),
       url('/fonts/orbitron/orbitron-black.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Orbitron';
  src: url('/fonts/orbitron/orbitron-bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space_grotesk/SpaceGrotesk-Light.otf') format('truetype');
  font-weight: 300;  /* Light font weight */
  font-style: normal;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space_grotesk/SpaceGrotesk-Regular.otf') format('opentype');
  font-weight: 400;  /* Regular font weight */
  font-style: normal;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space_grotesk/SpaceGrotesk-Bold.otf') format('opentype');
  font-weight: 700;  /* Bold font weight */
  font-style: normal;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space_grotesk/SpaceGrotesk-SemiBold.otf') format('opentype');
  font-weight: 600;  /* SemiBold font weight */
  font-style: normal;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space_grotesk/SpaceGrotesk-Medium.otf') format('opentype');
  font-weight: 500;  /* Medium font weight */
  font-style: normal;
}
/* End FUENTES PERSONALIZADAS*/

.balancedwrap {
	text-wrap: balanced;
}

.nowrap {
	text-wrap: nowrap;
}

.w30 {
  width: 30%;
}

.w50 {
  width: 50%;
}

.mgleft10 {
  margin-left: 0px;
}

.left-text {
  text-align: left;
}

.w500px {
  width: 500px;
}

.w800px {
  width: 800px;
}

.margin10 {
  margin: 10%;
}

.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        /*-moz-user-select: none;*/
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      
     .b-example-divider {
        width: 100%;
        height: 3rem;
	margin: auto;
        #background-color: rgba(0, 0, 0, .1);
        background:#ffffffde;
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .a-example-divider {
        width: 100%;
        height: 8rem;
	background-image: url("/images/back_audit_ciber.webp");
	background-size: cover;
	background-position: center;
	background-attachment: fixed !important;
	background-repeat: no-repeat;
        #background-color: rgba(0, 0, 0, .1);
        #background:#ffffffde;
        border: solid rgb(132, 0, 0);
        border-width: 1px 0;
	box-shadow: rgba(62, 62, 62, 0.5) 0px 0px 55px;
	#box-shadow: rgb(62, 62, 62) 0px 0px 55px;
        #box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .c-example-divider {
        width: 100%;
        height: 8rem;
	background-image: url("/images/whitemb.webp");
	background-size: cover;
	background-position: center;
	background-attachment: fixed !important;
	background-repeat: no-repeat;
        #background-color: rgba(0, 0, 0, .1);
        #background:#ffffffde;
        border: solid rgb(132, 0, 0);
        border-width: 1px 0;
	box-shadow: rgba(62, 62, 62, 0.5) 0px 0px 55px;
	#box-shadow: rgb(62, 62, 62) 0px 0px 55px;
        #box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }
     
      .h-example-divider {
        width: 100%;
        height: 8rem;
	background-image: url("/images/back_hardening.webp");
	background-size: cover;
	background-position: center;
	background-attachment: fixed !important;
	background-repeat: no-repeat;
        #background-color: rgba(0, 0, 0, .1);
        #background:#ffffffde;
        border: solid rgb(132, 0, 0);
        border-width: 1px 0;
	box-shadow: rgba(62, 62, 62, 0.5) 0px 0px 55px;
	#box-shadow: rgb(62, 62, 62) 0px 0px 55px;
        #box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }
      
      .ad-example-divider {
        width: 100%;
        height: 8rem;
	background-image: url("/images/back_access_denied.webp");
	background-size: cover;
	background-position: center;
	background-attachment: fixed !important;
	background-repeat: no-repeat;
        #background-color: rgba(0, 0, 0, .1);
        #background:#ffffffde;
        border: solid rgb(132, 0, 0);
        border-width: 1px 0;
	box-shadow: rgba(62, 62, 62, 0.5) 0px 0px 55px;
	#box-shadow: rgb(62, 62, 62) 0px 0px 55px;
        #box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }
      
      .waf-example-divider {
        width: 100%;
        height: 8rem;
	background-image: url("/images/WAF.webp");
	background-size: cover;
	background-position: center;
	background-attachment: fixed !important;
	background-repeat: no-repeat;
        #background-color: rgba(0, 0, 0, .1);
        #background:#ffffffde;
        border: solid rgb(132, 0, 0);
        border-width: 1px 0;
	box-shadow: rgba(62, 62, 62, 0.5) 0px 0px 55px;
	#box-shadow: rgb(62, 62, 62) 0px 0px 55px;
        #box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      
      .rp-example-divider {
        width: 100%;
        height: 8rem;
	background-image: url("/images/back_breach.webp");
	background-size: cover;
	background-position: center;
	background-attachment: fixed !important;
	background-repeat: no-repeat;
        #background-color: rgba(0, 0, 0, .1);
        #background:#ffffffde;
        border: solid rgb(132, 0, 0);
        border-width: 1px 0;
	box-shadow: rgba(62, 62, 62, 0.5) 0px 0px 55px;
	#box-shadow: rgb(62, 62, 62) 0px 0px 55px;
        #box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }
      
      .cons-example-divider {
        width: 100%;
        height: 8rem;
	background-image: url("/images/back_consulting.webp");
	background-size: cover;
	background-position: center;
	background-attachment: fixed !important;
	background-repeat: no-repeat;
        #background-color: rgba(0, 0, 0, .1);
        #background:#ffffffde;
        border: solid rgb(132, 0, 0);
        border-width: 1px 0;
	box-shadow: rgba(62, 62, 62, 0.5) 0px 0px 55px;
	#box-shadow: rgb(62, 62, 62) 0px 0px 55px;
        #box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }
      
      .coms-example-divider {
        width: 100%;
        height: 8rem;
	background-image: url("/images/back_comunicaciones.webp");
	background-size: cover;
	background-position: center;
	background-attachment: fixed !important;
	background-repeat: no-repeat;
        #background-color: rgba(0, 0, 0, .1);
        #background:#ffffffde;
        border: solid rgb(132, 0, 0);
        border-width: 1px 0;
	box-shadow: rgba(62, 62, 62, 0.5) 0px 0px 55px;
	#box-shadow: rgb(62, 62, 62) 0px 0px 55px;
        #box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      
      .navblogpd4 {
	padding-left: 4%;
	padding-right: 4%;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      /* Texto oscuro cuando la nav está expandida y en tema claro */
      .navbar-expand-lg .navbar-nav .nav-link {
        color: rgb(240, 240, 240) !important; /* Cambia a un color claro cuando es dark */
      }

      /* Texto claro cuando la nav está colapsada */
      .offcanvas .nav-link {
        color: white !important; /* Texto claro en el offcanvas */
      }

      /* Color en hover para mejor visibilidad */
      .offcanvas .nav-link:hover {
        color: #f8f9fa !important; /* Color en hover para mejor visibilidad */
      }

      /* Para navbar blanca en modo oscuro, texto oscuro. */
      [data-bs-theme="dark"] .navbar .navbar-nav .nav-link {
        color: rgb(32, 32, 32) !important; /* Texto oscuro en navbar blanca */
      }

      /***** HOVER NAV LINKS *****/
      /* Estilos para el subrayado solo en los enlaces del navbar */
.navbar .nav-link {
  position: relative;
  color: white; /* Cambia esto según tu esquema de colores */
  text-decoration: none; /* Quitar subrayado por defecto */
}

.navbar .nav-link:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* Altura del subrayado */
  background-color: #ba0000; /* Cambia el color del subrayado */
  transform: scaleX(0);
  transform-origin: left; /* Cambia el origen a la izquierda */
  transition: transform 0.3s ease;
}

/* Estilo para el enlace activo */
.navbar .nav-link.active:after {
  transform: scaleX(1); /* Asegúrate de que esté visible */
}

.navbar .nav-link:hover:after {
  transform: scaleX(1);
}

      [data-bs-theme="dark"] .offcanvas {
        background-color: rgb(33, 33, 33);
        padding: 10px;
      }

      [data-bs-theme="light"] .offcanvas {
        background-color: rgb(230, 230, 230);
        /*padding: 10px;*/
      }

      [data-bs-theme="dark"] .c-example-divider {
	      box-shadow: rgb(174, 174, 174) 0px 0px 55px;
      }

      /* Estilos background SERVICIOS CIBERSEGURIDAD*/
      .textstyle {
	      font-family: Georgia, roboto;
	      font-weight: bold;
      }

      .cyberbg {
        background-image: url('../images/auditorias_ciberseguridad.webp');
        background-size: cover;
        background-position: center;
	border: solid 1px #ffc8c8;
      }

      .msgbg {
        background-image: url('../images/private_coms.webp');
        /* background-size: cover; */
        background-position: center;
	border: solid 1px #d5ffe4;
      }

      .hardbg {
        background-image: url('../images/hardening.webp');
        background-size: cover;
        background-position: center;
	border: solid 1px #e0ffd8;
      }

      .respbg {
        background-image: url('../images/respuesta-incidentes-ciberseguridad.webp');
        background-size: cover;
        background-position: center;
	border: solid 1px #ffecca;
      }

      .cabg {
        background-image: url('../images/acceso_denegado.webp');
        background-size: cover;
        background-position: center;
	border: solid 1px #7e667e;
      }
      
      .wafbg {
        background-image: url('../images/WAF.webp');
        background-size: cover;
        background-position: -90px;
	border: solid 1px #7e667e;
      }

      
      .cobg {
        background-image: url('../images/ninhack_consulting.webp');
        background-size: cover;
        background-position: center;
	border: solid 1px #b9b9ff;
      }


      .btn-bd-primary {
        --bd-violet-bg: rgb(206, 0, 0);
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #ff0000;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }

      .bd-mode-toggle {
        z-index: 1500;
      }

      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }

      /** Color cajones otros servicios cuando theme es dark **/
      /* CSS para personalizar las tarjetas en el tema oscuro */
      [data-bs-theme='dark'] .card {
        background-color: #f4f4f4; /* Color de fondo */
      }

      [data-bs-theme='dark'] .card-text {
        color: black; /* Color del texto */
      }

      [data-bs-theme='dark'] hr {
        color: #ff0000; /* Color del texto */
      }

      [data-bs-theme='dark'] .carousel-inner {
        background-color: #d2d2d2; /* Fondo claro para dark theme */
    }
    
    [data-bs-theme='light'] .carousel-inner {
        background-color: #6b6b6b; /* Fondo oscuro para light theme */
    }
    

    /* RRSS Icons */
    .green-icon {
      color: #2a9300;
      }
  
      .blue-icon {
        color: rgb(60, 60, 255); /* Cambia el ícono de Telegram a azul */
      }

      .mobile {
        font-size: 17px;
        font-style: normal;
      }

      /*  */
      [dark-bs-theme='light'] .fab.fa-x {
        color: rgb(12, 12, 12);
      }

      [dark-bs-theme='dark'] .fab.fa-x {
        color: white;
      }
  
      /* small AUDITORIAS CIBERSEGURIDAD */
     .transpconsult small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 2px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(68deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8911939775910365) 0%, rgba(0,0,0,0.5130427170868348) 50%, rgba(203,203,203,0.4290091036414566) 100%);
      z-index: 1;
    }

    .transpconsult:hover small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 2px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(to top, rgba(255, 0, 0, 0) 0%, rgba(96, 173, 255, 0.61) 100%);
      z-index: 1;
    }
    
    .transpcyber small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 2px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(68deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8911939775910365) 0%, rgba(0,0,0,0.5130427170868348) 50%, rgba(203,203,203,0.4290091036414566) 100%);
      z-index: 1;
    }

    .transpcyber:hover small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 2px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(to top, rgba(255, 0, 0, 0) 0%, rgb(175 0 0) 100%);
      z-index: 1;
    }

    .transpmsg:hover small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 2px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(90deg,rgba(202, 255, 194, 0.63) 0%, rgba(54, 245, 255, 0.3) 100%, rgba(0, 255, 195, 1) 63%);
      z-index: 1;
    }

    .transpmsg small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 2px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(68deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8911939775910365) 0%, rgba(0,0,0,0.5130427170868348) 50%, rgba(203,203,203,0.4290091036414566) 100%);
      z-index: 1;
    }

    .transphard small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 2px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(68deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8911939775910365) 0%, rgba(0,0,0,0.5130427170868348) 50%, rgba(203,203,203,0.4290091036414566) 100%);
      z-index: 1;
    }

    .transphard:hover small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 2px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(to top, rgba(255, 0, 0, 0) 0%, rgb(145 255 85 / 49%) 100%);
      z-index: 1;
    }

    .transpresp small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 0px;
      width: 100%;
      /* margin-bottom: 29px; */
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(68deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8911939775910365) 0%, rgba(0,0,0,0.5130427170868348) 50%, rgba(203,203,203,0.4290091036414566) 100%);
      z-index: 1;
    }

    .transpresp:hover small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 0px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(to top, rgba(255, 0, 0, 0) 0%, rgba(255, 188, 53, 0.49) 100%);
      z-index: 1;
    }

    .transpca small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 0px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(68deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8911939775910365) 0%, rgba(0,0,0,0.5130427170868348) 50%, rgba(203,203,203,0.4290091036414566) 100%);
      z-index: 1;
    }
    
    .transpca:hover small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 0px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(to top, rgba(255, 0, 0, 0) 0%, rgb(255 0 246 / 61%) 100%);
      z-index: 1;
    }
    
    .transpwaf small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 0px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(68deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8911939775910365) 0%, rgba(0,0,0,0.5130427170868348) 50%, rgba(203,203,203,0.4290091036414566) 100%);
      z-index: 1;
    }
    
    .transpwaf:hover small {
      text-align: left;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000;
      left: 0px;
      width: 100%;
      padding-top: 17px;
      position: absolute;
      background: linear-gradient(to top, rgba(255, 0, 0, 0) 0%, rgba(20, 0, 164, 0.61) 100%);
      z-index: 1;
    }


    /* Aumentar el tamaño de fuente general */
    footer h5,
    footer .nav-link,
    footer .nav-item, 
    footer .nav-item i {
    font-size: 1.125rem; /* Aumentar 2 píxeles respecto al tamaño estándar */
  }

  /* Opcionalmente, puedes ajustar el tamaño específico de los íconos si es necesario */
  footer .nav-item i {
  font-size: 1.5rem; /* Ajustar el tamaño de los íconos */
}