/* CandeMaker · Catálogo (propuesta premium) */

/* ── Portada (escenario grafito, como Inicio) ─────────────────────────── */
.cat-intro{padding:16px 0 40px}
@media (min-width:720px){.cat-intro{padding:24px 0 56px}}
@media (min-width:1024px){.cat-intro{padding:32px 0 64px}}
.cat-intro__grid{display:grid;gap:24px;margin-top:8px}
@media (min-width:1024px){.cat-intro__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:end}}
.cat-intro__txt{display:grid;gap:14px}
@media (min-width:720px){.cat-intro__txt{gap:18px}}
.cat-intro__acciones{display:grid;gap:8px}
.cat-intro__links{display:flex;flex-wrap:wrap;gap:0 24px}

/* ── Bloques ───────────────────────────────────────────────────────────── */
.cat-main{padding-bottom:var(--sec-y)}
.cat-bloque{padding-top:40px}
@media (min-width:720px){.cat-bloque{padding-top:56px}}
@media (min-width:1024px){.cat-bloque{padding-top:72px}}
.cat-bloque--fam{padding-top:32px}
@media (min-width:1024px){.cat-bloque--fam{padding-top:48px}}
.cat-bloque > .cm-head{margin-bottom:24px}
.cat-aviso{margin:0 0 32px;max-width:760px}
.cat-aviso p{margin:0}
.cat-aviso--fam{margin-top:24px}

/* Colecciones */
.cat-familias{display:grid;gap:12px}
@media (min-width:720px){.cat-familias{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}}
@media (min-width:1024px){.cat-familias{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}}
.cat-familia{gap:14px}
.cat-familia .cm-media{background:var(--c-bg-3)}
.cat-familia__txt{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.cat-familia__meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cat-familia__meta .cm-eyebrow{font-size:13px}
.cat-familia__t{font-size:18px}
@media (min-width:720px){.cat-familia__t{font-size:21px}}
.cat-familia__d{color:var(--c-ink-2)}
.cat-familia .cm-link{margin-top:auto}
.cat-familia--otro .cat-familia__plano{display:flex;align-items:center;justify-content:center;background:var(--c-blue-tint);color:var(--c-blue-deep)}
.cat-familia--otro .cat-familia__plano svg{width:72%;height:auto}
@media (hover:hover) and (pointer:fine){.cat-familia:hover .cat-familia__t{color:var(--c-blue-deep)}.cat-familia:hover .cm-link .cm-arrow{transform:translateX(3px)}}
@media (max-width:719.98px){
  .cat-familia{flex-direction:row;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--c-line)}
  .cat-familia .cm-media{flex:none;width:118px;aspect-ratio:1}
  .cat-familia__d{display:none}
  .cat-familia__t{font-size:17px}
  .cat-familia .cm-link{min-height:32px}
}

/* Riel de colecciones (fijo bajo el encabezado) */
.cat-riel{position:sticky;top:calc(var(--head-h) + env(safe-area-inset-top,0px));z-index:40;background:rgba(255,255,255,.96);border-bottom:1px solid var(--c-line)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.cat-riel{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}}
.cat-riel__in{display:flex;align-items:center;gap:8px;padding-top:8px;padding-bottom:8px}
.cat-riel__volver{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 6px;border:0;border-radius:var(--r-s);background:transparent;color:var(--c-ink-2);font-family:var(--f-display);font-weight:700;font-size:14px}
.cat-riel__volver svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.cat-riel__volver:hover{color:var(--c-ink);background:var(--c-bg-2)}}
.cat-riel__seg{flex:1;min-width:0}
@media (max-width:719.98px){.cat-riel__volver{font-size:0;gap:0;padding:0;width:44px;justify-content:center}}

.cat-fam__cab{display:grid;gap:20px;align-items:end}
@media (min-width:1024px){.cat-fam__cab{grid-template-columns:minmax(0,1fr) auto;gap:48px}}
.cat-fam__head{margin-bottom:0}
.cat-fam__orden{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}

