/* Copiado y adaptado 1:1 de cronostec-chile-ok (cat-sidebar.css +
   paginas-producto.css), con la paleta real de Titan Industri
   (#04349C / #4177E6) en vez del azul/rojo de Cronostec. */

:root {
  --radius: 0.5rem;
  --radius-md: calc(var(--radius) - 2px);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --border: #e7ebf1;
  --muted-foreground: #94a1b8;
  --foreground: #1f2430;
  --brand: #04349C;
  --brand-ink: #04349C;
  --brand-deep: #021f5c;
  --steel: #1F2937;
  --steel-soft: #F7F8FA;
  --danger: #4177E6;
  --danger-deep: #2e5fd0;
  --gradient-brand: linear-gradient(135deg, var(--brand), var(--brand-deep));
  --gradient-danger: linear-gradient(135deg, var(--danger), var(--danger-deep));
  --shadow-card: 0 2px 6px rgba(20,32,70,0.06), 0 14px 30px -18px rgba(20,32,70,0.28);
  --shadow-lift: 0 8px 20px rgba(20,32,70,0.12), 0 34px 60px -28px rgba(20,32,70,0.45);
  --shadow-cta: 0 10px 26px -8px rgba(65,119,230,0.55);
  --font-display: 'Poppins', sans-serif;
}

/* ===== Sidebar de categorias ===== */
.cat-page-layout { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .cat-page-layout { grid-template-columns: 240px 1fr; } }

.cat-sidebar { background: #fff; border-radius: .85rem; border: 1px solid var(--border); box-shadow: 0 4px 14px -4px rgba(4,52,156,.13); padding: .5rem; align-self: start; }

.cat-tab:first-child { border-radius: .5rem .5rem 0 0; }
.cat-tab:last-child { border-radius: 0 0 .5rem .5rem; }
.cat-tab {
  display: flex; align-items: center; gap: .8rem; padding: .92rem 1.1rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--brand-ink); border-bottom: 1px solid rgba(4,52,156,.07);
  cursor: pointer; position: relative; overflow: hidden; z-index: 1; text-decoration: none;
  transition: color 1s cubic-bezier(.2,.8,.2,1), box-shadow 1s cubic-bezier(.2,.8,.2,1), z-index 0s;
}
.cat-tab:last-child { border-bottom: none; }
.cat-tab::before { content: ''; position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.8,.2,1); z-index: -1; }
.cat-tab:hover::before, .cat-tab.active::before { transform: scaleX(1); }
.cat-tab:hover, .cat-tab.active { color: #fff; font-weight: 800; z-index: 10; box-shadow: 0 8px 20px rgba(0,0,0,.25),0 -8px 20px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.12),0 -2px 6px rgba(0,0,0,.10); }
.cat-tab-icon, .cat-tab span { position: relative; z-index: 1; }
.cat-tab-icon { width: 26px; height: 26px; flex-shrink: 0; object-fit: contain; filter: brightness(0) saturate(100%) invert(13%) sepia(64%) saturate(3000%) hue-rotate(215deg); transition: filter .25s ease; }
.cat-tab:hover .cat-tab-icon, .cat-tab.active .cat-tab-icon { filter: brightness(0) saturate(100%) invert(100%); }

.cat-sublink { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem .5rem 1.75rem; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); border-radius: .5rem; text-decoration: none; transition: background .2s, color .2s; }
.cat-sublink-arrow { color: var(--danger); font-weight: 800; }
.cat-sublink:hover { background: rgba(65,119,230,.08); color: var(--brand-ink); }
.cat-sublink.active { color: var(--brand-ink); font-weight: 800; }

@media (max-width: 1023px) {
  .cat-sidebar { display: none; }
  .cat-page-layout { grid-template-columns: 1fr; }
}

