/* DeFábrica Directo — Home (referencia 01): banners, confianza, departamentos, carruseles, categorías favoritas y
   franja del boletín. Los textos de los banners escalan con el ancho del propio banner (unidades cqw). */

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Banners ---------- */
.portada {
	padding: 14px 0 0;
	background: var(--df-fondo-suave);
}

.portada__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 55.5fr) minmax(0, 44.5fr);
	gap: 7px;
}

.portada__rejilla--sola {
	grid-template-columns: minmax(0, 1fr);
}

.portada__principal {
	position: relative;
	aspect-ratio: 1.8 / 1;
	overflow: hidden;
	border-radius: 4px;
	background: var(--df-antracita);
	container-type: inline-size;
}

.diapositiva {
	position: absolute;
	inset: 0;
}

.diapositiva[hidden] {
	display: none;
}

.diapositiva__foto,
.banner__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo oscuro a la izquierda para que el texto blanco se lea sobre cualquier foto */
.diapositiva::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 28, 38, 0.6) 0%, rgba(20, 28, 38, 0.32) 42%, rgba(20, 28, 38, 0) 68%);
	pointer-events: none;
}

.diapositiva__texto {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 100%;
	max-width: 66%;
	padding: 0 0 4% 8.8%;
	color: var(--df-blanco);
}

.diapositiva__antetitulo {
	margin: 0;
	font-family: var(--df-fuente-banner);
	font-size: clamp(16px, 5.4cqw, 44px);
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

.diapositiva__titulo {
	margin: 0.04em 0 0.08em;
	font-family: var(--df-fuente-banner);
	font-size: clamp(34px, 11.5cqw, 108px);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--df-blanco);
}

.diapositiva__subtitulo {
	max-width: 30ch;
	margin: 0.4em 0 0;
	font-size: clamp(14px, 2.9cqw, 24px);
	line-height: 1.25;
}

.promo {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"pre pre"
		"valor post";
	align-items: end;
	column-gap: 0.4em;
	margin: 0.8em 0 0;
	padding: 0.4em 0.9em 0.5em;
	border-radius: 10px;
	background: var(--df-naranja-aa); /* «HASTA» y «DE DESCUENTO» son texto pequeño en blanco: naranja AA (docs/15, sección 4) */
	font-family: var(--df-fuente-banner);
	font-size: clamp(14px, 2.6cqw, 22px);
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

.promo__pre {
	grid-area: pre;
	font-size: 0.75em;
}

.promo__valor {
	grid-area: valor;
	font-size: 3.6em;
	font-weight: 700;
	line-height: 0.9;
}

.promo__post {
	grid-area: post;
	padding-bottom: 0.2em;
}

.diapositiva__boton {
	min-height: 0;
	height: clamp(38px, 6.4cqw, 52px);
	margin-top: 1.1em;
	padding: 0 1.2em;
	border: 0;
	font-size: clamp(14px, 2.4cqw, 18px);
	font-weight: 600;
	color: var(--df-texto-fuerte);
	box-shadow: 0 4px 14px rgba(20, 24, 29, 0.18);
}

.diapositiva__boton .icono,
.banner__boton .icono {
	width: 1em;
	height: 1em;
}

.diapositiva__boton:hover {
	background: var(--df-naranja-suave);
}

.portada__puntos {
	position: absolute;
	bottom: calc(5% - 7px);
	left: 50%;
	z-index: 2;
	display: flex;
	transform: translateX(-50%);
}

/* Botón de 24 × 24 px (tamaño mínimo de toque, WCAG 2.2) con el punto de 10 px dibujado dentro. */
.portada__punto {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.portada__punto::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 1px 3px rgba(20, 24, 29, 0.3);
}

.portada__punto[aria-current="true"]::before {
	background: var(--df-naranja);
}

/* Tres banners apilados: foto completa y panel de texto a la derecha */
.portada__banners {
	display: grid;
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.banner {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: var(--df-banner-velo);
	container-type: inline-size;
}

.banner__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 45%;
	padding: 0 4% 0 9%;
	background: linear-gradient(90deg, rgba(94, 121, 146, 0) 0%, rgba(94, 121, 146, 0.86) 22%, rgba(94, 121, 146, 0.92) 100%);
	color: var(--df-blanco);
}

.banner__titulo {
	margin: 0;
	font-family: var(--df-fuente-banner);
	font-size: clamp(20px, 6cqw, 40px);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	color: var(--df-blanco);
}

.banner__texto {
	margin: 0.3em 0 0;
	font-size: clamp(12px, 2.8cqw, 17px);
	line-height: 1.25;
}

.banner__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-top: 0.8em;
	padding: 0.5em 1em;
	border-radius: 6px;
	background: var(--df-blanco);
	font-size: clamp(12px, 2.6cqw, 15px);
	font-weight: 600;
	color: var(--df-texto-fuerte);
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(20, 24, 29, 0.15);
}

