/* =====================================================================
   personalizar.css · tarjetas personalizables sobre la MISMA mc-card
   (misma estructura que inicio/buscador/cases) + swatches y preview.
   ===================================================================== */

.sec-hero { text-align: center; max-width: 60ch; margin: 0 auto clamp(2rem,5vw,3rem); }
.sec-hero p { color: var(--mc-gray-500); }

/* El preview (case) vive dentro de .mc-card__media, centrado */
.pcard .case { height: 80%; width: auto; aspect-ratio: 1/2.04; border-radius: 22px; }
.pcard .case__camera { width: 30px; height: 30px; border-radius: 9px; top: 8px; left: 8px; padding: 4px; gap: 2px; }
.pcard .case--xiaomi .case__camera,
.pcard .case--moto .case__camera { width: 26px; height: 26px; }
.pcard .case__drop { font-size: 9px; border-width: 1.5px; }
.pcard .case__drop .bi { font-size: 1rem; }

/* Link invisible sobre el preview (no-foto) para abrir el producto */
.pcard__stage-link { position: absolute; inset: 0; z-index: 4; }

/* Variante seleccionada (nombre) */
.pcard__variant { font-size: var(--mc-fs-xs); color: var(--mc-gray-500); min-height: 1em; }

/* Fila de swatches dentro del body de la tarjeta */
.pcard__swatches { display: flex; flex-wrap: wrap; gap: 5px; margin: .2rem 0 .1rem; }
.pcard__swatches [data-swatch="color"] {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mc-gray-200);
  padding: 0; cursor: pointer; background: var(--_c); transition: transform var(--mc-t);
}
.pcard__swatches [data-swatch="color"]:hover { transform: scale(1.12); }
.pcard__swatches [data-swatch="color"].is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mc-ink); }
.pcard__swatches [data-swatch="design"] {
  width: 22px; height: 30px; border-radius: 5px; border: 2px solid var(--mc-gray-200);
  padding: 0; cursor: pointer; overflow: hidden; background-size: cover; transition: transform var(--mc-t), border-color var(--mc-t);
}
.pcard__swatches [data-swatch="design"]:hover { transform: translateY(-2px); }
.pcard__swatches [data-swatch="design"].is-active { border-color: var(--mc-ink); }

.pcard__btn { margin-top: .5rem; align-self: flex-start; }

/* Selector de dispositivo (marca/modelo) dentro de la tarjeta */
.pcard__dev { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .3rem 0 .2rem; }
.pcard__dev .mc-select { padding: .4rem .6rem; font-size: var(--mc-fs-xs); background-position: right .5rem center; padding-right: 1.6rem; }

/* Filtros tipo chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.chip {
  border: 1.5px solid var(--mc-gray-200); background: #fff; color: var(--mc-gray-600);
  padding: .45rem 1rem; border-radius: var(--mc-radius-pill); font-size: var(--mc-fs-sm); font-weight: 600; cursor: pointer;
  transition: var(--mc-t);
}
.chip:hover { border-color: var(--mc-ink); }
.chip.is-active { background: var(--mc-ink); color: #fff; border-color: var(--mc-ink); }

/* ===== Hub Personalizar (datos reales) ===== */
.pers-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.6rem 0 2.2rem; }
.pers-step { display: flex; gap: .8rem; align-items: flex-start; background: #fff; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius-lg); padding: 1rem 1.1rem; }
.pers-step__n { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--mc-ink); color: #fff; font-family: var(--mc-font-display); font-weight: 700; display: grid; place-items: center; }
.pers-step b { font-family: var(--mc-font-display); }
.pers-step p { margin: .15rem 0 0; color: var(--mc-gray-500); font-size: var(--mc-fs-sm); }
@media (max-width: 720px) { .pers-steps { grid-template-columns: 1fr; } }

.pers-h2 { font-size: var(--mc-fs-xl); margin: 0 0 1.1rem; }
.mc-price-now--ask { color: var(--mc-gray-500); font-weight: 600; }

.pers-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2.4rem; padding: 1.4rem 1.6rem; border-radius: var(--mc-radius-lg); color: #fff;
  background: radial-gradient(120% 160% at 0% 0%, #1e3a8a, #0a0a0b 70%);
}
.pers-banner h3 { color: #fff; margin: .2rem 0 0; font-size: var(--mc-fs-lg); }