/* =====================================================================
   home.css · landing
   ===================================================================== */
/* Banner full-width (full-bleed) */
.fullbanner {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  min-height: clamp(300px, 40vw, 460px); display: grid; align-items: center;
  background: linear-gradient(115deg, #0a0a0b 30%, #15203f 70%, #1e3a8a);
}
/* La cabecera va superpuesta al banner: su contenido baja lo que ella ocupa
   para no quedar tapado, y el banner crece otro tanto. */
body.mc-overlay .fullbanner { padding-top: var(--mc-top-h); min-height: calc(clamp(300px, 40vw, 460px) + var(--mc-top-h)); }

/* Banner en video: cubre toda la sección por detrás del texto. El velo va
   aparte (y no en el propio video) para que el degradado no se reproduzca ni
   se recorte con él. Si el video no carga, queda la imagen de póster. */
.fullbanner__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}
.fullbanner__veil { position: absolute; inset: 0; z-index: -1; background: rgba(10,10,11,.5); pointer-events: none; }
/* Con video, el fondo de la sección se apaga: lo pone el propio video (o su
   póster mientras carga). */
.fullbanner--video { background-image: none !important; background: var(--mc-black); }
@media (prefers-reduced-motion: reduce) {
  .fullbanner__video { display: none; }   /* se queda el póster, sin movimiento */
}
.fullbanner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 120% at 85% 20%, rgba(213,242,0,.35), transparent 55%);
}
.fullbanner__inner { display: grid; gap: .6rem; max-width: 640px; }
.fullbanner .mc-eyebrow { color: var(--mc-lime); }
.fullbanner h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; }
.fullbanner p { color: rgba(255,255,255,.8); max-width: 46ch; }
.fullbanner__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.fullbanner__tag {
  position: absolute; right: clamp(1rem,5vw,4rem); top: 50%; transform: translateY(-50%) rotate(-6deg);
  font-family: var(--mc-font-display); font-weight: 700; text-align: center; z-index: -1;
  color: rgba(255,255,255,.06); font-size: clamp(5rem, 18vw, 16rem); line-height: .8; letter-spacing: -.04em;
}
@media (max-width: 640px) { .fullbanner { min-height: 340px; } }

