/* =====================================================================
   disenos.css · catálogo de diseños + colaboraciones (web)
   .dcase = diseño compuesto sobre el estuche (molde + diseño + mockup)
   ===================================================================== */

/* --- Compuesto del estuche: diseño detrás + mockup encima.
   El mockup tiene el FUERA blanco opaco y solo la ventana del estuche transparente,
   así que recorta el diseño por sí mismo (sin máscara). --- */
.dcase { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; }
.dcase__art, .dcase__mockup { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; }
.dcase__art { z-index: 2; }
.dcase__mockup { z-index: 3; }

/* --- Tarjeta de diseño --- */
.dcasecard { display: flex; flex-direction: column; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius-lg); overflow: hidden; background: #fff; transition: box-shadow var(--mc-t), transform var(--mc-t), border-color var(--mc-t); }
.dcasecard:hover { box-shadow: var(--mc-shadow); transform: translateY(-3px); border-color: var(--mc-gray-300); }
.dcasecard .dcase { padding: .8rem .8rem 0; background: radial-gradient(120% 120% at 50% 0%, #fff, var(--mc-gray-50)); }
.dcasecard__body { display: flex; flex-direction: column; gap: .12rem; padding: .7rem .85rem .9rem; }
.dcasecard__name { font-family: var(--mc-font-display); font-weight: 700; font-size: var(--mc-fs-sm); color: var(--mc-ink); line-height: 1.2; }
.dcasecard__ref { font-size: var(--mc-fs-xs); color: var(--mc-gray-500); }
.dcasecard__cta { margin-top: .5rem; text-align: center; font-size: var(--mc-fs-xs); font-weight: 700; color: var(--mc-lime-700); border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius); padding: .35rem; transition: all var(--mc-t); }
.dcasecard:hover .dcasecard__cta { background: var(--mc-ink); color: #fff; border-color: var(--mc-ink); }

/* --- Grilla --- */
.dz-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.1rem; }
@media (max-width: 480px) { .dz-cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* --- Sidebar de colecciones (catálogo de diseños) --- */
.dz-cat-group + .dz-cat-group { margin-top: 1.2rem; }
.dz-cat-group h4 { font-size: var(--mc-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--mc-gray-500); margin: 0 0 .5rem; }
.dz-cat-links { display: flex; flex-direction: column; gap: .1rem; }
.dz-cat-links a { display: flex; align-items: center; gap: .4rem; justify-content: space-between; font-size: var(--mc-fs-sm); color: var(--mc-gray-700); padding: .4rem .6rem; border-radius: var(--mc-radius-sm); }
.dz-cat-links a:hover { background: var(--mc-gray-100); }
.dz-cat-links a.is-active { background: var(--mc-ink); color: #fff; }
.dz-cat-links .count { font-size: var(--mc-fs-xs); opacity: .7; }
.dz-cat-links .star { color: #f5b301; }

/* --- Filtro de estuche con miniatura (sidebar /disenos) --- */
.dz-estuche-list { display: grid; gap: .4rem; }
.dz-estuche { display: flex; align-items: center; gap: .6rem; padding: .35rem .45rem; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius); transition: border-color var(--mc-t), background var(--mc-t); }
.dz-estuche:hover { border-color: var(--mc-gray-400); background: var(--mc-gray-50); }
.dz-estuche.is-active { border-color: var(--mc-ink); background: var(--mc-gray-50); }
.dz-estuche__thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--mc-gray-100); display: grid; place-items: center; }
.dz-estuche__thumb img { width: 100%; height: 100%; object-fit: contain; }
.dz-estuche__name { font-size: var(--mc-fs-sm); color: var(--mc-gray-700); line-height: 1.2; }
.dz-estuche.is-active .dz-estuche__name { color: var(--mc-ink); font-weight: 700; }

/* --- Hero de colaboración (detalle) --- */
.collab-hero { position: relative; border-radius: var(--mc-radius-lg); overflow: hidden; color: #fff; padding: 2.2rem 1.8rem; margin-bottom: 1.6rem; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; }
.collab-hero__bg { position: absolute; inset: 0; z-index: 0; }
.collab-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.collab-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.7)); }
.collab-hero > * { position: relative; z-index: 2; }
.collab-hero h1 { color: #fff; margin: .2rem 0 .3rem; }
.collab-hero p { color: rgba(255,255,255,.85); margin: 0; max-width: 60ch; }

/* --- Tarjeta producto+diseño (/disenos) --- */
.dprod { display: flex; flex-direction: column; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius-lg); overflow: hidden; background: #fff; transition: box-shadow var(--mc-t), transform var(--mc-t), border-color var(--mc-t); }
.dprod:hover { box-shadow: var(--mc-shadow); transform: translateY(-3px); border-color: var(--mc-gray-300); }
.dprod.is-out { opacity: .62; }
.dprod__media { position: relative; aspect-ratio: 1/1; background: radial-gradient(120% 120% at 50% 0%, #fff, var(--mc-gray-50)); display: grid; place-items: center; padding: .5rem; }
.dprod__media .dcase { width: 100%; }
.dprod__badge { position: absolute; top: .5rem; left: .5rem; z-index: 5; background: var(--mc-ink); color: #fff; font-size: var(--mc-fs-xs); font-weight: 700; border-radius: 999px; padding: .15rem .55rem; }
.dprod__body { display: flex; flex-direction: column; gap: .12rem; padding: .7rem .85rem .85rem; }
.dprod__cat { font-size: var(--mc-fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--mc-gray-500); font-weight: 600; }
.dprod__title { font-family: var(--mc-font-display); font-weight: 700; font-size: var(--mc-fs-sm); color: var(--mc-ink); line-height: 1.2; }
.dprod__price { font-weight: 700; color: var(--mc-ink); margin-top: .1rem; }
.dprod__cta { margin-top: .5rem; text-align: center; font-size: var(--mc-fs-xs); font-weight: 700; color: var(--mc-lime-700); border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius); padding: .35rem; transition: all var(--mc-t); }
.dprod:hover .dprod__cta { background: var(--mc-ink); color: #fff; border-color: var(--mc-ink); }

/* --- Filtro de diseños (swatches) --- */
.dz-nodesign { display: flex; align-items: center; gap: .4rem; font-size: var(--mc-fs-sm); color: var(--mc-gray-700); padding: .4rem .6rem; border-radius: var(--mc-radius-sm); margin-bottom: .5rem; }
.dz-nodesign:hover { background: var(--mc-gray-100); }
.dz-nodesign.is-active { background: var(--mc-ink); color: #fff; }
.dz-hint { font-size: var(--mc-fs-xs); color: var(--mc-gray-500); margin: -.2rem 0 .8rem; line-height: 1.3; }
.dz-dgroup { margin-bottom: .9rem; }
/* Cabecera de colección: se ve como una opción seleccionable (radio) */
.dz-dgroup__t { display: flex; align-items: center; gap: .5rem; font-size: var(--mc-fs-sm); font-weight: 700; color: var(--mc-gray-700); margin: .2rem 0 .5rem; padding: .45rem .6rem; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius); transition: all var(--mc-t); }
.dz-dgroup__t:hover { border-color: var(--mc-ink); background: var(--mc-gray-50); }
.dz-dgroup__t.is-active { background: var(--mc-ink); color: #fff; border-color: var(--mc-ink); }
.dz-radio { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--mc-gray-300); position: relative; transition: all var(--mc-t); }
.dz-dgroup__t:hover .dz-radio { border-color: var(--mc-ink); }
.dz-dgroup__t.is-active .dz-radio { border-color: var(--mc-lime); }
.dz-dgroup__t.is-active .dz-radio::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--mc-lime); }
.dz-dgroup__name { flex: 1; }
.dz-dgroup__count { flex: 0 0 auto; font-size: var(--mc-fs-xs); font-weight: 600; background: var(--mc-gray-100); color: var(--mc-gray-600); border-radius: 999px; padding: .1rem .5rem; }
.dz-dgroup__t.is-active .dz-dgroup__count { background: rgba(255,255,255,.18); color: #fff; }
.dz-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: .4rem; }
.dz-swatch { aspect-ratio: 1/1; border-radius: 8px; border: 2px solid var(--mc-gray-200); background-size: cover; background-position: center; transition: border-color var(--mc-t), transform var(--mc-t); }
.dz-swatch:hover { transform: scale(1.06); border-color: var(--mc-gray-400); }
.dz-swatch.is-active { border-color: var(--mc-lime); box-shadow: 0 0 0 2px var(--mc-lime); }

/* buscador inline en el toolbar */
.dz-search-inline { border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius); padding: .4rem .7rem; font-size: var(--mc-fs-sm); max-width: 220px; }
.dz-search-inline:focus { outline: none; border-color: var(--mc-ink); }

/* (La tarjeta ya no sube fotos: eso vive en el editor. Aquí solo el producto.) */

/* --- Carga suave del compuesto (skeleton + fade cuando ambas capas cargan) --- */
.mc-card--case .dcase { opacity: 0; transition: opacity .4s var(--mc-ease); }
.mc-card--case.is-loaded .dcase { opacity: 1; }
.mc-card--case:not(.is-loaded) .mc-card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, var(--mc-gray-100) 20%, var(--mc-gray-200) 40%, var(--mc-gray-100) 60%);
  background-size: 200% 100%; animation: dz-shimmer 1.2s ease-in-out infinite;
}
@keyframes dz-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- Estuche compuesto dentro de la tarjeta estándar (.mc-card) ---
   media vertical; diseño y mockup usan el MISMO 'cover' → recortan los lados
   blancos del PNG por igual y quedan perfectamente alineados (el diseño solo
   se ve por la ventana del mockup, nada se ve detrás). --- */
