/* ══════════════════════════════════════════════════════════════════════════
   PÁGINAS SEO Y COMPONENTES REUTILIZABLES

   Hoja acotada a las landings y a las zonas editables de los archivos de
   categoría y marca. Se carga solo donde hace falta (ver inc/enqueue.php): una
   ficha de producto no tiene por qué pagar el CSS de una landing.

   Todo hereda del sistema que ya existe —tokens, radios, escala tipográfica—
   para que una landing no se vea como una página de otra web. Aquí no se
   inventa ni un color ni un tamaño.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── La plantilla ─────────────────────────────────────────────────────────── */

.zihouse-main--landing {
	padding-bottom: var(--zihouse-space-2xl);
}

.zihouse-landing__head {
	padding-top: var(--zihouse-space-lg);
	padding-bottom: var(--zihouse-space-lg);
	margin-bottom: var(--zihouse-space-xl);
	border-bottom: 1px solid var(--zihouse-color-border);
}

.zihouse-landing__migas {
	margin-bottom: var(--zihouse-space-md);
	font-size: var(--zihouse-text-xs);
	color: var(--zihouse-color-ink-muted);
}

.zihouse-landing__title {
	margin: 0;
	font-family: var(--zihouse-font-display);
	/* Un escalón por debajo del titular de la portada: una landing informa, no
	   abre la marca. */
	font-size: var(--zihouse-text-3xl);
	line-height: var(--zihouse-leading-tight);
	text-wrap: balance;
}

.zihouse-landing__lede {
	margin: var(--zihouse-space-sm) 0 0;
	max-width: 58ch;
}

/* Separación uniforme entre componentes: el editor no tiene que pensar en
   márgenes, solo en orden. */
.zihouse-landing__cuerpo > * + * { margin-top: var(--zihouse-space-xl); }

.zihouse-landing__cuerpo > p,
.zihouse-landing__cuerpo > ul,
.zihouse-landing__cuerpo > ol {
	max-width: 68ch;
	line-height: 1.65;
}

.zihouse-landing__cuerpo > h2 {
	margin-top: var(--zihouse-space-2xl);
	font-size: var(--zihouse-text-xl);
}

.zihouse-landing__cuerpo > h3 { font-size: var(--zihouse-text-lg); }

/* ── Cabecera común de los componentes ────────────────────────────────────── */

.zihouse-seo__head { margin-bottom: var(--zihouse-space-md); }

.zihouse-seo__title {
	margin: 0;
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-xl);
	font-weight: 400;
	line-height: var(--zihouse-leading-tight);
	text-wrap: balance;
}

/* ── Rejilla de productos ─────────────────────────────────────────────────── */

.zihouse-seo-productos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--zihouse-space-lg) var(--zihouse-space-md);
	/* Dos columnas en el teléfono: una sola convierte ocho productos en ocho
	   pantallas de scroll. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zihouse-seo-productos__lista > li { margin: 0; }
.zihouse-seo-productos__lista > li::before { content: none; }

.zihouse-seo-productos__mas { margin: var(--zihouse-space-md) 0 0; }

@media (min-width: 48rem) {
	.zihouse-seo-productos__lista[data-columnas="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.zihouse-seo-productos__lista[data-columnas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Tipos de producto ────────────────────────────────────────────────────── */

.zihouse-seo-tipos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--zihouse-space-md) var(--zihouse-space-sm);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zihouse-seo-tipos__lista > li { margin: 0; }
.zihouse-seo-tipos__lista > li::before { content: none; }

.zihouse-seo-tipo { display: block; text-decoration: none; color: inherit; }

.zihouse-seo-tipo__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--zihouse-radius-media);
	background: var(--zihouse-color-surface);
	margin-bottom: var(--zihouse-space-2xs);
}

.zihouse-seo-tipo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zihouse-seo-tipo__nombre {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-lg);
	line-height: 1.15;
}

.zihouse-seo-tipo:hover .zihouse-seo-tipo__nombre { color: var(--zihouse-color-accent); }

@media (min-width: 48rem) {
	.zihouse-seo-tipos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Marcas ───────────────────────────────────────────────────────────────── */

.zihouse-seo-marcas__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--zihouse-space-2xs);
}

.zihouse-seo-marcas__lista > li { margin: 0; }
.zihouse-seo-marcas__lista > li::before { content: none; }

.zihouse-seo-marca {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	padding: 0.6rem 1.05rem;
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-control);
	background: var(--zihouse-color-bg);
	color: var(--zihouse-color-ink);
	text-decoration: none;
	transition: border-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}

.zihouse-seo-marca:hover { border-color: var(--zihouse-color-ink); }
.zihouse-seo-marca__nombre { font-weight: 600; font-size: var(--zihouse-text-sm); }
.zihouse-seo-marca__num { font-size: var(--zihouse-text-xs); color: var(--zihouse-color-ink-muted); }

/* ── Preguntas frecuentes ─────────────────────────────────────────────────── */

