/* ===========================================================
   INGFRAMEX — página de PRODUCTO individual (fase 3)

   Diseño propio, orientado al equipo: el protagonista es la
   fotografía del producto, no una foto de planta prestada.

   Usa clases con prefijo .prod- para no chocar con
   industries-common.css (que define .hero-section a ancho
   completo, texto blanco y centrado) ni con industria-page.css
   (que define la tarjeta horizontal .product-card).

   Estructura:
     .prod-hero        cabecera: datos + foto del equipo
     .prod-destacados  cifras clave en tiras
     .prod-cuerpo      tabla de especificaciones + descarga
     .prod-industrias  etiquetas de industria
   =========================================================== */

:root {
  --prod-morado: #5b1c64;
  --prod-morado-osc: #4a1753;
  --prod-morado-claro: #f5f0f6;
  --prod-texto: #333;
  --prod-texto-suave: #666;
  --prod-borde: #e6e0e8;
  --prod-gris: #f8f9fa;
}

.prod-wrap {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- Migas de pan ---------- */

.prod-migas {
  margin-top: 5.75rem;              /* alto del menú fijo */
  background: #fff;
  border-bottom: 1px solid var(--prod-borde);
  font-size: 0.85rem;
}

.prod-migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 14px 0;
}

.prod-migas li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--prod-texto-suave);
}

.prod-migas li + li::before {
  content: "›";
  color: #bbb;
}

.prod-migas a {
  color: var(--prod-morado);
  text-decoration: none;
}

.prod-migas a:hover { text-decoration: underline; }

.prod-migas [aria-current="page"] {
  color: var(--prod-texto-suave);
  font-weight: 500;
}

/* ---------- Cabecera del producto ---------- */

.prod-hero {
  background: linear-gradient(160deg, #fff 0%, var(--prod-morado-claro) 100%);
  border-bottom: 1px solid var(--prod-borde);
  padding: 55px 0 60px;
}

.prod-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* Mientras no exista la fotografía del equipo, la cabecera va a una sola
   columna en vez de dejar un hueco a la derecha. */
.prod-hero-grid--sin-foto {
  grid-template-columns: 1fr;
  max-width: 780px;
}

.prod-marca {
  display: inline-block;
  background: var(--prod-morado);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 18px;
}

.prod-hero h1 {
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--prod-morado);
  margin: 0 0 10px;
}

.prod-lema {
  font-size: 1.15rem;
  color: var(--prod-texto);
  font-weight: 500;
  margin: 0 0 18px;
}

.prod-resumen {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--prod-texto-suave);
  margin: 0 0 26px;
}

/* Foto del equipo: fondo blanco, sin recortar. */
.prod-foto {
  background: #fff;
  border: 1px solid var(--prod-borde);
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 10px 40px rgba(91, 28, 100, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

/* OJO: las <img> llevan width/height en el HTML (para reservar espacio y evitar
   el salto de maquetación). Si aquí solo se limita max-height, el navegador
   recorta el alto pero conserva el ancho del atributo y la foto sale aplastada.
   Por eso van los dos en auto, más object-fit como red de seguridad. Sirve
   igual para fotos horizontales (768x576) que verticales (768x948). */
.prod-foto img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
  display: block;
}

/* ---------- Botones ---------- */

.prod-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.prod-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 2px solid var(--prod-morado);
}

.prod-btn--solido {
  background: var(--prod-morado);
  color: #fff;
}

.prod-btn--solido:hover {
  background: var(--prod-morado-osc);
  border-color: var(--prod-morado-osc);
  color: #fff;
}

.prod-btn--linea {
  background: transparent;
  color: var(--prod-morado);
}

.prod-btn--linea:hover {
  background: var(--prod-morado);
  color: #fff;
}

/* ---------- Cifras destacadas ---------- */

.prod-destacados {
  background: var(--prod-morado);
  padding: 34px 0;
}

.prod-destacados-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.prod-dato {
  text-align: center;
  color: #fff;
}

.prod-dato dt {
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 8px;
}

.prod-dato dd {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

/* ---------- Cuerpo: especificaciones + descarga ---------- */

.prod-cuerpo {
  padding: 70px 0;
  background: #fff;
}

.prod-cuerpo-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 45px;
  align-items: start;
}