.mc-card--case .mc-card__media { aspect-ratio: 3 / 4.4; overflow: hidden; background: #fff; }
.mc-card--case .mc-card__media > a { position: absolute; inset: 0; display: block; z-index: 1; }
.mc-card--case .dcase { position: absolute; inset: 0; aspect-ratio: auto; }
/* diseño y mockup: MISMO object-fit cover → recortan igual y quedan alineados */
.mc-card--case .dcase__art, .mc-card--case .dcase__mockup { object-fit: cover; }
/* el botón "Personalizar" del hover debe quedar por encima del estuche */
.mc-card--case .mc-card__add { z-index: 4; }
.mc-card--case .mc-card__flags, .mc-card--case .mc-card__fav { z-index: 4; }

/* --- Slider de colecciones (arriba, estilo woopcase) --- */
.dz-collslider-wrap { position: relative; margin: 0 0 1.6rem; }
.dz-collslider { display: flex; gap: .8rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: .3rem .2rem; scrollbar-width: none; }
.dz-collslider::-webkit-scrollbar { display: none; }
/* Rotulo que separa las colecciones por grupo dentro de la misma tira
   (MUNDIAL 2026, CLUBES...). Vertical para no robar ancho al carrusel. */
.dz-collgroup { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center;
  padding: 0 .15rem; margin-right: .1rem; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mc-gray-500); border-right: 2px solid var(--mc-gray-200); }
