/*
 * Zapatelas: componentes reutilizables de HANDOFF §3 (UI-03).
 * Solo colores de HANDOFF §3, siempre como variables --wp--preset--color--*.
 * Referencia visual: design/Main.dc.html, Tienda, Producto, Blog, Articulo y Nosotros.
 * Se carga en todas las páginas; la muestra (?zl-componentes=1) los reúne para compararlos.
 * Las píldoras de talla y el selector de cantidad viven en woocommerce.css (la muestra lo carga).
 * Cada bloque lleva el valor de data-componente de la lista cerrada del plan 02-07.
 */

/* --- Compartido -------------------------------------------------------------- */

/* Antetítulo: 13 px / 600 / mayúsculas / 0,14 em en brand. */
.zl-antetitulo {
	font-size: var(--wp--preset--font-size--antetitulo);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

/* Hueco de imagen: caja linen con texto placeholder-text (los huecos [FOTO: …] de las maquetas). */
.zl-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 16px;
	background-color: var(--wp--preset--color--linen);
	color: var(--wp--preset--color--placeholder-text);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

.zl-ph--220 { height: 220px; }
.zl-ph--240 { height: 240px; }
.zl-ph--300 { height: 300px; }
.zl-ph--320 { height: 320px; }
.zl-ph--380 { height: 380px; }
.zl-ph--420 { height: 420px; }
.zl-ph--440 { height: 440px; }
.zl-ph--r16 { border-radius: 16px; }
.zl-ph--r20 { border-radius: 20px; }
.zl-ph--r24 { border-radius: 24px; }
.zl-ph--arco { border-radius: 200px 200px 24px 24px; }
.zl-ph--profundo {
	background-color: var(--wp--preset--color--brand-deep);
	color: var(--wp--preset--color--white);
}

.zl-ph--avatar {
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	padding: 0;
	border-radius: 50%;
	font-size: 11px;
}

/* Enlaces de componentes: sin subrayado (la maqueta quita el de los enlaces de tarjeta). */
.zl-card,
.zl-destacada,
.zl-coleccion,
.zl-chip,
.zl-share,
.zl-flotante__enlace {
	color: inherit;
	text-decoration: none;
}

/* --- Botones (boton-rojo, boton-linea, boton-blanco) ------------------------------ */

/* Botón: píldora de 48 px de alto, 15 px / 600 (el color y el hover vienen de theme.json y theme.css). */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 28px;
	line-height: 1.2;
	text-decoration: none;
}

/* Los botones de la muestra y de las franjas van en fila con 16 px entre ellos. */
.zl-c .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Botón con borde blanco sobre un fondo brand. */
.zl-blanco-linea.wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--white);
	background-color: transparent;
	color: var(--wp--preset--color--white);
}

.zl-blanco-linea.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand);
}

/* Foco blanco sobre fondos rojos (el rojo de marca no se ve sobre brand). */
.has-brand-background-color :focus-visible,
.zl-franja :focus-visible {
	outline-color: var(--wp--preset--color--white);
}

.zl-c--franja {
	padding: 40px;
	border-radius: 24px;
}

/* --- Tarjetas: product-card, category-card, post-card ------------------------------ */

.zl-cards {
	display: grid;
	gap: 32px 20px;
}

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

.zl-cards--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zl-card {
	display: block;
	min-width: 0;
}

.zl-card__nombre {
	margin-top: 14px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.zl-card__nombre--grande {
	font-size: 18px;
}

.zl-card__nombre--post {
	margin-top: 6px;
	font-size: 19px;
}

.zl-card__nombre--tarjeta {
	margin-top: 6px;
	font-size: 18px;
}

.zl-card:hover .zl-card__nombre {
	color: var(--wp--preset--color--brand);
}

.zl-card__precio {
	margin-top: 2px;
	font-size: 15px;
	color: var(--wp--preset--color--ink-soft);
}

.zl-card__desc {
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
}

.zl-card__meta {
	margin-top: 14px;
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
}

/* Variante blanca (portada y «Sigue leyendo»): tarjeta con radio 20 y 24 px de relleno. */
.zl-card--blanca {
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--wp--preset--color--white);
}

.zl-card--blanca .zl-card__cuerpo {
	padding: 24px;
}

.zl-card--blanca .zl-card__meta {
	margin-top: 0;
}

.zl-c__arena {
	padding: 32px;
	border-radius: 24px;
	background-color: var(--wp--preset--color--sand);
}

/* --- featured-post ------------------------------------------------------------------- */

.zl-destacada {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	overflow: hidden;
	border-radius: 24px;
	background-color: var(--wp--preset--color--white);
}

.zl-ph--destacada {
	min-height: 420px;
	padding: 16px;
}

.zl-destacada__cuerpo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 48px;
}