/* Mientras no exista el PDF no hay tarjeta lateral: la tabla ocupa el ancho. */
.prod-cuerpo-grid--sin-lateral {
  grid-template-columns: 1fr;
  max-width: 860px;
}

.prod-bloque h2 {
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--prod-texto);
  margin: 0 0 6px;
}

.prod-bloque > p {
  color: var(--prod-texto-suave);
  line-height: 1.7;
  margin: 0 0 26px;
}

/* Tabla de especificaciones */
.prod-tabla {
  width: 100%;
  border-collapse: collapse;
}

.prod-tabla caption {
  text-align: left;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--prod-texto-suave);
  padding-bottom: 10px;
}

.prod-tabla th,
.prod-tabla td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--prod-borde);
  font-size: 0.95rem;
  line-height: 1.6;
  vertical-align: top;
}

.prod-tabla th {
  width: 38%;
  font-weight: 600;
  color: var(--prod-texto);
  background: var(--prod-gris);
}

.prod-tabla td { color: var(--prod-texto-suave); }

.prod-tabla tr:last-child th,
.prod-tabla tr:last-child td { border-bottom: 0; }

/* Tarjeta lateral de descarga */
.prod-lateral {
  position: sticky;
  top: 7rem;
  background: var(--prod-gris);
  border: 1px solid var(--prod-borde);
  border-radius: 12px;
  padding: 26px;
}

.prod-lateral h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--prod-texto);
  margin: 0 0 8px;
}

.prod-lateral p {
  font-size: 0.9rem;
  color: var(--prod-texto-suave);
  line-height: 1.6;
  margin: 0 0 18px;
}

.prod-descarga {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--prod-borde);
  border-radius: 8px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--prod-texto);
  transition: all 0.25s ease;
}

.prod-descarga:hover {
  border-color: var(--prod-morado);
  box-shadow: 0 6px 20px rgba(91, 28, 100, 0.1);
  color: var(--prod-texto);
}

.prod-descarga .fa {
  font-size: 1.6rem;
  color: var(--prod-morado);
}

.prod-descarga strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
}

.prod-descarga span {
  font-size: 0.78rem;
  color: var(--prod-texto-suave);
}

/* ---------- Industrias ---------- */

.prod-industrias {
  padding: 60px 0;
  background: var(--prod-gris);
  border-top: 1px solid var(--prod-borde);
}

.prod-industrias h2 {
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--prod-texto);
  text-align: center;
  margin: 0 0 8px;
}

.prod-industrias > .prod-wrap > p {
  text-align: center;
  color: var(--prod-texto-suave);
  margin: 0 0 32px;
}

.prod-etiquetas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.prod-etiqueta {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--prod-borde);
  color: var(--prod-texto);
  padding: 9px 18px;
  border-radius: 30px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

a.prod-etiqueta:hover {
  background: var(--prod-morado);
  border-color: var(--prod-morado);
  color: #fff;
}

/* Las que no tienen página de industria: mismo aspecto, sin interacción. */
span.prod-etiqueta { color: var(--prod-texto-suave); }

/* ---------- Responsivo ---------- */

@media (max-width: 992px) {
  .prod-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .prod-hero h1 { font-size: 2.2rem; }
  .prod-cuerpo-grid { grid-template-columns: 1fr; gap: 36px; }
  .prod-lateral { position: static; }
  .prod-destacados-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 600px) {
  .prod-hero { padding: 36px 0 40px; }
  .prod-hero h1 { font-size: 1.8rem; }
  .prod-foto { min-height: 260px; padding: 18px; }
  .prod-foto img { max-height: 240px; }
  .prod-destacados-grid { grid-template-columns: 1fr; }
  .prod-acciones .prod-btn { width: 100%; justify-content: center; }
  .prod-tabla th, .prod-tabla td { display: block; width: 100%; }
  .prod-tabla th { border-bottom: 0; }
}

/* Nota al pie de un bloque. Nacio en la ficha del SeptiNet para decir con
   claridad que datos NO publica el fabricante, en vez de dejar huecos en la
   tabla o —peor— inventarlos. Reutilizable en cualquier ficha con la misma
   necesidad. */
.prod-nota {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--prod-morado-claro);
  border-left: 3px solid var(--prod-morado);
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--prod-texto-suave, #666);
}