/* ===== Hero + grid de categoria/subcategoria ===== */
.prd-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: .78rem; color: var(--muted-foreground); margin-bottom: .75rem; }
.prd-breadcrumb a { color: var(--muted-foreground); text-decoration: none; transition: color .3s; }
.prd-breadcrumb a:hover { color: var(--brand); }
.prd-breadcrumb span { color: rgba(4,52,156,.35); }
.prd-breadcrumb .current { color: var(--brand-ink); font-weight: 600; }

.pp-hero {
  position: relative; overflow: hidden; padding: 6.5rem 0 2.5rem;
  background-image: url('imagenes/cat-hero.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
}
.pp-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(100deg, rgba(2,31,92,.92) 0%, rgba(4,52,156,.85) 45%, rgba(2,31,92,.75) 100%);
}
.pp-hero .container { position: relative; z-index: 1; }
.pp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 1rem; }
.pp-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.pp-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.pp-breadcrumb span.sep { opacity: .5; }
.pp-breadcrumb span.current { color: #fff; }
.pp-hero h1 { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,2.75rem); font-weight: 800; line-height: 1.1; margin-bottom: .5rem; }
.pp-hero p { font-size: .95rem; color: rgba(255,255,255,.8); max-width: 640px; }

.pp-section { padding: 3rem 0 4.5rem; background: #fff; }
.pp-section-label { display: block; font-family: var(--font-display); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 1.5rem; }

.pp-prod-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.75rem; }
@media (max-width: 1023px) { .pp-prod-grid { grid-template-columns: repeat(2,1fr); } }

@media (max-width: 767px) {
  .pp-hero { padding: 3rem 0 1.5rem; }
  .pp-breadcrumb { font-size: .65rem; margin-bottom: .5rem; }
  .pp-hero h1 { font-size: 1.4rem; margin-bottom: .25rem; }
  .pp-hero p { display: none; }
  .pp-section { padding: 1.5rem 0 3rem; }
  .pp-section-label { font-size: .68rem; margin-bottom: 1rem; }
  .pp-prod-grid { gap: .75rem; }
}

/* ===== Tarjeta de producto (reutilizada en categoria/subcategoria/relacionados) -
   copiada 1:1 de .titan-prod-card del carrusel "Productos destacados" del
   home (mismo padding, mismos bordes, mismos tamanos de fuente). ===== */
