/* D'Shop — Inicio */

/* Portada partida en dos fotos */
.portada { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: clamp(420px, 45.1vw, 650px); }
.portada__foto { position: relative; overflow: hidden; }
.portada__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.portada__imagen { position: absolute; inset: 0; display: block; }
.portada__imagen img { object-position: center bottom; }
.portada__foto--izq { background: var(--morado-medio); }
.portada__foto--izq .nota-foto { color: var(--lavanda-claro); }
.portada__foto--der { background: var(--morado-profundo); }
.portada__foto--der .nota-foto { left: auto; right: 20px; color: var(--lavanda); }

.portada__texto { z-index: 2; position: absolute; inset: clamp(56px, 8.2vw, 118px) 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; padding-inline: var(--space-4); pointer-events: none; }
.portada__texto > * { pointer-events: auto; }
.portada h1 { margin: 0; font-size: clamp(44px, 6.4vw, 92px); line-height: 1; letter-spacing: -.005em; color: var(--sobre-morado); text-align: center; text-wrap: balance; }
.portada__boton { display: flex; align-items: center; justify-content: center; width: 186px; height: 48px; background: var(--fondo); color: var(--tinta); font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; }
.portada__boton:hover { background: var(--lavanda-claro); }
.portada__boton:focus-visible { box-shadow: 0 0 0 2px var(--morado-profundo), 0 0 0 4px var(--sobre-morado); }

/* Capa oscura suave detrás del titular: con fotos reales (a veces claras) el texto blanco siempre se lee. */
.portada--con-foto::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		radial-gradient(ellipse 54% 64% at 50% 30%, color-mix(in srgb, var(--tinta) 66%, transparent) 0%, color-mix(in srgb, var(--tinta) 38%, transparent) 55%, transparent 100%),
		linear-gradient(to bottom, color-mix(in srgb, var(--tinta) 28%, transparent), transparent 55%); }


@media (max-width: 800px) {
	.portada__boton { width: 160px; }
}

/* Franjas de productos del inicio: «Lo más vendido» y «Lo más nuevo» */
.franja-productos { margin-top: 48px; }
.franja-productos__titulo { margin: 0 0 var(--space-6); font-size: clamp(28px, 3.2vw, 40px); line-height: 1; text-transform: uppercase; color: var(--morado-profundo); }
@media (max-width: 800px) {
	.franja-productos { margin-top: 32px; }
}