.zl-destacada__meta {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

.zl-destacada__titulo {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.zl-destacada:hover .zl-destacada__titulo {
	color: var(--wp--preset--color--brand);
}

.zl-destacada__entradilla {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
}

.zl-destacada__enlace {
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

/* --- chip y paginacion ---------------------------------------------------------------- */

.zl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.zl-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background-color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
}

.zl-chip:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

/* Filtro activo: ink con texto blanco. */
.zl-chip[aria-pressed="true"],
.zl-chip[aria-pressed="true"]:hover {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Página actual: brand con texto blanco. */
.zl-chip[aria-current="page"],
.zl-chip[aria-current="page"]:hover {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

.zl-paginacion {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* --- tres-valores --------------------------------------------------------------------- */

.zl-valores {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.zl-valor {
	padding: 32px;
	border-radius: 20px;
	background-color: var(--wp--preset--color--white);
}

.zl-valor__titulo {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.zl-valor__texto {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-soft);
}

/* --- franja-mision -------------------------------------------------------------------- */

.zl-franja {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 64px;
	padding: 64px;
	border-radius: 24px;
}

.zl-franja__texto {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.zl-franja__antetitulo {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.zl-franja__titulo {
	margin: 0;
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.zl-franja__parrafo {
	max-width: 520px;
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
}

/* --- coleccion ------------------------------------------------------------------------ */

.zl-colecciones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.zl-coleccion {
	position: relative;
	display: block;
	min-width: 0;
}

.zl-coleccion__etiqueta {
	position: absolute;
	bottom: 24px;
	left: 24px;
	max-width: calc(100% - 48px);
	padding: 16px 22px;
	border-radius: 14px;
	background-color: var(--wp--preset--color--white);
}

.zl-coleccion__tipo,
.zl-flotante__rotulo,
.zl-autor__rotulo {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

.zl-coleccion__nombre {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.zl-coleccion:hover .zl-coleccion__nombre {
	color: var(--wp--preset--color--brand);
}

/* --- valoracion-google ---------------------------------------------------------------- */

.zl-resenas {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.zl-resenas__titulo {
	margin: 0;
	font-size: clamp(28px, 3.5vw, 36px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.zl-resenas__nota {
	display: flex;
	align-items: center;
	gap: 14px;
}

.zl-resenas__cifra {
	font-size: 56px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--brand);
}

.zl-resenas__sobre {
	font-size: 15px;
	font-weight: 600;
}

.zl-resenas__total {
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
}

.zl-resenas__pendiente {
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
}

/* --- faq ------------------------------------------------------------------------------ */

.zl-faq {
	border-top: 1px solid var(--wp--preset--color--linen);
}

.zl-faq details {
	border-bottom: 1px solid var(--wp--preset--color--linen);
}

.zl-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	min-height: 44px;
	padding: 22px 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.zl-faq summary::-webkit-details-marker {
	display: none;
}

.zl-faq__mas {
	flex: 0 0 auto;
	color: var(--wp--preset--color--brand);
	transition: transform 0.15s ease;
}

.zl-faq details[open] .zl-faq__mas {
	transform: rotate(45deg);
}

.zl-faq details p {
	margin: 0 0 22px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
}

/* --- autor ---------------------------------------------------------------------------- */

.zl-autor {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	padding: 28px;
	border-radius: 20px;
	background-color: var(--wp--preset--color--white);
}

.zl-autor__nombre {
	margin-top: 2px;
	font-size: 18px;
	font-weight: 600;
}

.zl-autor__bio {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

/* --- cita ----------------------------------------------------------------------------- */

.zl-cita {
	margin: 0;
	padding: 0 0 0 28px;
	border-left: 4px solid var(--wp--preset--color--brand);
	font-size: clamp(21px, 2.6vw, 26px);
	font-weight: 500;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
}

.zl-cita p {
	margin: 0;
}

/* --- compartir ------------------------------------------------------------------------ */

.zl-compartir {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 24px 0;
	border-top: 1px solid var(--wp--preset--color--linen);
	border-bottom: 1px solid var(--wp--preset--color--linen);
}

.zl-compartir__rotulo {
	margin-right: 8px;
	font-size: 14px;
	font-weight: 600;
}

.zl-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background-color: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 500;
}

.zl-share:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

/* --- migas ---------------------------------------------------------------------------- */

.zl-migas {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	list-style: none;
}

.zl-migas li + li::before {
	content: "/";
	margin-right: 8px;
}

.zl-migas a {
	display: inline-block;
	/* Zona táctil de 44 px sin alterar la altura de la fila (HANDOFF §3). */
	margin: -12px -4px;
	padding: 12px 4px;
	color: inherit;
	text-decoration: underline;
}

.zl-migas a:hover {
	color: var(--wp--preset--color--brand);
}

/* --- Página de la muestra ------------------------------------------------------------- */

.zl-muestra {
	padding-bottom: 96px;
}

.zl-muestra__intro {
	padding-block: 56px 16px;
}

.zl-muestra__intro > * {
	margin-block: 0 12px;
}

.zl-muestra__seccion {
	padding-block: 40px;
	border-top: 1px solid var(--wp--preset--color--linen);
}

.zl-muestra__titulo {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 600;
	line-height: 1.25;
}

.zl-muestra__ref {
	margin: 0 0 24px;
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
}

.zl-muestra__sub {
	margin: 32px 0 12px;
	font-size: 14px;
	font-weight: 600;
}

.zl-muestra__etiqueta {
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
}

/* --- Móvil: una columna a 900 px o menos, como las maquetas ---------------------------- */

@media (max-width: 900px) {
	.zl-cards--3,
	.zl-cards--4,
	.zl-valores,
	.zl-colecciones,
	.zl-destacada,
	.zl-franja {
		grid-template-columns: minmax(0, 1fr);
	}

	.zl-franja {
		gap: 32px;
		padding: 32px 24px;
	}

	.zl-c--franja {
		padding: 32px 24px;
	}

	.zl-destacada__cuerpo {
		padding: 28px 24px;
	}

	.zl-destacada__titulo {
		font-size: 26px;
	}

	.zl-ph--destacada {
		min-height: 260px;
	}

	.zl-c__arena {
		padding: 20px;
	}

	.zl-muestra__intro {
		padding-block: 40px 8px;
	}
}