/* ============================================================
   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; }
}

/* ── Icono de telefono en la cabecera ──────────────────────────────────────
   El icono y los numeros van en una sola linea. Se envuelven los numeros en
   su propio elemento para que la separacion solo quede entre el icono y el
   bloque de numeros, y no tambien entre cada numero y el punto que los
   separa. */
.header-contact .phone{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.header-contact .phone-ico{ flex:none; opacity:.9; }
.header-contact .phone-nums{ display:flex; flex-direction:column; align-items:center; line-height:1.35; }

/* Separador entre los dos telefonos de la tarjeta de contacto. */
.cotiz-contact-sep{ opacity:.45; margin:0 2px; }

/* 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;
  }
}

/* Franja superior en movil: los dos telefonos y el correo en UNA sola linea.
   Todo va en proporcion: el texto se mide en vw y los iconos, los huecos y el
   separador en em, de modo que la linea completa ocupa siempre el mismo
   porcentaje del ancho (calculado con Montserrat, el peor caso). El tope de
   12px es solo para el movil girado en horizontal. Franja superior en movil. */
@media (max-width: 1023px) {
  .cronos-topbar {
    font-size: min(2.95vw, 12px);
    padding: .45em 2vw;
    gap: .5em;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .cronos-topbar a,
  .cronos-topbar span { font-size: inherit; }
  .cronos-topbar svg { width: 1.05em; height: 1.05em; }
  .cronos-topbar-sep { width: .09em; height: 1.1em; }
}

/* 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;
}