/*

CZ Cables

*/

body {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-weight: 300;
    color: white; /* Color del texto */
    position: relative;
    
    /* Mantenemos el color de prueba fuerte para que el logo resalte */
   /* background-color: #f10303 !important;*/
}
/* --------------------------------------------------------- MARQUESINA --------------------------------------------------------*/
.marquee-container {
    width: 100%;
    overflow: hidden;
    background: #000000;
    white-space: nowrap;
    padding: 6px 0;
    border-bottom: 2px solid #f86a6a;
    position: relative;
    z-index: 9999;
    /* Esto ayuda a que el móvil no ignore la animación */
    display: block; 
}

.marquee-text {
    display: inline-block;
    padding-left: 0; /* ⬅️ CAMBIO 1: Quitamos el espacio extra */
    animation: marquee-fallback 50s linear infinite;
    -webkit-animation: marquee-fallback 50s linear infinite;
    color: #fcfbfb;
    font-weight: 900;
    font-size: 1.1rem;
}

/* ----Movimiento de texto corregido---- */
@keyframes marquee-fallback {
    0% { transform: translateX(100%); }   /* ⬅️ CAMBIO 2: Empieza justo al borde derecho */
    100% { transform: translateX(-100%); } /* ⬅️ CAMBIO 3: Termina cuando sale todo el texto */
}

@-webkit-keyframes marquee-fallback {
    0% { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
}
/* ---------------------------------------------------- */
/* 2. SECTOR #TM-BG: Aquí va el logo con la opacidad controlada */
/* ---------------------------------------------------- */
#tm-bg {
    /* Mantenemos la ruta corregida, ya que CSS y la imagen están juntos */
    background-image: url('logosf_CZ-CABLES.png'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
    background-size: 40%;
    width: 100%;
    height: 100vh;      /* Ocupa el 100% de la altura de la ventana */
    position: fixed;    /* Lo fija para que cubra toda la vista */
    z-index: -1;
    /* AJUSTE CLAVE: Filtro de Opacidad (Marca de Agua) */
    filter: opacity(50%); /* 50% de visibilidad */
    
}
#tm-wrap {
    /* Asegura que tm-wrap esté por encima o al menos visible */
    position: relative; 
    z-index: 10; /* Un valor alto para asegurar que esté por encima del logo (-1) */
}
.text-shadow-dark {

    /* Define la sombra de texto:

       1px (desplazamiento horizontal)

       1px (desplazamiento vertical)

       2px (radio de desenfoque/blur)

       #000 (color negro)

    */

    text-shadow: 5px 1px 4px #000
 }
h1 {
  font-size: 3.4rem;
}

#tm-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/pop-bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  transition: all 0.3s ease;
  filter: brightness(0.4) blur(1.5px);
  
}

#tm-bg:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#tm-wrap {
  display: block;
  align-items: center;
  height: auto;
  min-height: 100vh;
}

p {
  line-height: 1.9;
  letter-spacing: 1px;
}

.tm-main-content {
  display: flex;
  align-items: center;
  padding: 50px 15px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.tm-site-header-col {
  display: flex;
  align-items: center;
}

.tm-site-header {
  margin-bottom: 10px !important; /* Reduce el espacio debajo del logo */
  margin: 10px;
  text-align: right;
  width: 100%;
}
/* --- Nuevos Estilos para el Logo Detrás del Texto --- */

/* 1. Contenedor de Logo y Texto */
.tm-logo-container {
    /* Convierte este div en el punto de referencia (marco) para el logo absoluto */
    position: relative;
    /* Necesitas definir un alto. ¡Ajusta este valor! */
    height: 150px; 
    
    /* Mantiene la alineación a la derecha de la cabecera */
    display: flex;
    justify-content: flex-end; 
    align-items: center; 
}

/* 2. La Imagen (Fondo) */
.logo-fondo {
    position: absolute;
    top: 45%; /* Centra verticalmente */
    right: 0; /* Alinea a la derecha del contenedor */
    transform: translateY(-50%); /* Ajusta el centro de la imagen */
    
    width: 340px; /* ⬅️ ¡Ajusta el tamaño del logo! */
    height: auto;
    z-index: 1; /* Valor bajo, detrás del texto */
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9));    /* Opcional: Estilos para que se vea como marca de agua 
    opacity: 95%; */
    brightness: 1.1;
}

/* 3. El Título (Frente) */
.logo-texto {
    position: relative; 
    z-index: 2; /* Valor alto, delante de la imagen */
    margin: 0 !important; /* Aseguramos que no tenga márgenes que lo separen del diseño */
}
.tm-nav ul {
  padding-left: 0;
  display: block;
}

.tm-nav li {
  list-style: none;
  display: inline-block;
  border: 1px solid white;
  float: left;
  margin: 10px;
}

