/* ============================================================
   Complementos del tema WordPress.
   Solo lo que el CSS del prototipo no cubre, porque nace de datos
   dinámicos (productos sin imagen, tarjetas de altura variable).
   ============================================================ */

/* Producto sin imagen destacada */
.titan-prod-noimg{
  width:100%; min-height:180px;
  display:flex; align-items:center; justify-content:center;
  color:#D1D5DB; background:#F7F8FA;
}

/* Tarjetas en grilla: misma altura y el enlace siempre al pie, aunque
   el producto no traiga chip de capacidad ni de izaje. */
.pp-prod-grid .prod-card{ display:flex; flex-direction:column; }
.pp-prod-grid .prod-card-body{ flex:1; display:flex; flex-direction:column; }
.pp-prod-grid .prod-specs{ min-height:2.4rem; }
.pp-prod-grid .prod-card-link{ margin-top:auto; }

/* Categoría sin productos */
.pp-empty{
  padding:3.5rem 1rem; text-align:center; color:#6B7280;
  border:1px dashed #E5E7EB; border-radius:8px; background:#F7F8FA;
}
.pp-empty p{ margin-bottom:1.5rem; font-size:.9rem; }

/* Galería adicional de producto */
.pp-product-gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:.6rem; margin-top:.85rem;
}
.pp-product-gallery img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid #E5E7EB; border-radius:6px; background:#fff;
}

/* Descripción larga en la ficha */
.pp-product-desc{ font-size:.9rem; line-height:1.75; color:#4B5563; margin:1.5rem 0; }
.pp-product-desc p{ margin-bottom:.85rem; }

/* Respuesta de los formularios (el prototipo solo abría un mailto) */
.titan-qm-msg.is-ok,
.titan-form-msg.is-ok{ color:#04349C; font-weight:600; }
.titan-qm-msg.is-error,
.titan-form-msg.is-error{ color:#c62828; font-weight:600; }

/* ── Buscador: ícono real de categoría y marcador cuando falta imagen ── */
.titan-bsc-item-icon img{ width:16px; height:16px; object-fit:contain; display:block; }
.titan-bsc-item-thumb--empty{ display:flex; align-items:center; justify-content:center; background:#F3F6FC; }
.titan-bsc-cat-prod-ph{ display:flex; align-items:center; justify-content:center; background:#F3F6FC; }

/* ── Carruseles deslizables con el dedo (SOLO móvil/tablet) ──────────────
   En escritorio la pista sigue moviéndose por transform, como siempre.
   Aquí se convierte en scroll horizontal nativo para que el arrastre táctil
   funcione con la inercia y el anclaje del propio navegador.
   El hero no entra aquí: usa clones y se resuelve por gesto en su JS. */
@media (max-width:1023px){
  .titan-prod-track{
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    transform:none !important;
    transition:none;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .titan-prod-track::-webkit-scrollbar{ display:none; }
  .titan-prod-track > *{ scroll-snap-align:start; }
}
/* ── Cabecera de categoría con imagen propia ─────────────────────────────
   Cada categoría principal tiene su banner (campo «Banner» del plugin) y
   las subcategorías heredan el de su raíz. El degradado va ENCIMA de la
   foto para que el título y la ruta de navegación se sigan leyendo.
   Se desactiva la animación del fondo: con una foto detrás, el
   desplazamiento del degradado se nota como un parpadeo. */
.pp-hero--banner{
  background-image:
    linear-gradient(120deg, rgba(1,33,105,.82) 0%, rgba(0,64,168,.62) 45%, rgba(1,33,105,.86) 100%),
    var(--pp-banner);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  animation: none;
}

/* Título de la cabecera más contenido: con foto detrás, el tamaño
   anterior competía con la imagen y estorbaba. */
.pp-hero h1{ font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
@media (max-width:1023px){
  .pp-hero h1{ font-size: 1.15rem; }
}

/* Titulo del catalogo en movil: centrado, mas grande y sin tanto aire.
   Alineado a la izquierda y en cuerpo pequeno se perdia entre el hero y
   las tarjetas de categoria. Solo afecta a pantallas pequenas. */
@media (max-width: 767px) {
  .catalogo-modelo { padding-top: 1.25rem; padding-bottom: 2.5rem; }
  .catalogo-modelo .section-head-center {
    text-align: center;
    padding-bottom: .85rem;
  }
  .catalogo-modelo .section-label {
    font-size: 1.02rem;
    letter-spacing: .03em;
    line-height: 1.3;
    max-width: 20ch;
    margin: 0 auto;
  }
  /* Filete corto bajo el titulo: lo separa de las tarjetas sin anadir hueco. */
  .catalogo-modelo .section-head-center::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin: .6rem auto 0;
    background: currentColor;
    opacity: .28;
    border-radius: 2px;
  }
}

/* Etiqueta «EXT.» bajo la cifra de izaje en los cards de tecle manual y de
   tecle electrico con trolley / suspension. Va en un tono apagado y en letra
   pequena para que se lea como una anotacion y no compita con los metros; se
   mide en em para seguir el tamano de la cifra en cada tema. */
.prod-specs dd .prod-spec-ext,
.titan-prod-specs dd .prod-spec-ext {
  display: block;
  margin-top: .28em;
  font-size: .65em;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: inherit;
  opacity: .6;
}

/* Las tarjetas con «EXT.» llevan el recuadro de specs mas alto y, cuando el
   titulo ocupa tres o cuatro lineas, quedaba pegado a la linea de «Ver
   producto». Se le da aire solo a ellas: el resto de tarjetas no cambia. */
.prod-specs:has(.prod-spec-ext),
.titan-prod-specs:has(.prod-spec-ext) {
  margin-bottom: .5rem;
}