/* Estilos para las páginas reales de categoría / subcategoría / producto
   (Tecle Manual, Tecle Eléctrico, Winche Eléctrico). Reutiliza los tokens
   de style.css y el lenguaje visual ya definido en catalogo-modelo-brasil.css
   (clases .sub-card, .sc-img, .sc-tag, .sc-btn se reusan tal cual dentro de
   un wrapper .catalogo-modelo en estas páginas). */

/* Breadcrumb simple de la ficha de producto — sin hero, adaptado de
   tes-cronostec (.prod-breadcrumb, "Hero eliminado"). */
.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(20,32,70,.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:
    linear-gradient(120deg, rgba(1,33,105,.5) 0%, rgba(244,196,48,.5) 35%, rgba(0,87,217,.5) 50%, rgba(244,196,48,.5) 65%, rgba(1,33,105,.5) 100%),
    var(--pp-hero-bg, url('../images/hero-paginas.jpg'));
  background-size:300% 300%, cover;
  background-position:0 0, center;
  background-repeat:no-repeat, no-repeat;
  animation:cat-banner-flow 8s ease-in-out infinite;
  color:#fff;
}
.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; }

/* Grid de productos reales (página de subcategoría) */
.pp-prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
@media (max-width:1023px){ .pp-prod-grid{ grid-template-columns:repeat(2,1fr); } }

/* ── Compacto en móvil — misma estructura que tes-cronostec
   (.cat-page-hero/.cat-page-content/.cat-page-grid en max-width:1023px),
   con la paleta y tipografía de Cronostec. ── */
@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; }
}

.pp-prod-card{ position:relative; display:block; text-decoration:none; border-radius:1.1rem; background:#fff; padding:14px; border:1px solid #f0f0f0; box-shadow:var(--shadow-card); transition:transform .35s ease, box-shadow .35s ease; }
.pp-prod-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.pp-prod-img{ width:100%; background:#fafafa; border-radius:.75rem; overflow:hidden; }
.pp-prod-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.pp-prod-body{ padding:.85rem .15rem .1rem; }
.pp-prod-tag{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); font-weight:700; display:block; margin-bottom:.35rem; }
.pp-prod-title{ font-family:var(--font-display); font-size:.85rem; font-weight:800; color:var(--brand-ink); line-height:1.3; margin-bottom:.75rem; }
.pp-prod-cta{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-display); font-size:.72rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#fff; background-image:var(--gradient-brand); padding:.55rem .9rem; border-radius:10px; width:100%; justify-content:center; transition:background-image .3s ease; }
.pp-prod-card:hover .pp-prod-cta{ background-image:var(--gradient-danger); }

/* Ficha de producto individual — adaptado de tes-cronostec
   (single-product.php), paleta Cronostec (azul/rojo, sin verde/amarillo) */
.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(244,196,48,.08); border:1.5px solid rgba(244,196,48,.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:.04em; 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-bottom:.4rem;
}
.prd-sku-row{ display:flex; align-items:center; gap:.5rem; margin-bottom:0; }
.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(20,32,70,.06); padding:.2rem .55rem; border-radius:.35rem; border:1px solid rgba(20,32,70,.12); }
.prd-badge{ display:flex; align-items:center; gap:.6rem; padding:.65rem 1rem; background:rgba(244,196,48,.06); border:1.5px solid rgba(244,196,48,.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; }

.prd-lightbox{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; visibility:hidden; pointer-events:none; transition:all .4s ease; backdrop-filter:blur(24px); background:rgba(20,32,70,.75); }
.prd-lightbox.active{ opacity:1; visibility:visible; pointer-events:all; }
.prd-lightbox img{ width:90vw; height:90vh; object-fit:contain; border-radius:var(--radius-md); box-shadow:0 40px 100px rgba(0,0,0,.5); transform:scale(.9); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.prd-lightbox.active img{ transform:scale(1); }
.prd-lightbox-close{ position:absolute; top:1.5rem; right:1.5rem; width:48px; height:48px; background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.3); color:#fff; font-size:1.1rem; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%; transition:background .3s; }
.prd-lightbox-close:hover{ background:rgba(255,255,255,.3); }

.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(20,32,70,.08), 0 1px 4px rgba(20,32,70,.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(20,32,70,.02); }
.pp-specs-table tbody tr:hover{ background: rgba(244,196,48,.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(0,0,0,.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(244,196,48,.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(20,32,70,.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(20,32,70,.6); }

/* Otros productos de la misma subcategoría — adaptado de tes-cronostec
   (.prod-related), paleta Cronostec */
.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(244,196,48,.3)); }
.prd-related-divider::after{ background:linear-gradient(90deg,rgba(244,196,48,.3),transparent); }
.prd-related-divider-dot{ width:8px; height:8px; border-radius:50%; background: var(--brand); box-shadow:0 0 10px rgba(244,196,48,.4); }
.pp-related .pp-prod-grid{ text-align:left; }

/* Página de Servicios: bloques de detalle completo, imagen + texto alternados */
.pp-svc-block{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; padding:3.5rem 0; border-bottom:1px solid var(--border); scroll-margin-top:6rem; }
.pp-svc-block:last-child{ border-bottom:none; }
@media (min-width:900px){
  .pp-svc-block{ grid-template-columns:1fr 1fr; gap:3rem; }
  .pp-svc-block.pp-svc-reverse .pp-svc-media{ order:2; }
  .pp-svc-block.pp-svc-reverse .pp-svc-info{ order:1; }
}
.pp-svc-media{ position:relative; border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:4/3; }
.pp-svc-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-svc-num{ position:absolute; top:1rem; left:1rem; font-family:var(--font-display); font-size:.75rem; font-weight:800; letter-spacing:.08em; color:#fff; background:rgba(1,33,105,.65); backdrop-filter:blur(4px); padding:.35rem .75rem; border-radius:999px; }
.pp-svc-icon{ display:inline-flex; align-items:center; justify-content:center; width:3rem; height:3rem; border-radius:12px; background:rgba(244,196,48,.1); color:var(--brand); font-size:1.25rem; margin-bottom:1rem; }
.pp-svc-info h2{ font-family:var(--font-display); font-size:clamp(1.35rem,2.5vw,1.85rem); font-weight:800; color:var(--brand-ink); line-height:1.15; margin-bottom:.85rem; }
.pp-svc-info p{ font-size:.95rem; line-height:1.65; color:var(--foreground); margin-bottom:1.5rem; }