/* =============================================================
   «DESCUBRE» — portada (15-sep)

   ⚠️ VITRINA TEMPORAL: tres opciones pintadas una debajo de otra para que Sebas
   elija. Cuando elija, se borran de aquí las dos que no ganen y la etiqueta
   `.descubre-opcion`, igual que su marcado en front-page.php y sus tokens en
   tokens.css. Si queda solo una, estas reglas pueden pasar a main.css.

   Solo se carga en la portada (lo encola front-page.php). Todo sale de tokens:
   `--descubre-*` en tokens.css. Datos: excellent-core/includes/descubre.php.
   ============================================================= */

/* La etiqueta de la vitrina. FUERA de la pieza, para no cambiarle ni ancho ni aire. */
.descubre-opcion {
	margin: 0 0 var(--space-2);
	font-size: var(--descubre-etiqueta-fs);
	font-weight: 600;
	color: var(--c-body);
}

/* Foco visible en todo lo que se pulsa de las tres. */
.descubre-a__pieza:focus-visible,
.descubre-b__enlace:focus-visible {
	outline: var(--focus-w) solid var(--c-ink);
	outline-offset: 2px;
}

/* -------------------------------------------------------------
   A · Editorial asimétrica: ofertas grande, dos apiladas al lado
   ------------------------------------------------------------- */
.descubre-a {
	display: grid;
	grid-template-columns: var(--descubre-a-cols);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--descubre-gap);
	height: var(--descubre-a-alto);
}
.descubre-a__pieza {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
	background: var(--c-ink);
	color: var(--c-ink-inv);
}
.descubre-a__pieza--grande { grid-row: 1 / span 2; }
/* Con menos de tres huecos (se ocultó alguno en el panel) no quedan celdas vacías. */
.descubre-a__pieza--grande:only-child { grid-column: 1 / -1; }
.descubre-a__pieza:nth-child(2):last-child { grid-row: 1 / span 2; }
.descubre-a__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--descubre-dur) var(--ease);
}
.descubre-a__pieza::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--descubre-velo);
}
.descubre-a__pieza:hover .descubre-a__foto { transform: scale(var(--descubre-zoom)); }
.descubre-a__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
	max-width: var(--descubre-a-texto-w);
	padding: var(--descubre-pad);
}
.descubre-a__rotulo { font-size: var(--fs-xs); font-weight: 600; color: var(--c-body-inv); }
.descubre-a__titulo { margin: 0; font-size: var(--fs-h3); color: var(--c-ink-inv); }
.descubre-a__pieza--grande .descubre-a__titulo { font-size: var(--descubre-a-titulo-fs); }
.descubre-a__bajada { font-size: var(--fs-sm); line-height: 1.45; color: var(--c-body-inv); }
.descubre-a__cta {
	margin-top: var(--space-05);
	padding-bottom: var(--space-05);
	border-bottom: var(--hairline) solid currentColor;
	font-size: var(--fs-xs);
	font-weight: 600;
}

@media (max-width: 560px) {
	/* Tres bloques bajos, uno debajo de otro: no se reparte el ancho de un celular. */
	.descubre-a { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
	.descubre-a__pieza { min-height: var(--descubre-a-movil); }
	.descubre-a > .descubre-a__pieza:nth-child(n) { grid-row: auto; } /* (0,3,0): gana a los ajustes de pocos huecos */
	.descubre-a__pieza--grande { min-height: var(--descubre-a-movil-grande); }
	.descubre-a__pieza--grande .descubre-a__titulo { font-size: var(--fs-h3); }
	/* En un bloque de 245px la bajada tapaba la foto entera: se queda el titular. */
	.descubre-a__bajada { display: none; }
	.descubre-a__texto { padding: var(--space-3); }
}

/* -------------------------------------------------------------
   B · Franja de accesos con foto de producto
   ------------------------------------------------------------- */
.descubre-b {
	display: grid;
	grid-template-columns: repeat(var(--descubre-b-cols), minmax(0, 1fr));
	gap: var(--descubre-b-gap);
}
.descubre-b__enlace { display: flex; flex-direction: column; gap: var(--space-05); color: var(--c-ink); }
.descubre-b__media {
	margin-bottom: var(--space-1);
	aspect-ratio: var(--descubre-b-ratio);
	overflow: hidden;
	background: var(--c-soft);
}
.descubre-b__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--descubre-dur) var(--ease);
}
.descubre-b__enlace:hover .descubre-b__foto { transform: scale(var(--descubre-zoom)); }
.descubre-b__nombre { font-family: var(--font-display); font-size: var(--descubre-b-nombre-fs); font-weight: 600; line-height: 1.2; }
.descubre-b__enlace:hover .descubre-b__nombre { color: var(--c-gold); }
.descubre-b__resumen { font-size: var(--descubre-b-resumen-fs); line-height: 1.35; color: var(--c-body); }
/* El rojo de oferta, el mismo del rótulo «Sale» del menú. */
.descubre-b__resumen--oferta { color: var(--c-sale); font-weight: 600; }

@media (max-width: 1024px) {
	/* Se desliza en vez de apilarse: seis accesos en dos filas serían otra rejilla más.
	   La franja llega al borde de la pantalla (sale del gutter y lo devuelve como
	   relleno), así el acceso cortado a la derecha avisa de que hay más. */
	.descubre-b {
		display: flex;
		overflow-x: auto;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.descubre-b::-webkit-scrollbar { display: none; }
	.descubre-b__item { flex: 0 0 var(--descubre-b-item-w); scroll-snap-align: start; }
}

/* -------------------------------------------------------------
   C · Banner único de campaña
   ------------------------------------------------------------- */
.descubre-c {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--descubre-c-alto);
	overflow: hidden;
	isolation: isolate;
	background: var(--c-ink);
}
.descubre-c__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--descubre-c-foco);
}
.descubre-c::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--descubre-c-velo);
}
.descubre-c__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	max-width: var(--descubre-c-texto-w);
	padding: var(--descubre-pad);
}
.descubre-c__rotulo { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-body-inv); }
.descubre-c__titulo { margin: 0; font-size: var(--fs-h1); color: var(--c-ink-inv); }
.descubre-c__bajada { margin: 0; color: var(--c-body-inv); }
.descubre-c__acciones { display: flex; flex-wrap: wrap; gap: var(--acciones-gap); margin-top: var(--space-1); }

@media (max-width: 560px) {
	/* La foto arriba, entera, y el texto debajo sobre tinta: sobre una foto de 390px
	   el titular, el texto y dos botones taparían justo lo que se quiere enseñar. */
	.descubre-c { flex-direction: column; align-items: stretch; min-height: 0; }
	.descubre-c__foto { position: static; z-index: auto; height: auto; aspect-ratio: var(--descubre-c-ratio-movil); object-position: center 30%; }
	.descubre-c::after { display: none; }
	.descubre-c__texto { max-width: none; padding: var(--space-3); }
	.descubre-c__titulo { font-size: var(--fs-h3); }
	.descubre-c__acciones { align-self: stretch; }
	.descubre-c__acciones .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.descubre-a__foto, .descubre-b__foto { transition: none; }
	.descubre-a__pieza:hover .descubre-a__foto, .descubre-b__enlace:hover .descubre-b__foto { transform: none; }
}