/* ==================== ESTILOS GLOBALES DE MARCAS ==================== */
/* Colores por marca (usados por el body class dinámico) */
.marca-thermomaster { --color-primario: #E4002B; }
.marca-stiebel_eltron { --color-primario: #004f9e; }
.marca-aqua_power { --color-primario: #007B8A; }
.marca-thermomax { --color-primario: #A50034; }
.marca-galaxy { --color-primario: #003B6F; }
.marca-iheat { --color-primario: #4A90E2; }
.marca-ecosmart { --color-primario: #3C763D; }
.marca-titan_plus { --color-primario: #B71C1C; }

/* ==================== SECCIÓN DE MARCAS (HOME - PARALLAX) ==================== */
.marca-calentadores {
  position: relative;
  /* Ruta de la imagen de fondo (Asegúrate de que exista esta imagen) */
  background-image: url('../img/familia.webp'); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* <--- AQUÍ ESTÁ LA MAGIA DEL PARALLAX */
  padding: 100px 0;
  overflow: hidden;
}

/* CAPA OSCURA (OVERLAY) */
/* Esto oscurece la foto para que el texto blanco resalte */
.marca-calentadores .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 30, 61, 0.85); /* Azul muy oscuro y transparente */
  z-index: 1;
}

/* CONTENEDOR (TEXTO + SLIDER) */
.marca-calentadores .contenedor {
  position: relative;
  z-index: 2; /* Para que esté encima del overlay */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 40px;
}

/* ESTILOS DEL TEXTO */
.marca-calentadores .texto {
  flex: 1 1 40%;
  color: white; /* Texto blanco obligatorio */
}

.marca-calentadores .texto h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #ffffff;
}

.marca-calentadores .texto h2 span {
  color: #E4002B; /* Rojo intenso para resaltar palabras clave */
  background: #fff; /* Fondo blanco pequeño detrás de la palabra clave */
  padding: 0 10px;
  display: inline-block;
  transform: skewX(-10deg); /* Estilo itálico moderno */
}

.marca-calentadores .texto p {
  font-size: 18px;
  color: #e0e0e0; /* Blanco suave */
  line-height: 1.6;
}

/* ESTILOS DEL SLIDER INFINITO */
.marca-calentadores .slider {
  flex: 1 1 50%;
  overflow: hidden;
  position: relative;
  /* Máscara para desvanecer los bordes suavemente */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marca-calentadores .slider-track {
  display: flex;
  /* El ancho depende de cuántos logos tengas, ajústalo si se corta */
  width: calc(250px * 12); 
  animation: scroll 30s linear infinite; /* Animación continua */
}

/* CADA ITEM DEL SLIDER (PRODUCTO) */
.slide-marca-item {
  width: 250px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.slide-marca-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Sombra para que el producto flote */
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3)); 
  transition: transform 0.3s ease;
}

.slide-marca-item img:hover {
  transform: scale(1.1); /* Efecto zoom al pasar el mouse */
}

/* DEFINICIÓN DE LA ANIMACIÓN */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-250px * 6)); } /* Ajusta el multiplicador según la mitad de tus items */
}

/* ==================== RESPONSIVE (MÓVIL) ==================== */
@media (max-width: 768px) {
  .marca-calentadores {
    background-attachment: scroll; /* En móvil desactivamos parallax por rendimiento */
    padding: 60px 0;
  }
  
  .marca-calentadores .contenedor {
    flex-direction: column;
    text-align: center;
  }
  
  .marca-calentadores .texto h2 {
    font-size: 28px;
  }
  
  .marca-calentadores .slider {
    width: 100%;
    margin-top: 30px;
  }
}