/* ============================================================
   TORMECAN — Estilos específicos de La Fábrica (la-fabrica.html)
   ============================================================ */

/* Hero */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/la-fabrica/header.jpg');
  background-size: cover;
  /* Encuadre sobre el pasillo de máquinas, no sobre el techo */
  background-position: center 62%;
  filter: brightness(1.14) contrast(1.05) saturate(1.02);
}

/* Nav sobre el hero claro: sin fondo propio, los links se perdían contra la foto.
   Sombra fuerte mientras el navbar está transparente; al hacer scroll toma
   fondo sólido (#navbar.scrolled) y la sombra ya no hace falta. */
#navbar:not(.scrolled) .md\:flex a:not(.bg-rojo),
#navbar:not(.scrolled) > div > button {
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.95),
    0 1px 3px rgba(0, 0, 0, 1),
    0 2px 8px rgba(0, 0, 0, 0.95),
    0 4px 18px rgba(0, 0, 0, 0.85);
}
#navbar:not(.scrolled) > div > a img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 4px 16px rgba(0, 0, 0, 0.7));
}
/* El botón CONTACTO tiene fondo rojo propio: sombra de caja, no de texto */
#navbar:not(.scrolled) a.bg-rojo {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

/* Legibilidad del texto del hero sobre la foto */
.hero-bg ~ .relative span,
.hero-bg ~ .relative h1 {
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 4px 20px rgba(0, 0, 0, 0.85),
    0 8px 40px rgba(0, 0, 0, 0.7);
}

/* En pantallas chicas el bloque de texto no entraba en la altura del hero */
@media (max-width: 640px) {
  .hero-bg ~ .relative { padding-bottom: 1.5rem; }
  .hero-bg ~ .relative .hero-desc { font-size: 1rem; }
}

/* Capability card */
.cap-card {
  border-left: 3px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.cap-card:hover {
  border-left-color: #EB1B23;
  background: #f9f9f9;
}

/* Process step */
.process-step { position: relative; }
.process-step::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 30px;
  background: #EB1B23;
  transform: translateX(-50%);
}
.process-step:last-child::after { display: none; }