/* =========================================================
   MACROSEGURIDAD — OVERRIDES.CSS
   Cargar DESPUÉS de style.css, index.css y slide.css
   No modifica el HTML: solo pisa clases/estilos existentes.
   ========================================================= */

:root{
  --ms-red:      #ED1C24; /* rojo de marca, se mantiene igual */
  --ms-bordo:    #6E0F14; /* bordó oscuro — hover / acentos */
  --ms-bordo-2:  #4A0A0D; /* bordó casi negro — overlays / footer */
  --ms-black:    #1C1B1A; /* negro cálido, no #000 puro */
  --ms-cream:    #F7EFE6; /* crema — fondos alternos */
  --ms-cream-2:  #EFE2D0; /* crema oscuro — bordes / texto sobre bordó */
  --ms-gray:     #5C5955;
  --ms-shadow:   rgba(74,10,13,.12);
}

/* -----------------------------------------------------------
   1) HERO — overlay con profundidad en vez de brightness plano
   ----------------------------------------------------------- */
.header-overlay{
  background: linear-gradient(135deg, rgba(74,10,13,.82) 0%, rgba(28,27,26,.55) 60%, rgba(28,27,26,.35) 100%);
}
.header-slide{
  letter-spacing: .5px;
}
.header-slide span{
  color: var(--ms-cream-2) !important;
}
.knowmore-btn{
  background: var(--ms-red);
  border: 2px solid var(--ms-red);
  color: #fff;
  padding: .6rem 1.6rem;
  border-radius: 6px;
  display: inline-block;
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.knowmore-btn:hover{
  background: transparent;
  border-color: var(--ms-cream-2);
  color: var(--ms-cream-2);
  transform: translateY(-2px);
}

/* -----------------------------------------------------------
   1d) BIENVENIDO — transición con profundidad desde el hero
   ----------------------------------------------------------- */
#masinfo{
  position: relative;
  padding: 4rem 2rem 3rem !important;
  margin: 0 auto !important;
  background: linear-gradient(180deg, rgba(74,10,13,.05) 0%, rgba(247,239,230,.7) 100%);
  border-radius: 0 0 32px 32px;
}
#masinfo h2:not(.reveal){
  color: var(--ms-black) !important;
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 1.5px;
}
#masinfo h2.reveal{
  color: var(--ms-gray) !important;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto !important;
}
#masinfo img[alt="logo"]{
  filter: drop-shadow(0 10px 24px var(--ms-shadow));
}
.logo-crossover{
  position: relative;
  display: inline-block;
}
.logo-crossover::after{
  content: "";
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, rgba(237,28,36,.10) 0%, transparent 70%);
  z-index: -1;
}

/* -----------------------------------------------------------
   1b) DIVISOR "Productos Destacados" — líneas acotadas, no infinitas
   ----------------------------------------------------------- */
.hr-with-text{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.hr-with-text::before,
.hr-with-text::after{
  content: "";
  flex: 1;
  height: 2px;
  background: var(--ms-red);
  max-width: 220px;
}
.hr-with-text h2{
  margin: 0;
  white-space: nowrap;
}

/* -----------------------------------------------------------
   1c) CARRUSEL DE PRODUCTOS — altura y alineación consistente
   ----------------------------------------------------------- */
.slide{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 240px;
}
.slide a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  width: 100%;
}
.slide-title{
  font-weight: 600;
  font-size: 1rem;
  color: var(--ms-black);
  min-height: 24px;
}
.imgcarr{
  max-height: 100px;
  width: auto;
  object-fit: contain;
}
.btn-productos{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 30px;
    border:2px solid #ED1C24;
    border-radius:30px;
    color:#ED1C24 !important;
    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none;
    transition:.3s;
}

.btn-productos span{
    transition:.3s;
}

.btn-productos:hover{
    background:#ED1C24;
    color:white !important;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.btn-productos:hover span{
    transform:translateX(5px);
}

.main-navbar{
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
#top-menu a{
  color: var(--ms-black) !important;
  position: relative;
}
#top-menu a::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background: var(--ms-red);
  transition: width .25s ease;
}
#top-menu a:hover::after{
  width:100%;
}

/* -----------------------------------------------------------
   3) TITULARES — jerarquía tipográfica
   ----------------------------------------------------------- */
.tittle{
  color: var(--ms-black);
  font-weight: 700;
  letter-spacing: -.5px;
}
.tittle-line{
  background: var(--ms-red);
  height: 3px;
  width: 60px;
  display: block;
  margin: 10px auto 0;
  border-radius: 2px;
}

/* -----------------------------------------------------------
   4) CARDS DE EXPERTISE (Soluciones / Industrias)
   ----------------------------------------------------------- */
#expertiseok{
  background: var(--ms-cream) !important;
}
#expertiseok .rounded-4{
  border-top: 4px solid var(--ms-bordo);
  box-shadow: 0 10px 30px var(--ms-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
#expertiseok .rounded-4:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px var(--ms-shadow);
}
#expertiseok .btn-outline-danger{
  --bs-btn-color: var(--ms-red);
  --bs-btn-border-color: var(--ms-red);
  --bs-btn-hover-bg: var(--ms-bordo);
  --bs-btn-hover-border-color: var(--ms-bordo);
}

/* -----------------------------------------------------------
   5) SECCIÓN NOVEDADES — versión oscura (bordó casi negro)
   ----------------------------------------------------------- */
.slider-container{
  background: var(--ms-bordo-2);
  border-top: 3px solid var(--ms-red);
  box-shadow: 0 10px 30px var(--ms-shadow) !important;
}
.slider-title{
  color: var(--ms-cream-2) !important;
}