.prod-card {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(20,32,70,.06), 0 14px 30px -18px rgba(20,32,70,.28);
  transition: background-color .35s ease;
}
.prod-card:hover { background-color: var(--brand); }
.prod-card-media {
  position: relative;
  aspect-ratio: 1 / 1.1;
  overflow: hidden;
  background: linear-gradient(160deg, #f7f8fa, #eceff3);
}
.prod-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.prod-card-body {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(231,235,241,.7);
  padding: 1rem;
}
.prod-card:hover .prod-card-body { border-top-color: transparent; }
.prod-card-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.15;
  font-weight: 800;
  color: #1F2937;
  transition: color .35s ease;
}
.prod-card:hover .prod-card-body h3 { color: #FFFFFF; }
.prod-specs { margin: .5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.prod-specs div { border-radius: 8px; background: #F7F8FA; padding: .3rem .5rem; transition: background .35s ease; }
.prod-card:hover .prod-specs div { background: rgba(255,255,255,.15); }
.prod-specs dt { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #94a1b8; transition: color .35s ease; }
.prod-card:hover .prod-specs dt { color: rgba(255,255,255,.75); }
.prod-specs dd { margin: .15rem 0 0; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--brand); transition: color .35s ease; }
.prod-card:hover .prod-specs dd { color: #FFFFFF; }
.prod-card-link {
  margin-top: .6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(231,235,241,.7);
  padding-top: .5rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  transition: color .35s ease, border-color .35s ease;
}
.prod-card:hover .prod-card-link { color: #FFFFFF; border-top-color: rgba(255,255,255,.25); }
.pc-std { opacity: .8; }
@media (max-width: 767px) { .pc-std { display: none; } }

/* ===== Ficha de producto individual ===== */
.pp-product-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 900px) { .pp-product-layout { grid-template-columns: 1fr 1fr; align-items: start; } }

.prd-header-block { padding: .25rem 0 .75rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.prd-detail-label { font-family: var(--font-display); font-size: .7rem; font-weight: 800; color: var(--brand); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .4rem; }
.prd-cat-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .85rem; background: rgba(4,52,156,.08); border: 1.5px solid rgba(4,52,156,.25); font-family: var(--font-display); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); border-radius: 999px; text-decoration: none; margin-bottom: .5rem; }
.prd-header-block h1 {
  font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2rem); font-weight: 900; letter-spacing: .02em; line-height: 1.15;
  background: linear-gradient(135deg, var(--brand-ink) 0%, var(--brand) 55%, var(--danger) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  margin: 0 0 .4rem;
}
.prd-sku-row { display: flex; align-items: center; gap: .5rem; }
.prd-sku-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.prd-sku-code { font-size: .8rem; font-weight: 700; color: var(--brand-ink); background: rgba(4,52,156,.06); padding: .2rem .55rem; border-radius: .35rem; border: 1px solid rgba(4,52,156,.12); }
.prd-badge { display: flex; align-items: center; gap: .6rem; padding: .65rem 1rem; background: rgba(4,52,156,.06); border: 1.5px solid rgba(4,52,156,.2); border-radius: 999px; margin-bottom: 1.5rem; font-family: var(--font-display); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }
.prd-badge-dot { font-size: .65rem; }

.pp-product-media { position: relative; background: #fafafa; border: 1px solid var(--border); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); }
.pp-product-media img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pp-specs-table { width: 100%; border-collapse: collapse; margin-bottom: 1.75rem; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 4px 16px rgba(4,52,156,.08), 0 1px 4px rgba(4,52,156,.05); }
.pp-specs-table thead tr { background: var(--brand); }
.pp-specs-table thead th { padding: .9rem 1rem; font-family: var(--font-display); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-align: left; }
.pp-specs-table tbody tr { border-bottom: 1px solid var(--border); transition: background .2s; }
.pp-specs-table tbody tr:nth-child(even) { background: rgba(4,52,156,.02); }
.pp-specs-table tbody tr:hover { background: rgba(4,52,156,.05); }
.pp-specs-table th { text-align: left; padding: .65rem 1rem; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground); white-space: nowrap; width: 42%; }
.pp-specs-table td { padding: .65rem 1rem; font-size: .88rem; font-weight: 600; color: var(--steel); }

.prd-meta-row { font-size: .75rem; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.prd-meta-row strong { color: var(--brand-ink); }
.prd-meta-row a { color: var(--brand); font-weight: 700; text-decoration: none; }

.pp-product-cta-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.pp-btn-primary { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .85rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; background-image: var(--gradient-danger); padding: .9rem 1.5rem; border-radius: 999px; text-decoration: none; box-shadow: var(--shadow-cta); border: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.pp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(65,119,230,.6); }
.pp-btn-secondary { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .85rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--brand); background: #fff; border: 1.5px solid var(--brand); padding: .9rem 1.5rem; border-radius: 999px; text-decoration: none; box-shadow: var(--shadow-card); transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.pp-btn-secondary:hover { background: var(--brand); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(4,52,156,.45); }
.pp-btn-whatsapp { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .85rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: #25D366; padding: .9rem 1.5rem; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 26px -8px rgba(37,211,102,.55); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.pp-btn-whatsapp:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 32px -8px rgba(37,211,102,.65); }
.pp-btn-llamar { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .85rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--brand-ink); padding: .9rem 1.5rem; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 26px -8px rgba(4,52,156,.5); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.pp-btn-llamar:hover { transform: translateY(-2px); filter: brightness(1.15); box-shadow: 0 14px 32px -8px rgba(4,52,156,.6); }

.pp-related { margin-top: 4rem; text-align: center; }
.prd-related-label { display: block; font-family: var(--font-display); font-size: .62rem; font-weight: 900; letter-spacing: .3em; text-transform: uppercase; color: var(--brand); margin-bottom: .6rem; }
.pp-related h2 { font-family: var(--font-display); font-size: clamp(1.3rem,2.5vw,1.75rem); font-weight: 900; color: var(--brand-ink); letter-spacing: -.02em; margin-bottom: .75rem; }
.prd-related-divider { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-bottom: 2rem; }
.prd-related-divider::before, .prd-related-divider::after { content: ''; width: 60px; height: 2px; background: linear-gradient(90deg,transparent,rgba(4,52,156,.3)); }
.prd-related-divider::after { background: linear-gradient(90deg,rgba(4,52,156,.3),transparent); }
.prd-related-divider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px rgba(4,52,156,.4); }
.pp-related .pp-prod-grid { text-align: left; }

/* ===== Paginacion ===== */
.cronos-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; flex-wrap: wrap; }
.cronos-pagination a, .cronos-pagination span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .5rem; border-radius: .5rem; border: 1px solid var(--border); font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--brand-ink); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.cronos-pagination a:hover { background: rgba(4,52,156,.06); border-color: var(--brand); }
.cronos-pagination .current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ============================================================
   Navegacion movil de categoria — copiada y adaptada de
   cronostec-chile-ok (mob-sub-chips-wrap, mob-other-cats), con la
   paleta Titan. Solo visible en categoria/subcategoria, solo movil/tablet.
   ============================================================ */
.mob-sub-chips-wrap { display: none; background: #fff; border-bottom: 1px solid var(--border); padding: 0; }
@media (max-width: 1023px) { .mob-sub-chips-wrap { display: block; } }
.mob-sub-chips { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; padding: 12px 16px; }
.mob-sub-chip {
  display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 14px; border-radius: 999px;
  font-family: var(--font-display); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  text-align: center; border: 1.5px solid var(--brand); background: #fff; color: var(--brand);
  text-decoration: none; -webkit-tap-highlight-color: transparent; transition: all .18s;
}
.mob-sub-chip:active { transform: scale(.96); }
.mob-sub-chip.active { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 3px 12px rgba(4,52,156,.3); }

.mob-other-cats { display: none; padding: 24px 16px 16px; background: #f6f8fb; border-top: 1px solid var(--border); }
@media (max-width: 1023px) { .mob-other-cats { display: block; } }
.mob-other-label { font-family: var(--font-display); font-size: .6rem; font-weight: 800; color: var(--brand-ink); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.mob-other-label::after { content: ''; flex: 1; height: 1px; background: var(--brand-ink); opacity: .15; }
.mob-other-list { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 1023px) { .mob-other-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } }
.mob-other-item {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: .6rem; background: #fff;
  border: 1px solid var(--border); text-decoration: none; transition: all .18s; -webkit-tap-highlight-color: transparent;
}
@media (max-width: 1023px) { .mob-other-item { flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px 8px; gap: 8px; } }
.mob-other-item:active { transform: scale(.98); background: #f6f8fb; }
.mob-other-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(4,52,156,.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (max-width: 1023px) { .mob-other-icon { width: 44px; height: 44px; } }
.mob-other-icon img { width: 22px; height: 22px; }
@media (max-width: 1023px) { .mob-other-icon img { width: 26px; height: 26px; } }
.mob-other-name { flex: 1; font-family: var(--font-display); font-size: .72rem; font-weight: 800; color: var(--brand-ink); text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; }
@media (max-width: 1023px) { .mob-other-name { font-size: .6rem; flex: none; } }
.mob-other-arrow { color: var(--brand); flex-shrink: 0; }
@media (max-width: 1023px) { .mob-other-arrow { display: none; } }