/* Piezas */
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px;margin-top:32px}
@media (min-width:720px){.cat-grid{gap:48px 24px}}
@media (min-width:1024px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}}
.cat-pieza{display:flex;flex-direction:column;gap:12px;min-width:0}
.cat-pieza__foto{position:relative;display:block;width:100%;padding:0;margin:0;border:0;background:none;border-radius:var(--r-m);overflow:hidden}
.cat-pieza__foto .cm-media{transition:transform .16s var(--e-out)}
@media (pointer:coarse) and (prefers-reduced-motion:no-preference){.cat-pieza__foto:active .cm-media{transform:scale(.985)}}
.cat-pieza__txt{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.cat-pieza__fam{font-size:13px}
.cat-pieza__t{font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1.3;margin:0}
@media (min-width:720px){.cat-pieza__t{font-size:18px}}
.cat-pieza__abrir{padding:0;margin:0;border:0;background:none;text-align:left;font:inherit;color:var(--c-ink)}
@media (hover:hover) and (pointer:fine){.cat-pieza__abrir:hover{color:var(--c-blue-deep)}}
/* Con cursor sobre la foto o el nombre, la tarjeta sube 2 px y el nombre cambia de color */
@media (hover:hover) and (pointer:fine){.cat-pieza:has(.cat-pieza__foto:hover) .cat-pieza__abrir{color:var(--c-blue-deep)}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cat-pieza{transition:translate .2s var(--e-out)}
  .cat-pieza:has(.cat-pieza__foto:hover,.cat-pieza__abrir:hover){translate:0 -2px}
}
.cat-pieza__lead{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--c-ink-2)}
@media (max-width:719.98px){.cat-pieza__lead{display:none}}
.cat-pieza__meta{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:13px;line-height:1.45;color:var(--c-ink-3);margin:0}
@media (max-width:719.98px){.cat-pieza__meta span + span{display:none}}
.cat-pieza__precio{font-family:var(--f-display);font-weight:700;font-size:17px;line-height:1.25;color:var(--c-ink);margin-top:auto;padding-top:4px}
@media (min-width:720px){.cat-pieza__precio{font-size:20px}}
.cat-pieza__acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.cat-pieza__acc .cm-btn{flex:1 1 auto}
@media (max-width:719.98px){.cat-pieza__acc .cm-btn--secondary{display:none}.cat-pieza__acc .cm-btn{width:100%;padding:0 10px}}

.cat-busqueda__cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.cat-vacio{display:grid;gap:12px;justify-items:start;margin-top:32px;padding:32px 0 0;border-top:1px solid var(--c-line)}
.cat-precios-nota{margin-top:48px;max-width:72ch}

/* Más formas de pedir */
/* Cierre grafito antes del pie, como el contacto de Inicio */
.cat-extra__grid{display:grid;gap:32px}
@media (min-width:720px){.cat-extra__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}}
.cat-extra__item{display:grid;gap:10px;align-content:start;justify-items:start}
@media (min-width:720px){.cat-extra__item{padding:0 28px;border-left:1px solid var(--c-line)}.cat-extra__item:first-child{padding-left:0;border-left:0}}
.cat-extra__item .cm-btn{margin-top:6px}

/* ── Ficha ─────────────────────────────────────────────────────────────── */
.ficha{display:grid;gap:28px}
@media (min-width:1024px){.ficha{grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:40px;align-items:start}.ficha__media{position:sticky;top:88px}}
.ficha__referencia{display:flex;gap:8px;align-items:flex-start}
.ficha__referencia svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--c-blue-deep)}
.ficha__precio{display:grid;gap:4px}
.ficha__precio-n{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1.15;color:var(--c-ink)}
.ficha__acc{display:grid;gap:10px;margin:20px 0 28px}
.ficha__long{margin-bottom:24px;color:var(--c-ink)}
.ficha__specs{margin-bottom:28px;border-top:1px solid var(--c-line)}
.ficha__bloque{display:grid;gap:8px;margin-bottom:24px}
.ficha__usos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ficha__usos li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--c-ink-2)}
.ficha__usos svg{flex:none;width:18px;height:18px;color:var(--c-blue);margin-top:3px}
.ficha__variante{display:grid;gap:6px;justify-items:start;border-top:1px solid var(--c-line);padding-top:16px}