.tm-nav-link {
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;     /* Centra horizontalmente */
  width: 165px;
  height: 165px;
  text-align: center;
  border: 5px solid white;
  cursor: pointer;
  position: relative;
  padding: 5px; /* Evita que el texto toque el borde */
  box-sizing: border-box;  /* Evita que el padding agrande el cuadro de 165px */
  overflow: hidden;        /* Recorta cualquier excedente (seguridad) */
}

.tm-nav-text {
    position: relative; /* Crea un nuevo contexto de capas */
  z-index: 2;         /* Se asegura de estar POR ENCIMA del blur */
  display: block;
  width: 100%;
  font-weight: bold;
  color: #FFFFFF; /* Blanco puro para el brillo */
  
  /* Efecto Glow + Sombra para resaltar el texto */
   text-shadow: 
    0 0 5px rgba(255, 255, 255, 0.7),   /* Glow más pequeño (5px) */
    1px 1px 3px rgba(0, 0, 0, 0.8);    /* Sombra negra más pegada a la letra */

  /* Tamaño y comportamiento del texto */
  font-size: 1.1rem;
  line-height: 1.1;
  white-space: normal; 
  word-wrap: break-word;
  overflow-wrap: break-word; 

  /* Espaciado para que no toque los bordes */
  padding: 0 5px; 
  box-sizing: border-box;
}

.fa-3x {
  font-size: 2em; /* Icono un poco más pequeño para que entre el texto */
}

.product {
  background: transparent;
  transition: all 0.3s ease;
}


product:hover {
  color: #ffffff; /* Cambia solo el color del texto aquí */
}
/* Aplica el color y la visibilidad al fondo interno */
.product:hover .product__bg {
  opacity: 1;
  /* El rojo con transparencia para que se siga viendo el desenfoque detrás */
  background-color: rgba(248, 106, 106, 0.8); 
}

.tm-nav-icon {
  display: block;
  margin-bottom: 25px;
}

/* Expanding Grid Items from Codrops */
.tm-page-title {
  font-weight: 300;
}
.content {
  max-width: 370px;
  margin: 0 auto; /* 1. Centra el contenedor principal */
  text-align: center; /* Centra los textos de arriba opcionalmente */
}
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start; /* Evita que los cuadros se estiren verticalmente */
  padding: 0;
  list-style: none;
  margin-bottom: 0 !important;
}
.grid__item {
  display: flex;
  /* Fijamos el tamaño para que no dependa del texto de afuera */
  flex: 0 0 150px; 
  height: 150px; 
  margin: 5px;
  position: relative;
  overflow: visible; 
  z-index: 1;  
}
.product {
  position: relative;
  z-index: 1;
  cursor: pointer;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0; /* Quitamos el padding de 20px que estaba achicando el espacio interno */
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.product__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
 /* Un fondo con mínima opacidad es necesario para que el blur "agarre" */
  background-color: rgba(255, 255, 255, 0.01); 

  /* --------------------------------------------------------------------------------Desenfoque de cuadros--------------------------------Esto debe estar aquí para que se vea SIEMPRE */
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  
  transition: background-color 0.3s ease;
}

.product__bg,
.product__description {
  opacity: 1;
  position: absolute;
}

.product__description {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
}

.tm-fa-close {
  font-size: 30px;
}

.details {
  font-size: 1rem;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  padding: 15px;
  display: none;
}

.details > * {
  position: relative;
  opacity: 0;
}

.details--open {
  pointer-events: auto;
}

.details__bg {
  background-color: #1a191f !important; 
  opacity: 1 !important;               
  z-index: 10000 !important; /* Aumentamos de 9999 a 10000 para ganar al slider y la marquesina */
  width: 100%;
  max-width: 900px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  
}

.details__bg--down {
  background: #2c2a35;
}

.details__bg {
  padding: 20px 50px 50px 50px; /* Reducimos el de arriba (20px) y mantenemos el resto */
  transform-origin: 0 0;
}

.details__close {
  position: absolute;
  top: 5px;
  right: 0;
  border: 0;
  background: none;
  margin: 1em;
  cursor: pointer;
  font-size: 0.85em;
  color: white;
  z-index: 1001;
}

/* Nosotros */
.tm-reverse-sm {
  flex-direction: row;
}