/* Ítems individuales de la novedad (lista-token) */
.lista{
  list-style: none;
  padding: 0;
  margin: 0;
}
.slider-item{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.slider-item:last-child{
  border-bottom: none;
}
.text-link{
  text-decoration: none;
  display: block;
}
.lista-token{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  color: var(--ms-cream-2) !important;
  font-weight: 500;
  transition: background .2s ease, padding-left .2s ease, color .2s ease;
  border-left: 3px solid transparent;
}
.lista-token:hover{
  background: rgba(237,28,36,.14);
  border-left-color: var(--ms-red);
  padding-left: 24px;
  color: #fff !important;
}
.lista-token img{
  flex-shrink: 0;
  opacity: .9;
}

/* Botón "Ver todas las noticias" al pie del carrusel oscuro */
.slider-container button span{
  color: var(--ms-red) !important;
  transition: color .2s ease;
}
.slider-container button:hover span{
  color: var(--ms-cream-2) !important;
}

/* -----------------------------------------------------------
   6) BANNERS DE PRODUCTOS/CLIENTES — sombra cálida
   ----------------------------------------------------------- */
#banners{
  background: var(--ms-cream);
}
#banners .rounded.shadow{
  background: #fff;
  box-shadow: 0 8px 24px var(--ms-shadow) !important;
  border: 1px solid var(--ms-cream-2);
  transition: transform .2s ease;
}
#banners .rounded.shadow:hover{
  transform: translateY(-3px);
}

/* -----------------------------------------------------------
   7) PARTNERS — títulos, tarjetas de categoría y logos
   ----------------------------------------------------------- */
#partnersok h1,
#partnersok h2{
  color: var(--ms-black);
}

/* Bloques clickeables Platinum/Gold/Silver/Bronze/Hi-Tech */
#partnersok .textBounce{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 22px var(--ms-shadow);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  border: 2px solid transparent;
}
#partnersok .textBounce:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 32px var(--ms-shadow);
}

/* Texto descriptivo que aparece al hacer click en cada categoría */
#partnersok [id^="div"]{
  background: var(--ms-cream);
  border-radius: 12px;
  border-left: 4px solid var(--ms-red);
}

/* Grilla de logos "Tech Partners" */
.container-fluid .col-sm-12.col-md-6.col-lg-4 img[src*="assets/images/img/"]{
  filter: grayscale(60%);
  opacity: .85;
  transition: filter .25s ease, opacity .25s ease, transform .2s ease;
}
.container-fluid .col-sm-12.col-md-6.col-lg-4 img[src*="assets/images/img/"]:hover{
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* -----------------------------------------------------------
   8) SOBRE MACROSEGURIDAD — texto sobre fondo crema
   ----------------------------------------------------------- */
#nosotros_{
  background: var(--ms-cream);
  padding: 3rem 2rem;
  border-radius: 12px;
}

/* -----------------------------------------------------------
   9) FOOTER — bordó oscuro en vez de gris genérico
   ----------------------------------------------------------- */
footer.ffot{
  background: var(--ms-bordo-2) !important;
}
footer.ffot h4{
  color: var(--ms-cream-2);
  letter-spacing: .5px;
}
footer.ffot a{
  color: var(--ms-red) !important;
}
footer.ffot a:hover{
  color: var(--ms-cream-2) !important;
}

/* -----------------------------------------------------------
   10) BOTÓN "NOVEDADES" (campanita) — coherencia de color
   ----------------------------------------------------------- */
.btn-xs.btn-light{
  border: 1px solid var(--ms-cream-2) !important;
}


/* =========================================================
   BORDES ROJO → DEGRADADO OCRE / ROJO
   ========================================================= */

.btn-productos,

#expertiseok .rounded-4,

.lista-token:hover,
.tittle-line,
.hr-with-text::before,
.hr-with-text::after{

    border-color:transparent !important;

    background-image:
        linear-gradient(#fff,#fff),
        linear-gradient(
            135deg,
            #b88718,
            #ED1C24
        );

    background-origin:border-box;
    background-clip:
        padding-box,
        border-box;
}
/* ===== CONTENEDOR ===== */

.partner-item{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:18px;
    animation:partnerIn .8s ease forwards;
}

.partner-item img{
    max-width:170px;
    max-height:70px;
    width:auto;
    height:auto;

    transition:
        transform .35s ease,
        opacity .35s ease,
        filter .35s ease;

    animation:partnerFloat 6s ease-in-out infinite;

    opacity:1;
}

/* distintas velocidades */

.partner-item:nth-child(2n) img{
    animation-duration:5.5s;
}

.partner-item:nth-child(3n) img{
    animation-duration:7s;
}

.partner-item:nth-child(4n) img{
    animation-duration:6.2s;
}

/* hover */

.partner-item:hover{
    z-index:20;
}

.partner-item:hover img{
    transform:scale(1.12);
}

/* atenúa solamente un poco */

.tech-partners:hover .partner-item img{
    opacity:.45;
}

.tech-partners:hover .partner-item:hover img{
    opacity:1;
}

/* ===== ANIMACIONES ===== */

@keyframes partnerIn{

    from{
        opacity:0;
        transform:translateY(35px) scale(.9);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

@keyframes partnerFloat{

    0%{
        transform:translateY(0);
    }

    25%{
        transform:translateY(-5px);
    }

    50%{
        transform:translateY(-10px);
    }

    75%{
        transform:translateY(-4px);
    }

    100%{
        transform:translateY(0);
    }

}