/* <details> nativo: se pliega sin una línea de JavaScript, responde al teclado
   y el buscador lee la respuesta aunque esté cerrada. */
.zihouse-seo-faq__lista { border-top: 1px solid var(--zihouse-color-border); }

.zihouse-seo-faq__item { border-bottom: 1px solid var(--zihouse-color-border); }

.zihouse-seo-faq__pregunta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--zihouse-space-sm);
	padding: 1rem 0;
	cursor: pointer;
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-base);
	font-weight: 600;
	color: var(--zihouse-color-ink);
	list-style: none;
}

/* El triángulo del navegador se sustituye por un signo que sigue el sistema. */
.zihouse-seo-faq__pregunta::-webkit-details-marker { display: none; }

.zihouse-seo-faq__pregunta::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--zihouse-font-body);
	font-weight: 400;
	font-size: 1.25em;
	line-height: 1;
	color: var(--zihouse-color-ink-muted);
	transition: transform var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}

.zihouse-seo-faq__item[open] .zihouse-seo-faq__pregunta::after { content: "−"; }

.zihouse-seo-faq__pregunta:focus-visible {
	outline: 2px solid var(--zihouse-color-accent);
	outline-offset: 2px;
}

.zihouse-seo-faq__respuesta { padding: 0 0 1rem; }

.zihouse-seo-faq__respuesta p {
	margin: 0;
	max-width: 68ch;
	line-height: 1.65;
	color: var(--zihouse-color-ink-muted);
}

/* ── Tienda física ────────────────────────────────────────────────────────── */

.zihouse-seo-tienda__cuerpo {
	display: grid;
	gap: var(--zihouse-space-md);
	align-items: start;
}

.zihouse-seo-tienda__datos { font-style: normal; }

.zihouse-seo-tienda__linea {
	margin: 0 0 var(--zihouse-space-2xs);
	line-height: 1.6;
}

.zihouse-seo-tienda__acciones { margin: var(--zihouse-space-sm) 0 0; }

@media (min-width: 48rem) {
	.zihouse-seo-tienda__cuerpo { grid-template-columns: 1fr 1fr; gap: var(--zihouse-space-xl); }
	.zihouse-seo-tienda__cuerpo > * { align-self: stretch; }
}

/* ── Enlaces internos ─────────────────────────────────────────────────────── */

.zihouse-seo-enlaces__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--zihouse-space-2xs) var(--zihouse-space-sm);
}

.zihouse-seo-enlaces__lista > li { margin: 0; }
.zihouse-seo-enlaces__lista > li::before { content: none; }

.zihouse-seo-enlaces__lista a {
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink);
	text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
}

.zihouse-seo-enlaces__lista a:hover { color: var(--zihouse-color-accent); }

/* ── Llamada a la acción ──────────────────────────────────────────────────── */

.zihouse-seo-cta {
	padding: var(--zihouse-space-lg);
	border-radius: var(--zihouse-radius-media);
	background: var(--zihouse-color-surface);
	text-align: center;
}

.zihouse-seo-cta__titulo {
	margin: 0 0 var(--zihouse-space-2xs);
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-xl);
	font-weight: 400;
}

.zihouse-seo-cta__texto {
	margin: 0 auto var(--zihouse-space-md);
	max-width: 52ch;
	color: var(--zihouse-color-ink-muted);
}

/* ── Reseñas ──────────────────────────────────────────────────────────────── */

.zihouse-seo-resenas__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--zihouse-space-md);
}

.zihouse-seo-resenas__lista > li::before { content: none; }

.zihouse-seo-resena {
	margin: 0;
	padding: var(--zihouse-space-md);
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-media);
	background: var(--zihouse-color-bg);
}

.zihouse-seo-resena__estrellas {
	margin: 0 0 var(--zihouse-space-2xs);
	color: var(--zihouse-color-accent);
	letter-spacing: 0.1em;
}

.zihouse-seo-resena__texto { margin: 0 0 var(--zihouse-space-sm); }

.zihouse-seo-resena__texto p {
	margin: 0;
	line-height: 1.6;
}

.zihouse-seo-resena__firma {
	margin: 0;
	font-size: var(--zihouse-text-xs);
	color: var(--zihouse-color-ink-muted);
}

.zihouse-seo-resena__producto { display: block; }

@media (min-width: 48rem) {
	.zihouse-seo-resenas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Introducción de categoría / marca ────────────────────────────────────── */

/* La zona de encima de la rejilla. Corta a propósito: si necesita respirar
   mucho, va debajo, en la guía de compra. */
.zihouse-tax-intro {
	max-width: 68ch;
	margin: 0 0 var(--zihouse-space-lg);
}

.zihouse-tax-intro p {
	margin: 0 0 var(--zihouse-space-xs);
	line-height: 1.65;
	color: var(--zihouse-color-ink-muted);
}

.zihouse-tax-intro p:last-child { margin-bottom: 0; }