/* Herrajes slider */
.tm-slider-img-link {
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block; /* Para padding bien aplicado */
  align-items: center;         /* Centra la imagen y el texto */
  text-decoration: none;       /* Quita el subrayado azul del nombre */
  
    
}
.tm-slider-caption {
    display: block;              /* Se comporta como un bloque propio */
    font-size: 1rem;           /* Tamaño de letra */
    color: #ffffff;                 /* Color gris oscuro profesional */
    text-align: center;
}
/* Unifica el tamaño de todas las imágenes */
.tm-slider-img {
    width: 100%;       /* Se adapta al ancho disponible */
    height: 200px;     /* Altura fija para todas (puedes cambiar este valor) */
    object-fit: cover; /* Recorta la imagen para que no se estire */
    object-position: center; /* Centra el contenido de la imagen */
    border-radius: 3px; /* Opcional: para redondear un poco las esquinas */
    display: block;        /* Elimina espacios extra debajo de la imagen */
    margin: 0 auto;        /* Las centra si sobran espacios a los lados */
    margin-bottom: 8px;          /* Separación entre foto y nombre */
}

.slick-dots li button:before {
  font-size: 20px;
  color: white;
  opacity: 1;
}

.slick-dots {
  position: absolute;
  bottom: -40px;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: deepskyblue;
}

/* Contacto */
.form-control {
  font-size: 1.1rem;
  border-radius: 0;
  border: none;
  background-color: #353541;
  color: white;
  padding: 0.75rem;
}

.form-control:focus {
  color: #cecece;
  background-color: #4d4c59;
  border-color: transparent;
}

.tm-col-email {
  padding-left: 0;
}

.tm-btn-submit {
  background-color: #006599;
}

/* Redefinimos el botón gris para que sea igual al de catálogo */
.tm-btn-gray {
    background-color: #d44444 !important; /* El color azul que elegiste */
    color: white !important;             /* Texto en blanco */
    padding: 10px 25px !important;       /* Tamaño y forma */
    border-radius: 5px !important;       /* Bordes redondeados */
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    border: none;
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse */
.tm-btn-gray:hover {
    background-color: #ec2727 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    color: white !important;
}

.btn {
  padding: 0.5rem 2.4rem;
  font-size: 1.2rem;
  border-radius: 0;
}

.btn-primary {
  border-color: transparent;
}

.btn-primary:hover {
  background-color: #0e7fb9;
  border-color: transparent;
}

/* Footer */
footer {
 position: relative; /* Cambiado de absolute a relative */
  margin-top: 80px;   /* Empuja el footer hacia abajo del botón Enviar */
  padding-bottom: 30px;
  text-align: center;
  width: 100%;
  clear: both;        /* Asegura que nada se le pegue a los lados */
}

.tm-text-highlight {
  color: white;
}
.tm-text-highlight:hover {
  color: red;
}
.tm-main-content.tm-footer-relative {
  flex-direction: column;
}

.tm-copyright-text {
  background-color: rgba(0, 0, 0, 0.6);
  display: inline-block;
  padding: 10px 30px;
}

a,
button {
  transition: all 0.3s ease;
}
a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}

p:last-child {
  margin-bottom: 0;
}
/* Estilos para el formulario de contacto /*
.btn-enviar {
   /* Hace que el botón ocupe todo el ancho disponible */
  


@media (min-width: 900px) {
  .container {
    max-width: 900px;
  }
}

@media (min-width: 767px) and (max-width: 991px), (max-width: 440px) {
  .tm-nav-link {
    width: 145px;
    height: 145px;
  }
}

@media (max-width: 767px) {
  .container {
   max-width: 100%; /* Permitimos que use todo el ancho disponible */
   padding: 0 5px;  /* Reducimos el padding lateral para ganar espacio */
  }
 .grid__item {
    /* 1. Reducimos el margen externo para ganar espacio a los lados */
    margin: 3px; 
    
    /* 2. Modificamos el calc: al restar menos, el cuadro se estira más */
    flex: 0 0 140px;  /* Antes era -10px */
    height: 140px;
    max-width: calc(50% - 6px); /* Antes era -10px */
}
   
  .content {
   max-width: 100%; /* Importante: quitamos el límite de 370px aquí */
    margin: 0 auto;  /* Centramos el contenedor para que los cuadros aprovechen ambos lados */
    text-align: center;
  }
  .tm-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .grid {
    display: flex;
    flex-wrap: wrap;
   justify-content: center; /* Centra los cuadros en el espacio ganado */
   align-items: flex-start;
    padding: 0;
    list-style: none;
    margin-bottom: 10px;
  }
  .tm-col-email {
    padding-left: 15px;
  }
  .tm-reverse-sm {
    flex-direction: column-reverse;
  }
}

@media (max-width: 544px) {
  .tm-main-content {
    flex-direction: column;
  }
  .details__bg {
    padding: 55px 40px;
  }
  .slick-dots li button:before {
    font-size: 15px;
  }

  footer {
    position: relative;
    bottom: 0;
  }
}