@media (max-width: 640px) { .dz-collgroup { font-size: .6rem; } }

.dz-collcard { flex: 0 0 auto; width: 150px; scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius-lg); overflow: hidden; background: #fff; transition: border-color var(--mc-t), box-shadow var(--mc-t), transform var(--mc-t); }
.dz-collcard:hover { border-color: var(--mc-gray-400); box-shadow: var(--mc-shadow-sm); transform: translateY(-2px); }
.dz-collcard.is-active { border-color: var(--mc-ink); box-shadow: 0 0 0 2px var(--mc-ink); }
.dz-collcard__img { aspect-ratio: 16/10; background: var(--mc-gray-100); overflow: hidden; }
.dz-collcard__img img { width: 100%; height: 100%; object-fit: cover; }
.dz-collcard__txt { padding: .5rem .6rem .6rem; display: flex; flex-direction: column; gap: .1rem; }
.dz-collcard__name { font-family: var(--mc-font-display); font-weight: 700; font-size: var(--mc-fs-sm); color: var(--mc-ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-collcard__count { font-size: var(--mc-fs-xs); color: var(--mc-gray-500); }
.dz-collcard.is-active .dz-collcard__name { color: var(--mc-ink); }

.dz-coll-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--mc-gray-200); background: #fff; box-shadow: var(--mc-shadow-sm); display: grid; place-items: center; cursor: pointer; color: var(--mc-ink); transition: background var(--mc-t), opacity var(--mc-t); }
.dz-coll-nav:hover { background: var(--mc-ink); color: #fff; }
.dz-coll-nav--prev { left: -10px; }
.dz-coll-nav--next { right: -10px; }
.dz-coll-nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .dz-coll-nav { display: none; } .dz-collcard { width: 130px; } }

/* Chips para elegir el grupo de colecciones (MUNDIAL 2026, CLUBES...) */
.dz-groupchips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.dz-groupchip { display: inline-flex; align-items: center; padding: .35rem .9rem; border-radius: 999px;
  border: 1px solid var(--mc-gray-200); background: #fff; font-size: var(--mc-fs-sm); font-weight: 600;
  color: var(--mc-gray-700); transition: border-color var(--mc-t), background var(--mc-t), color var(--mc-t); }
.dz-groupchip:hover { border-color: var(--mc-gray-400); }
.dz-groupchip.is-active { background: var(--mc-ink); border-color: var(--mc-ink); color: #fff; }