/* CandeMaker · páginas estáticas por familia y por pieza (catalogo/<slug>/)
   Generadas por herramientas/seo-estatico.py. Reutilizan brand.css, cm-premium.css y
   las clases .ficha__* de cm-p-catalogo.css; aquí sólo va la retícula propia. */

.pg{background:var(--c-bg,#fff)}
.pg-salto{position:absolute;left:-999px;top:8px;z-index:100;padding:8px 12px;background:var(--c-dark);color:#fff;border-radius:var(--r-s)}
.pg-salto:focus{left:8px}

/* Encabezado sin JavaScript: menú completo en escritorio, fila deslizable en teléfono */
.pg-subnav{display:none;background:var(--c-dark);border-top:1px solid rgba(255,255,255,.08)}
.pg-subnav__in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.pg-subnav__in::-webkit-scrollbar{display:none}
.pg-subnav a{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14.5px;font-weight:500;color:#C9D1DA;white-space:nowrap;border-radius:var(--r-s)}
.pg-subnav a[aria-current="page"]{color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 #5FB0EE;border-radius:0}
@media (max-width:899.98px){.pg-nav{display:none}.pg-subnav{display:block}}

.pg-main{padding-block:20px 64px}
@media (min-width:720px){.pg-main{padding-block:28px 88px}}

/* Migas */
.pg-migas ol{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:13.5px;color:var(--c-ink-3)}
.pg-migas li+li::before{content:"/";margin:0 8px;color:var(--c-ink-4)}
.pg-migas a{color:var(--c-ink-3)}
.pg-migas a:hover{color:var(--c-ink)}
.pg-migas [aria-current]{color:var(--c-ink);font-weight:500}

/* Pieza */
.pieza{display:grid;gap:28px}
@media (min-width:1024px){.pieza{grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:48px;align-items:start}.pieza__media{position:sticky;top:88px}}
.pieza__foto{display:block;aspect-ratio:4/3;border-radius:var(--r-m);overflow:hidden;background:var(--c-bg-2);position:relative}
.pieza__foto img{display:block;width:100%;height:100%;object-fit:cover}
.pieza__media .ficha__referencia{margin-top:12px}
.pieza__fam{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.pieza__t{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(28px,4.2vw,40px);line-height:1.08;color:var(--c-ink);margin:0 0 12px;text-wrap:balance}
.pieza__lead{font-size:17px;line-height:1.55;color:var(--c-ink-2);margin:0 0 20px;max-width:52ch}
.pieza .ficha__acc .cm-btn{text-decoration:none}

/* Cómo se pide */
.pg-pasos{margin:48px 0 0;padding:24px;border:1px solid var(--c-line);border-radius:var(--r-m);display:grid;gap:14px;max-width:640px}
.pg-pasos h2{margin:0}
.pg-pasos__lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pg-pasos__lista li{display:flex;gap:12px;align-items:flex-start;color:var(--c-ink-2);font-size:15px;line-height:1.5}
.pg-pasos__lista li strong{color:var(--c-ink);font-weight:600}
.pg-pasos__n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--c-acento);color:#fff}

/* Tarjetas (más de la colección / familia) */
.pg-rel{margin-top:56px}
.pg-rel__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pg-rel__head h2{margin:0}
.pg-grid{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.pg-grid--familia{margin-top:28px}
.pg-card__a{display:flex;flex-direction:column;height:100%;border-radius:var(--r-m);background:#fff;border:1px solid var(--c-line);overflow:hidden;color:inherit;text-decoration:none;transition:transform .2s var(--e-out),box-shadow .2s var(--e-out),border-color .2s ease}
@media (hover:hover) and (pointer:fine){.pg-card__a:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(17,24,32,.08);border-color:var(--c-line-2)}}
.pg-card__a:active{transform:scale(.99)}
.pg-card__media{position:relative;display:block}
.pg-card__foto{display:block;aspect-ratio:4/3;background:var(--c-bg-2);overflow:hidden}
.pg-card__foto img{display:block;width:100%;height:100%;object-fit:cover}
.pg-card__foto.cm-pendiente{position:relative;border-radius:0;box-shadow:none}
.pg-card__tag{position:absolute;top:10px;left:10px}
.pg-card__body{display:grid;gap:4px;padding:14px 16px 16px;align-content:start;flex:1}
.pg-card__t{font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.3;color:var(--c-ink)}
.pg-card__lead{font-size:14px;line-height:1.45;color:var(--c-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pg-card__meta{margin-top:4px}
.pg-card__precio{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--c-ink);margin-top:6px}

/* Familia */
.pg-head{display:grid;gap:8px;max-width:64ch}
.pg-head .pieza__lead{margin-bottom:4px}
.pg-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:28px 0 0}
.pg-cta .cm-btn{text-decoration:none}
.pg-otras{margin-top:56px}
.pg-otras h2{margin:0 0 16px}
.pg-otras__lista{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pg-fam{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--c-line);border-radius:var(--r-m);color:inherit;text-decoration:none;transition:border-color .2s ease,background-color .2s ease}
@media (hover:hover) and (pointer:fine){.pg-fam:hover{border-color:var(--c-line-2);background:var(--c-bg-2)}}
.pg-fam__t{font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--c-ink)}

@media (prefers-reduced-motion:reduce){.pg-card__a,.pg-fam{transition:none}}