/* ============================================================
   PIL · Catálogo de productos (/productos y /productos/<slug>) — 2026-10-16
   Manual PIL v2: Tech blue #0002FF, Ink #0D1B2A, Lavanda #F4F7FF, cards 20px, botones pill, inputs 16px.
   Contenedor 1240 px, secciones 96 px, títulos 42 px (mismo ritmo de la home).
   ============================================================ */
.pcat { --blue:#0002ff; --blue-dark:#0000b3; --ink:#0d1b2a; --ink-2:#3d4a5c; --lav:#f4f7ff; --line:#e3e8f6; --r:20px; color:var(--ink); }
.pcat *, .pcat *::before, .pcat *::after { box-sizing:border-box; }
.pcat-in { max-width:1240px; margin:0 auto; padding:0 24px; }

/* Hero */
.pcat-hero { background:var(--lav); padding:56px 0 44px; }
.pcat-crumb { font-size:13px; color:var(--ink-2); margin:0 0 18px; }
.pcat-crumb a { color:var(--ink-2); text-decoration:none; }
.pcat-crumb a:hover { color:var(--blue); }
.pcat-eyebrow { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin:0 0 12px; }
.pcat-hero h1 { font-size:clamp(32px,4vw,48px); font-weight:400; line-height:1.08; letter-spacing:-.02em; margin:0; max-width:20ch; color:var(--ink); }
.pcat-hero h1 span { font-weight:700; }
.pcat-lead { font-size:17px; line-height:1.6; color:var(--ink-2); max-width:62ch; margin:16px 0 0; }

/* Barra de búsqueda y filtros */
.pcat-tools { padding:28px 0 8px; }
.pcat-search { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.pcat-search-box { flex:1 1 320px; position:relative; }
.pcat-search-box svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-2); pointer-events:none; }
.pcat input[type=search], .pcat select { width:100%; height:48px; border:1px solid rgba(13,27,42,.14); border-radius:16px; padding:0 16px; font:inherit; font-size:15px; color:var(--ink); background:#fff; }
.pcat input[type=search] { padding-left:44px; }
.pcat select { flex:0 1 220px; width:auto; min-width:180px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m3 4.5 3 3 3-3' stroke='%233d4a5c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.pcat input[type=search]:focus, .pcat select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,2,255,.12); }
.pcat-fams { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 0; }
.pcat-fam { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 10px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.pcat-fam .ic { width:26px; height:26px; border-radius:22%; display:grid; place-items:center; background:var(--lav); color:var(--blue); }
.pcat-fam .ic svg { width:16px; height:16px; }
.pcat-fam:hover { border-color:var(--blue); }
.pcat-fam[aria-pressed="true"] { background:var(--blue); border-color:var(--blue); color:#fff; }
.pcat-fam[aria-pressed="true"] .ic { background:rgba(255,255,255,.18); color:#fff; }
.pcat-count { margin:20px 0 0; font-size:14px; color:var(--ink-2); }

/* Grilla de productos */
.pcat-list { padding:16px 0 96px; }
.pcat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pcat-card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:12px; transition:box-shadow .2s, transform .2s; }
.pcat-card:hover { box-shadow:0 14px 34px rgba(13,27,42,.08); transform:translateY(-2px); }
.pcat-card[hidden] { display:none; }
.pcat-card-img { display:block; margin:-22px -22px 6px; aspect-ratio:4/3; background:var(--lav); border-radius:var(--r) var(--r) 0 0; overflow:hidden; }
.pcat-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.pcat-card:hover .pcat-card-img img { transform:scale(1.03); }
.pcat-card-img.ph { display:grid; place-items:center; color:var(--blue); }
.pcat-card-img.ph svg { width:56px; height:56px; opacity:.85; }
.pcat-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px; }
.pcat-card-fam { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.pcat-card-fam .ic { width:30px; height:30px; border-radius:22%; display:grid; place-items:center; background:var(--blue); color:#fff; flex:none; }
.pcat-card-fam .ic svg { width:17px; height:17px; }
.pcat-logo { height:28px; max-width:110px; width:auto; object-fit:contain; flex:none; }
.pcat-logo-txt { font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.02em; }
.pcat-card h3 { font-size:19px; font-weight:600; line-height:1.25; margin:2px 0 0; }
.pcat-card h3 a { color:var(--ink); text-decoration:none; }
.pcat-card h3 a:hover { color:var(--blue); }
.pcat-card p { margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.pcat-brand { font-size:13px; color:var(--ink-2); }
.pcat-brand b { color:var(--ink); font-weight:600; }
.pcat-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }
.pcat-tag { font-size:12px; line-height:1; padding:6px 10px; border-radius:999px; background:var(--lav); color:var(--ink-2); }
.pcat-card-act { display:flex; gap:8px; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:14px; margin-top:4px; }
.pcat-link { font-size:14px; font-weight:600; color:var(--blue); text-decoration:none; }
.pcat-link:hover { text-decoration:underline; }

/* Botones */
.pcat-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:999px; border:2px solid var(--blue); background:var(--blue); color:#fff; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s, color .15s; white-space:nowrap; }
.pcat-btn:hover { background:var(--blue-dark); border-color:var(--blue-dark); color:#fff; }
.pcat-btn svg { width:16px; height:16px; }
.pcat-btn-sm { height:38px; padding:0 14px; font-size:13.5px; }
.pcat-btn-ghost { background:#fff; color:var(--blue); }
.pcat-btn-ghost:hover { background:var(--lav); color:var(--blue-dark); border-color:var(--blue-dark); }
.pcat-btn.pcat-btn-ghost.is-added { background:var(--blue); border-color:var(--blue); color:#fff; }
.pcat-btn.pcat-btn-ghost.is-added:hover { background:var(--blue-dark); border-color:var(--blue-dark); color:#fff; }

.pcat-empty { text-align:center; padding:56px 24px; border:1px dashed var(--line); border-radius:var(--r); color:var(--ink-2); }
.pcat-empty[hidden] { display:none; }

/* Banda final */
.pcat-cta { background:var(--blue); color:#fff; padding:64px 0; }
.pcat-cta .pcat-in { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.pcat-cta h2 { font-size:clamp(26px,3vw,34px); font-weight:400; line-height:1.15; margin:0; color:#fff; max-width:24ch; }
.pcat-cta h2 span { font-weight:700; }
.pcat-cta p { margin:10px 0 0; color:rgba(255,255,255,.85); font-size:16px; max-width:56ch; }
.pcat-cta .pcat-btn { background:#fff; border-color:#fff; color:var(--blue); }
.pcat-cta .pcat-btn:hover { background:var(--lav); border-color:var(--lav); color:var(--blue-dark); }

/* Ficha de producto */
.pcat-detail { padding:56px 0 96px; }
.pcat-detail-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start; }
.pcat-visual { background:var(--lav); border-radius:var(--r); aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:32px; }
.pcat-visual .ic { width:112px; height:112px; border-radius:22%; background:var(--blue); color:#fff; display:grid; place-items:center; }
.pcat-visual .ic svg { width:56px; height:56px; }
.pcat-visual .pcat-logo { height:40px; max-width:200px; }
.pcat-visual.has-img { padding:0; overflow:hidden; position:relative; display:block; }
.pcat-visual.has-img img { width:100%; height:100%; object-fit:cover; display:block; }
.pcat-visual-logo { position:absolute; left:16px; bottom:16px; background:#fff; border-radius:12px; padding:10px 14px; box-shadow:0 6px 18px rgba(13,27,42,.10); display:flex; align-items:center; }
.pcat-visual-logo .pcat-logo { height:28px; max-width:150px; }
.pcat-detail h1 { font-size:clamp(30px,3.6vw,42px); font-weight:400; line-height:1.1; letter-spacing:-.02em; margin:0; }
.pcat-detail .pcat-lead { margin-top:14px; }
.pcat-facts { list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--line); }
.pcat-facts li { display:grid; grid-template-columns:140px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
.pcat-facts li > span:first-child { color:var(--ink-2); }
.pcat-detail-act { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.pcat-ext { display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:14px; color:var(--ink-2); text-decoration:none; }
.pcat-ext:hover { color:var(--blue); }
.pcat-why { margin-top:28px; padding:20px 22px; border-radius:16px; background:var(--lav); font-size:15px; line-height:1.55; color:var(--ink-2); }
.pcat-why b { color:var(--ink); }
.pcat-related { padding:0 0 96px; }
.pcat-related h2 { font-size:clamp(26px,3vw,34px); font-weight:400; margin:0 0 24px; }
.pcat-related h2 span { font-weight:700; }

/* Lista de cotización: botón flotante + panel */
.pcat-qbar { position:fixed; left:20px; bottom:20px; z-index:99990; display:none; align-items:center; gap:10px; height:52px; padding:0 20px 0 16px; border-radius:999px; border:0; background:var(--ink); color:#fff; font:inherit; font-size:15px; font-weight:600; cursor:pointer; box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 10px 28px rgba(13,27,42,.28); }
.pcat-qbar.is-on { display:inline-flex; }
.pcat-qbar svg { width:18px; height:18px; }
.pcat-qbar .n { min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:#fff; color:var(--ink); display:grid; place-items:center; font-size:13px; }
.pcat-qmodal { position:fixed; inset:0; z-index:100002; background:rgba(13,27,42,.55); display:none; align-items:center; justify-content:center; padding:16px; }
.pcat-qmodal.is-open { display:flex; }
.pcat-qbox { background:#fff; border-radius:var(--r); width:min(720px,100%); max-height:calc(100dvh - 32px); overflow:auto; box-shadow:0 30px 80px rgba(13,27,42,.35); }
.pcat-qhead { position:sticky; top:0; background:var(--blue); color:#fff; padding:22px 24px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; z-index:1; }
.pcat-qhead h3 { margin:0; font-size:22px; font-weight:400; color:#fff; }
.pcat-qhead h3 span { font-weight:700; }
.pcat-qhead p { margin:6px 0 0; font-size:14px; color:rgba(255,255,255,.85); }
.pcat-qclose { background:rgba(255,255,255,.15); border:0; color:#fff; width:36px; height:36px; border-radius:999px; cursor:pointer; font-size:20px; line-height:1; flex:none; }
.pcat-qbody { padding:20px 24px 24px; }
.pcat-qitems { list-style:none; margin:0 0 18px; padding:0; border:1px solid var(--line); border-radius:16px; }
.pcat-qitems li { display:grid; grid-template-columns:1fr 88px 32px; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.pcat-qitems li:last-child { border-bottom:0; }
.pcat-qitems .nm { font-size:14.5px; font-weight:600; line-height:1.3; }
.pcat-qitems .nm small { display:block; font-weight:400; font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.pcat-qitems input[type=number] { width:100%; height:38px; border:1px solid rgba(13,27,42,.14); border-radius:12px; padding:0 10px; font:inherit; font-size:14px; }
.pcat-qitems .rm { width:32px; height:32px; border-radius:999px; border:0; background:var(--lav); color:var(--ink-2); cursor:pointer; font-size:16px; }
.pcat-qitems .rm:hover { background:#ffe4ef; color:#a3134f; }
.pcat-qempty { padding:20px; text-align:center; color:var(--ink-2); font-size:14px; }
.pcat-qform { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pcat-qform label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; color:var(--ink-2); }
.pcat-qform label.full { grid-column:1 / -1; }
.pcat-qform input, .pcat-qform textarea { width:100%; border:1px solid rgba(13,27,42,.14); border-radius:16px; padding:12px 14px; font:inherit; font-size:15px; color:var(--ink); background:#fff; }
.pcat-qform textarea { min-height:96px; resize:vertical; }
.pcat-qform input::placeholder, .pcat-qform textarea::placeholder, .pcat input[type=search]::placeholder { color:#8a94a6; font-weight:400; opacity:1; }
.pcat-qform input:focus, .pcat-qform textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,2,255,.12); }
.pcat-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.pcat-qfoot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; }
.pcat-qnote { font-size:12.5px; color:var(--ink-2); margin:0; max-width:40ch; }
.pcat-qmsg { margin:14px 0 0; padding:12px 14px; border-radius:12px; font-size:14px; display:none; }
.pcat-qmsg.ok { display:block; background:#e6fff8; color:#05664f; }
.pcat-qmsg.err { display:block; background:#ffe4ef; color:#a3134f; }

/* Responsive */
@media (max-width:1100px) { .pcat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) {
  .pcat-detail-grid { grid-template-columns:1fr; gap:28px; }
  .pcat-visual { aspect-ratio:auto; padding:40px 24px; }
  .pcat-visual.has-img { aspect-ratio:4/3; padding:0; }
}
@media (max-width:640px) {
  .pcat-in { padding:0 16px; }
  .pcat-hero { padding:40px 0 32px; }
  .pcat-grid { grid-template-columns:1fr; }
  .pcat select { flex:1 1 calc(50% - 6px); min-width:0; font-size:14px; padding:0 30px 0 12px; background-position:right 12px center; }
  .pcat input[type=search] { font-size:14px; }
  .pcat-fams { flex-wrap:nowrap; overflow-x:auto; margin-right:-16px; padding-right:16px; scrollbar-width:none; }
  .pcat-fams::-webkit-scrollbar { display:none; }
  .pcat-fam { flex:none; }
  .pcat-list, .pcat-detail, .pcat-related { padding-bottom:64px; }
  .pcat-detail { padding-top:36px; }
  .pcat-facts li { grid-template-columns:110px 1fr; }
  .pcat-cta { padding:48px 0; }
  .pcat-qbar { left:12px; bottom:12px; height:48px; padding:0 16px 0 14px; font-size:14px; }
  .pcat-qhead, .pcat-qbody { padding-left:18px; padding-right:18px; }
  .pcat-qform { grid-template-columns:1fr; }
  .pcat-qitems li { grid-template-columns:1fr 72px 32px; }
}
@media (prefers-reduced-motion:reduce) { .pcat-card, .pcat-card-img img { transition:none; } .pcat-card:hover, .pcat-card:hover .pcat-card-img img { transform:none; } }