.banner__boton:hover {
	background: var(--df-naranja-suave);
}

/* ---------- Franja de confianza (Trustpilot) ---------- */
.confianza {
	padding: 10px 0 12px;
	background: var(--df-fondo-suave);
}

.confianza__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 28px;
	min-height: 28px;
}

.confianza__trustpilot {
	width: min(420px, 100%);
}

.confianza__texto {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding-left: 28px;
	border-left: 1px solid var(--df-borde);
	font-size: 0.8125rem;
	color: var(--df-texto-2);
	text-decoration: none;
}

.confianza__texto .icono {
	width: 14px;
	height: 14px;
}

a.confianza__texto:hover {
	color: var(--df-texto-fuerte);
}

/* La barra de beneficios va aquí, sobre fondo blanco (en el resto de páginas, encima del pie) */
.home .beneficios,
.page-template-default.home .beneficios {
	border-top: 0;
}

/* Título con raya naranja corta debajo (referencia 01) */
.seccion-productos__titulo--subrayado {
	position: relative;
	padding-bottom: 7px;
}

.seccion-productos__titulo--subrayado::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 92px;
	height: 3px;
	border-radius: 2px;
	background: var(--df-naranja);
}

.home .seccion-productos {
	padding-top: 22px;
}

/* ---------- Nuestras categorías favoritas ---------- */
.favoritas {
	padding: 10px 0 24px;
	background: var(--df-blanco);
}

.favoritas__lista {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.favorita {
	position: relative;
	display: block;
	aspect-ratio: 1.92 / 1;
	overflow: hidden;
	border-radius: var(--df-radio);
	background: var(--df-campo);
}

.favorita__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.favorita:hover .favorita__foto {
	transform: scale(1.04);
}

.favorita__nombre {
	position: absolute;
	bottom: 0;
	left: 0;
	max-width: 85%;
	padding: 9px 18px 9px 14px;
	border-radius: 0 var(--df-radio) 0 0;
	background: var(--df-blanco);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--df-texto-fuerte);
}

/* ---------- Franja del boletín ---------- */
.franja-boletin {
	padding: 16px 0;
	background: var(--df-fondo-suave);
}

.franja-boletin__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 32px;
}

.franja-boletin__texto {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-left: 24px;
}

.franja-boletin__icono {
	flex: none;
	width: 34px;
	height: 34px;
	color: var(--df-naranja);
}

.franja-boletin__titulo {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--df-texto-fuerte);
}

.franja-boletin__texto p {
	margin: 2px 0 0;
	font-size: 0.8125rem;
	color: var(--df-texto-2);
}

.franja-boletin .boletin {
	display: flex;
	flex: 1 1 520px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px 24px;
	max-width: 760px;
}

.franja-boletin .boletin__fila {
	display: flex;
	flex: 1 1 360px;
	gap: 8px;
}

.franja-boletin .boletin__correo {
	flex: 1;
	min-width: 0;
}

/* ---------- Responsive (especificación §34) ---------- */
@media (max-width: 1023px) {
	.portada__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}

	.portada__banners {
		grid-template-rows: none;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.banner {
		aspect-ratio: 1.15 / 1;
	}

	.banner__panel {
		top: auto;
		left: 0;
		width: 100%;
		height: auto;
		padding: 14% 8% 8%;
		background: linear-gradient(180deg, rgba(94, 121, 146, 0) 0%, rgba(94, 121, 146, 0.88) 30%);
	}

	.favoritas__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.franja-boletin__texto {
		padding-left: 0;
	}

	.franja-boletin .boletin {
		justify-content: flex-start;
		max-width: none;
	}
}

@media (max-width: 767px) {
	.portada {
		padding-top: 0;
	}

	.portada .contenedor {
		padding-inline: 0;
	}

	.portada__principal {
		aspect-ratio: 1.15 / 1;
		border-radius: 0;
	}

	.diapositiva__texto {
		max-width: 88%;
		padding-left: 6%;
	}

	.portada__banners {
		grid-template-columns: minmax(0, 1fr);
		padding: 0 var(--df-margen);
	}

	.banner {
		aspect-ratio: 2.6 / 1;
	}

	.banner__panel {
		top: 0;
		left: auto;
		width: 52%;
		height: 100%;
		padding: 0 5% 0 10%;
		background: linear-gradient(90deg, rgba(94, 121, 146, 0) 0%, rgba(94, 121, 146, 0.88) 20%);
	}

	.favoritas__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}