@media (max-width: 419px) {
  .tm-nav-link {
    /* Quitamos el width y height fijos para que el grid__item mande */
    width: 100%; 
    height: auto; 
    min-height: 140px; /* Para que no pierdan su forma cuadrada */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .fa-3x {
    font-size: 2.2em;
  }
}
/* Ajuste para bajar la imagen en computadoras */
@media (min-width: 768px) {
    .img-bienvenida-bajar {
        margin-top: 60px; /* Ajusta este valor (80px, 100px, etc.) hasta que te guste */
        display: block;
    }
}

/* En celulares mantenemos un espacio pequeño */
@media (max-width: 767px) {
    .img-bienvenida-bajar {
        margin-top: 20px;
    }
}

/*----------------------------------------------------------Catalogo----------------------------------------------------*/
.tm-btn-catalogo {
    display: inline-block;
    background-color: #007bff; /* Puedes cambiar este color por el de tu marca */
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    border: none;
    margin-left: 15px; /* Lo separa un poco del borde izquierdo */
}

.tm-btn-catalogo:hover {
    background-color: #0056b3; /* Color un poco más oscuro al pasar el mouse */
    color: white;
    transform: translateY(-2px); /* Efecto sutil de levante */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* 1. Definimos el movimiento "seco" y la aparición */
@keyframes slideInLeft {
    0% {
        transform: translateX(-300px); /* Empieza 150px a la izquierda */
        opacity: 0;                    /* Invisible al inicio */
    }
    100% {
        transform: translateX(0);      /* Llega a su posición original */
        opacity: 1;                    /* Totalmente visible */
    }
}

/* 2. Aplicamos la animación al contenedor del logo y texto */
.tm-site-header {
    /* slideInLeft = nombre de la animación
       1.2s = duración (ajusta si lo quieres más rápido o lento)
       ease-out = el efecto "seco" (frena suavemente al llegar)
       forwards = para que se quede en su lugar al terminar */
    animation: slideInLeft 1.9s ease-out forwards;
    
    /* Evita que se vea el logo antes de que empiece la animación */
    visibility: visible !important; 
}

/* Opcional: Si quieres que el texto debajo del logo tarde un poquito más en aparecer (efecto cascada) */
.tm-site-header p {
    animation: slideInLeft 1.5s ease-out forwards;
    margin-bottom: 5px !important; /* Acerca la frase "Soluciones Integrales" a los cuadros */
}
/* 1. Definimos el movimiento de DERECHA a IZQUIERDA */
@keyframes slideInRight {
    0% {
        transform: translateX(150px); /* Empieza 150px a la derecha */
        opacity: 0;
    }
    100% {
        transform: translateX(0);     /* Llega a su lugar */
        opacity: 1;
    }
}

/* 2. Aplicamos la animación a los cuadros */
.grid__item {
    opacity: 0; 
    animation: slideInRight 1s ease-out forwards;
}

/* 3. Efecto Cascada (los cuadros entran uno tras otro) */
.grid__item:nth-child(1) { animation-delay: 0.5s; } /* Nosotros */
.grid__item:nth-child(2) { animation-delay: 0.7s; } /* Postes y Ductos */
.grid__item:nth-child(3) { animation-delay: 0.9s; } /* Herrajes */
.grid__item:nth-child(4) { animation-delay: 1.1s; } /* Arquetas y Herramientas */
.grid__item:nth-child(5) { animation-delay: 1.3s; } /* Contras */

/* ==========================================================================
   AJUSTES DEL SLIDER DE CATÁLOGOS Y FOOTER
   ========================================================================== */

/* --- NUEVO: Estilo para el título Productos --- */
.tm-section-title {
    font-weight: 990 !important;   /* Letra muy gruesa */
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    -webkit-text-stroke: 1.2px #ffffff; 
    text-stroke: 1.2px #ffffff;
    margin-top: 40px !important;    /* Espacio respecto a lo de arriba */
    margin-bottom: 20px !important; /* Espacio respecto al slider */
    
    /* Efecto Glow (Brillo) */
    text-shadow: 0 0 10px rgba(235, 231, 231, 0.952), 
                 0 0 20px rgba(248, 106, 106, 0.4); 
}

/* 1. Contenedor del slider modificado */
.catalogos-slider {
    max-width: 600px; 
    /* Bajamos el margen superior a 0 porque ahora el título maneja el espacio */
    margin: 0 auto 80px auto !important; 
    padding: 10px 0;
    position: relative;
    z-index: 10;
}

/* 2. Ajuste de imágenes (Se mantiene igual) */
.catalogos-slider div img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}

/* --- Ajuste específico para Escritorio --- */
@media (min-width: 992px) {
    .tm-section-title {
        font-size: 2.5rem; /* Un poco más grande en PC */
        margin-top: 60px !important; /* Más aire en pantallas grandes */
    }
    
    .catalogos-slider {
        max-width: 500px; /* Más compacto en PC */
        margin-bottom: 120px !important; /* Más espacio para los puntitos */
    }
}