/* ── Personalizar ─────────────────────────────────────────────────────── */
.cfg{display:grid;gap:0;padding-top:4px!important}
.cfg__cabeza{display:flex;align-items:center;gap:12px;min-width:0}
.cfg__mini{flex:none;position:relative;width:44px;height:44px;border-radius:var(--r-s);overflow:hidden;background:var(--c-bg-2)}
.cfg__mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cfg__paso{display:grid;gap:12px;padding:24px 0;border-bottom:1px solid var(--c-line)}
.cfg__n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:10px;border-radius:50%;background:var(--c-ink);color:#fff;font-family:var(--f-display);font-weight:700;font-size:12px;vertical-align:1px}
.cfg__sub{display:grid;gap:10px;padding-top:4px}
.cfg__fila{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.cfg__tam{display:grid;gap:16px}
@media (min-width:720px){.cfg__tam{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}}
.cfg__tam-ctrl{display:grid;gap:12px;justify-items:start}
.cfg__medida{display:flex;align-items:center;gap:12px;width:100%}
.cfg__medida .cm-range{flex:1;min-width:0}
.cfg__cm{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--c-ink-3)}
.cfg__cm .cm-input{width:88px;min-height:44px;padding:0 10px;text-align:center}
.cfg__comparar{height:168px;border-radius:var(--r-m);background:var(--c-bg-2);display:flex;align-items:flex-end;justify-content:center;gap:24px;padding:16px}
.cfg__comparar-pieza{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--c-ink-3)}
.cfg__caja{position:relative;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(17,24,32,.12)}
.cfg__caja img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cfg__caja--lista{border:1.5px dashed var(--c-line-2);background:transparent;box-shadow:none}
.cfg__tuya{font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--c-blue-deep)}
.cfg__mats{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cfg__resumen{display:grid;gap:12px;justify-items:stretch;padding:24px 0 8px}
.cfg__resumen > .cm-link{justify-self:start}
.cfg__pie{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.cfg__total{display:grid;gap:0;min-width:0}
.cfg__total-n{font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.2;color:var(--c-ink)}
.cfg__enviar{flex:none}
@media (max-width:719.98px){.cfg__pie{flex-direction:column;align-items:stretch}.cfg__enviar{width:100%}.cfg__total-n{font-size:24px}}
@media (max-width:719.98px){
  .cat-fam__orden .cm-seg{flex-wrap:nowrap;width:100%}
  .cat-fam__orden .cm-seg__btn{flex:1 1 auto;padding:0 8px;font-size:13px}
}

/* ── Etapa 7: venta más clara ─────────────────────────────────────────── */
.ficha__entrega{color:var(--c-ink-2)}
.ficha__dudas{justify-self:start}
.cat-pieza__pend{position:absolute;inset:0;display:grid;place-content:center;gap:6px;padding:16px;text-align:center;background:linear-gradient(180deg,rgba(243,240,234,.0),rgba(243,240,234,.92) 55%);pointer-events:none}
.cat-pieza__pend-n{font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.2;color:var(--c-ink)}
.cat-pieza__foto{position:relative}

/* Etapa 7 · total del configurador: cada cambio entra con un fundido breve (nodo nuevo por key) */
@media (prefers-reduced-motion:no-preference){.cfg__total-n{transition:opacity .12s var(--e-out)}@starting-style{.cfg__total-n{opacity:0}}}