/* ============================================================
   Complementos del tema WordPress.
   Solo clases que el CSS del prototipo no cubre, porque nacen de
   datos dinámicos (productos sin imagen, categorías sin ícono,
   galería, descripción larga, estados vacíos).
   ============================================================ */

/* Producto sin imagen destacada */
.prod-card-noimg,
.pp-product-noimg{
  width:100%; min-height:180px;
  display:flex; align-items:center; justify-content:center;
  color:#cbd5e1; background:var(--steel-soft);
}
.pp-product-noimg{ min-height:320px; }

/* Tercer nivel del árbol de categorías */
.cat-sublink--l3{ padding-left:2.75rem; font-size:.6rem; }

/* Las subcategorías del sidebar necesitan más contraste que el gris base */
.cat-sublink{ color:#5b6472; }

/* Tarjetas dentro de una grilla (no del carrusel): misma altura y el
   enlace "Ver producto" siempre alineado al pie. */
.pp-prod-grid .prod-card{ display:flex; flex-direction:column; flex:1 1 auto; }
.pp-prod-grid .prod-card-body{ flex:1; display:flex; flex-direction:column; }
.pp-prod-grid .prod-card-link{ margin-top:auto; }
.pp-prod-grid .prod-specs{ min-height:2.4rem; }

/* El eyebrow amarillo puro no se lee sobre blanco */
.prd-detail-label,
.pp-section-label{ color:var(--brand-deep); }

/* El mapa necesita altura propia: dentro de un flex item sin altura
   resuelta, height:100% colapsa y el iframe no se dibuja. */
.footer-map-wrap{
  border-radius:.5rem; overflow:hidden; height:180px;
  background:rgba(255,255,255,.06);
}
.footer-map-wrap iframe{ border:0; display:block; width:100%; height:180px; }
/* Si el embed de Google no carga, su enlace de reserva no debe salir
   con los estilos por defecto del navegador sobre el footer negro. */
.footer-map-wrap a{ color:var(--brand); font-size:.78rem; text-decoration:none; }

/* El logo no debe encogerse y quedar tapado por las banderas */
.cronos-logo-flags .logo-wrap{ flex-shrink:0; }
.cronos-logo-flags{ gap:.75rem; }

/* Los nombres de categoría vienen del catálogo con mayúsculas mezcladas */
.site-footer .footer-col ul a{ text-transform:none; }

/* 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 var(--border); border-radius:var(--radius-md); background:#fff;
}

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

/* Categoría sin productos */
.pp-empty{
  padding:3.5rem 1rem; text-align:center; color:var(--muted-foreground);
  border:1px dashed var(--border); border-radius:var(--radius-lg);
  background:var(--steel-soft);
}
.pp-empty p{ margin-bottom:1.5rem; font-size:.9rem; }

/* Producto indicado dentro del modal de cotización */
.quote-modal-product{
  margin-bottom:1.25rem; padding:.6rem .9rem;
  background:rgba(244,196,48,.08); border:1px solid rgba(244,196,48,.28);
  border-radius:var(--radius-md); font-size:.78rem; color:var(--brand-ink);
}

/* Mensaje de respuesta del formulario, también fuera de #cotizar */
.form-message{ margin-top:1rem; padding:.85rem 1.25rem; font-size:.85rem; font-weight:600; display:none; line-height:1.5; border-radius:var(--radius-md); }
.form-message.success{ display:block; background:rgba(244,196,48,.08); color:var(--brand-deep); border:1px solid rgba(244,196,48,.25); }
.form-message.error{ display:block; background:rgba(229,57,53,.07); color:#c62828; border:1px solid rgba(229,57,53,.2); }

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

/* ── 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. */
@media (max-width:1023px){
  .prod-track,
  .svc-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;
  }
  .prod-track::-webkit-scrollbar,
  .svc-track::-webkit-scrollbar{ display:none; }

  .prod-track > *,
  .svc-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; }
}