.hero {
  position: relative; isolation: isolate; color: var(--mc-ink); overflow: hidden;
  border-radius: var(--mc-radius-lg); margin-top: 1.5rem;
  border: 1px solid var(--mc-gray-200);
  background: radial-gradient(120% 140% at 85% 0%, rgba(213,242,0,.35), transparent 55%),
              linear-gradient(180deg, #ffffff 0%, #f1f2f5 100%);
}
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; padding: clamp(2rem,5vw,4rem); }
@media (max-width: 820px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { color: var(--mc-ink); font-size: var(--mc-fs-4xl); line-height: 1.02; }
.hero p { color: var(--mc-gray-600); max-width: 46ch; }
.hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero__art { display: grid; place-items: center; gap: 1.1rem; }

/* ── Funda real (mockup MV-P10) — flota sobre el hero CLARO, sin caja ni sombra:
   · foto y cuerpo recortados por el molde (silueta) → no se desbordan;
   · el mockup va ENCIMA con mix-blend-mode: multiply → su fondo blanco se funde
     con el hero claro (invisible) y solo quedan marco + cámara reales.
   Sin transform en el contenedor: crearía un stacking context y aislaría el
   multiply (reaparecería el rectángulo blanco). 264% auto = escala uniforme. ── */
.hero__art .case-real {
  --_size: 225% auto;   /* < 264% = deja margen, no recorta el marco del estuche */
  position: relative; width: clamp(185px, 24vw, 240px); aspect-ratio: .4804;
  cursor: pointer;
}
.hero__art .case-real.is-dragover { outline: 2px dashed var(--mc-lime-700); outline-offset: 12px; border-radius: 6px; }

.case-real__fill,
.case-real__photo {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: var(--molde); mask-image: var(--molde);
  -webkit-mask-size: var(--_size); mask-size: var(--_size);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Cuerpo de la funda — negro con leve sheen diagonal: contrasta y se ve nítido sobre el hero claro */
.case-real__fill { z-index: 1; background: linear-gradient(145deg, #35363d 0%, #1a1b20 38%, #2c2d34 62%, #141519 100%); }
/* Foto del cliente (cover) recortada a la silueta */
.case-real__photo { z-index: 2; background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Mockup (marco + cámara) encima; multiply funde su fondo blanco con el hero claro */
.case-real__shell {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--mockup) center / var(--_size) no-repeat;
  mix-blend-mode: multiply;
}

.case-real__drop {
  position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%);
  z-index: 4; width: 80%; text-align: center; color: rgba(255,255,255,.95);
  font-size: var(--mc-fs-xs); font-weight: 600; line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0,0,0,.55); pointer-events: none;
  transition: opacity .25s var(--mc-ease);
}
.case-real__drop .bi { display: block; font-size: 1.4rem; margin-bottom: .2rem; }
.case-real.has-photo .case-real__drop { opacity: 0; }

.case-real__meta { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.case-real__tag {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  background: #fff; border: 1px solid var(--mc-gray-200);
  color: var(--mc-gray-600); font-size: var(--mc-fs-xs); font-weight: 600;
  padding: .3rem .7rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.case-real__change {
  border: 0; background: none; cursor: pointer; padding: .15rem .4rem;
  font-size: var(--mc-fs-xs); font-weight: 600; color: var(--mc-lime-700);
  text-decoration: underline; text-underline-offset: 3px;
}
.case-real__change:hover { color: var(--mc-ink); }

/* Buscador por dispositivo */
.finder { background: #fff; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius); padding: 1.2rem; box-shadow: var(--mc-shadow); margin-top: -2rem; position: relative; z-index: 3; }
/* Variante del home: va ARRIBA, solapada al banner, como primer paso del flujo */
.finder--top { margin-top: -2.4rem; border: 0; box-shadow: var(--mc-shadow-lg); }
.finder__row { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: .8rem; align-items: center; }
@media (max-width: 760px) { .finder__row { grid-template-columns: 1fr 1fr; } }
.finder__label { font-family: var(--mc-font-display); font-weight: 600; font-size: var(--mc-fs-sm); white-space: nowrap; }
@media (max-width: 760px) { .finder__label { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .finder__row { grid-template-columns: 1fr; }
  .finder__row .mc-btn { width: 100%; }
}
.finder__hint { margin: .6rem .2rem 0; font-size: var(--mc-fs-xs); color: var(--mc-gray-500); min-height: 1.2em; }

/* Cómo funciona: 3 pasos */
.how { margin-top: 2.6rem; }
.how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 760px) { .how__grid { grid-template-columns: 1fr; } }
.how-step {
  position: relative; background: #fff; border: 1px solid var(--mc-gray-200);
  border-radius: var(--mc-radius); padding: 1.3rem 1.4rem 1.4rem;
}
.how-step__n {
  position: absolute; top: 1.1rem; right: 1.2rem;
  font-family: var(--mc-font-display); font-weight: 700; font-size: var(--mc-fs-xl);
  color: var(--mc-lime-700); opacity: .85;
}
.how-step__ic { display: block; font-size: 1.6rem; margin-bottom: .5rem; color: var(--mc-ink); }
.how-step b { font-family: var(--mc-font-display); display: block; margin-bottom: .2rem; }
.how-step p { margin: 0; font-size: var(--mc-fs-sm); color: var(--mc-gray-600); }
/* Los pasos rematan en la acción: sin esto la sección explicaba y no llevaba a nada */
.how__cta { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* Colecciones de diseños: los diseños van COMPUESTOS sobre el estuche (dcase,
   de disenos.css) — la miniatura JPG plana de fondo se veía mal. */
.dz-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.dz-group {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius-lg);
  transition: box-shadow var(--mc-t), transform var(--mc-t), border-color var(--mc-t);
}
.dz-group:hover { box-shadow: var(--mc-shadow-lg); transform: translateY(-3px); border-color: var(--mc-gray-300); }
.dz-group__cases {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
  padding: 1.2rem 1.2rem .4rem;
  background: radial-gradient(120% 120% at 50% 0%, #fff, var(--mc-gray-50));
}
.dz-group__cases .dcase { transition: transform var(--mc-t); }
.dz-group:hover .dcase:nth-child(1) { transform: rotate(-4deg) translateY(-3px); }
.dz-group:hover .dcase:nth-child(3) { transform: rotate(4deg) translateY(-3px); }
.dz-group__body { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.2rem 1.1rem; }
.dz-group__body h4 { margin: 0 0 .15rem; }
.dz-group__count { font-size: var(--mc-fs-sm); color: var(--mc-gray-500); }
.dz-group__go {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-family: var(--mc-font-display); font-weight: 700; font-size: var(--mc-fs-xs);
  text-transform: uppercase; letter-spacing: .04em; color: var(--mc-lime-700);
}
.dz-group:hover .dz-group__go { color: var(--mc-ink); }

/* Reseñas reales en el home */
.home-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .home-reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .home-reviews { grid-template-columns: 1fr; } }
.home-review {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius);
  transition: box-shadow var(--mc-t), transform var(--mc-t);
}
.home-review:hover { box-shadow: var(--mc-shadow-lg); transform: translateY(-3px); }
.home-review__photo { display: block; aspect-ratio: 4 / 3; background: var(--mc-gray-100); }
.home-review__photo img { width: 100%; height: 100%; object-fit: cover; }
.home-review__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.home-review__body .mc-rating { color: #f5a623; font-size: var(--mc-fs-sm); }
.home-review__title { font-family: var(--mc-font-display); }
.home-review__text {
  margin: 0; font-size: var(--mc-fs-sm); color: var(--mc-gray-600);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.home-review__meta {
  /* margin-top auto: nombre y botón anclados juntos al fondo de la tarjeta,
     aunque la reseña sea corta y la grilla la estire */
  margin-top: auto; padding-top: .6rem;
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  font-size: var(--mc-fs-xs); color: var(--mc-gray-500);
}
.home-review__meta .bi { color: var(--mc-success); }
.home-review__prod { text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Compacto y en verde para que se note; no de todo el ancho */
.home-review__cta { margin-top: .55rem; align-self: flex-start; }

/* Tira de beneficios */
.usp { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 2.5rem; }
@media (max-width: 760px) { .usp { grid-template-columns: 1fr 1fr; } }
.usp div { display: flex; gap: .6rem; align-items: center; font-size: var(--mc-fs-sm); color: var(--mc-gray-600); }
.usp .bi { font-size: 1.4rem; color: var(--mc-ink); }

.section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 1.2rem; }
.section-head h2 { margin: 0; }

/* Banda personalizar */
.cta-band { position: relative; overflow: hidden; border-radius: var(--mc-radius-lg); color: #fff; padding: clamp(2rem,5vw,3.5rem); background: radial-gradient(120% 140% at 0% 100%, rgba(30,58,138,.55), transparent 55%), #0a0a0b; }
.cta-band h2 { color: #fff; font-size: var(--mc-fs-3xl); max-width: 18ch; }