/* ==========================================================================
   Zarevo v2 — design/pages.css  ·  PIEL "Vidriera cálida"
   Páginas de contenido (Quiénes somos, FAQ, envíos…), prosa editorial, blog,
   resultados de búsqueda, 404 y patrones de contenido.

   El MOTOR (core/*.css) ya resuelve toda la mecánica: contenedores, grillas,
   .vc-prose, .vc-post-card, .vc-search-item, .vc-empty, .vc-404, .vc-cta-band,
   .vc-pagination, .vc-chip y los .vc-btn. Acá aplicamos SOLO la voz de marca:
   display Bricolage en titulares, rojo #9c2a20 quirúrgico (precio/oferta/único
   CTA de conversión — que ya hereda del core), carbón cálido para todo lo demás,
   hairlines --line, sombras cálidas, motion con masa y contenido.

   Port fiel de la decisión de v1 (assets/css/pages.css): hero editorial con
   título display grande, pull-quote itálica centrada, lista de valores como
   filas divididas por hairlines, y FAQ como acordeón de filas (no tarjetas).

   Clases 100% de la capa design (SIN core): .vc-about*, .vc-faqpage*, .vc-faq*
   y todos los .vc-pattern-* (patrones Gutenberg de contenido). Todo lo demás
   sube especificidad sobre el core.
   ========================================================================== */

/* ── Cabecera de página (entry/archive) ─────────────────────────────────
   El motor imprime el título con .vc-page-head__title (page.php, archive.php,
   search.php). Le damos la voz display con hairline inferior y ritmo generoso.
   .vc-page-head ya trae la medida y el margen: acá solo la tipografía. */
.vc-page-head__title,
.entry-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	letter-spacing: -0.025em;
	color: var(--brand-strong);
	text-wrap: balance;
}

/* Cabecera de listados (blog/archivo/búsqueda): hairline de cierre para separar
   el título del contenido con el mismo gesto editorial en todo el sitio. */
.vc-section > .vc-container > .vc-page-head,
.vc-section > .vc-container > .vc-page-head--wide {
	padding-bottom: clamp(var(--sp-4), 3vw, var(--sp-5));
	border-bottom: var(--border-w) solid var(--line);
}
.vc-page-head__desc { text-wrap: pretty; }

/* ── Prosa editorial (.vc-prose) ────────────────────────────────────────
   El core ya fija la medida (68ch en hijos directos), el line-height y el
   blockquote neutro. Acá subimos la voz de marca: titulares display, cuerpo
   --ink-2 más aireado, y links ink con subrayado hairline que vira a rojo. */
.vc-prose { color: var(--ink); }
.vc-prose > p,
.vc-prose > ul,
.vc-prose > ol { color: var(--ink-2); line-height: 1.75; }
.vc-prose h2,
.vc-prose h3,
.vc-prose h4 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: var(--lh-snug);
	color: var(--brand-strong);
	text-wrap: balance;
}
.vc-prose h2 { letter-spacing: -0.025em; }

/* Links de texto: ink con subrayado hairline → rojo en hover (el core los pone
   en brand-strong; acá los alineamos a la receta de link de la dirección). */
.vc-prose a {
	color: var(--ink);
	text-decoration-color: var(--line);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--tr) var(--ease-out), text-decoration-color var(--tr) var(--ease-out);
}
.vc-prose a:hover {
	color: var(--accent-strong);
	text-decoration-color: currentColor;
}

/* Cita: regla de inicio HAIRLINE en rojo (peso --border-w, no un tab grueso)
   sobre tint suave, radio md — la convención tipográfica de "voz destacada"
   que pide la dirección ("blockquote con borde-inicio ... --accent fino"). */
.vc-prose blockquote {
	border-left: var(--border-w) solid var(--accent);
	background: var(--accent-soft);
	color: var(--brand-strong);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.vc-prose blockquote p { color: inherit; }

/* Regla horizontal: hairline cálida con más aire (ya viene del core, la dejamos
   explícita por si la prosa vive fuera de .vc-prose). */
.vc-prose hr { border-top-color: var(--line); }

/* Marcadores de lista con acento rojo discreto (::marker no hereda color del
   texto en todos los motores; lo fijamos para que la viñeta sea de marca). */
.vc-prose > ul > li::marker,
.vc-prose > ol > li::marker { color: var(--accent); }

/* ── Página "Quiénes somos" (.vc-about) ─────────────────────────────────
   Hero editorial: título display grande + bajada legible. Prosa con
   pull-quote itálica centrada y lista de valores como filas con hairlines. */
.vc-about__hero { padding-bottom: clamp(var(--sp-2), 2.5vw, var(--sp-4)); }
.vc-about__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--brand-strong);
	text-wrap: balance;
}
.vc-about__lead {
	margin-top: var(--sp-4);
	max-width: 50ch;
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
	line-height: 1.5;
	color: var(--ink-2);
	text-wrap: pretty;
}
.vc-about__body {
	padding-top: clamp(var(--sp-4), 3vw, var(--sp-6));
	padding-bottom: clamp(var(--sp-6), 5vw, var(--sp-7));
}

/* Pull-quote editorial: display itálica centrada, sin borde ni caja — corta el
   ritmo de la prosa con voz de autor. Anula el blockquote de marca de arriba. */
.vc-about__prose blockquote {
	margin: clamp(var(--sp-6), 5vw, var(--sp-7)) auto;
	padding: 0;
	border: 0;
	background: none;
	max-width: 34ch;
	text-align: center;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
	line-height: 1.28;
	letter-spacing: -0.015em;
	color: var(--accent-strong);
	text-wrap: balance;
}
.vc-about__prose blockquote p { margin: 0; }

/* Lista de valores como filas divididas por hairlines (no tarjetas): mismo
   gesto editorial que el FAQ, coherencia de sistema. */
.vc-about__prose > ul {
	list-style: none;
	margin: clamp(var(--sp-5), 3.5vw, var(--sp-6)) 0;
	padding: 0;
	max-width: none;
}
.vc-about__prose > ul > li {
	padding: var(--sp-4) 0;
	border-top: var(--border-w) solid var(--line);
	line-height: 1.55;
	color: var(--ink-2);
}
.vc-about__prose > ul > li::marker { content: none; }
.vc-about__prose > ul > li:last-child { border-bottom: var(--border-w) solid var(--line); }
.vc-about__prose > ul > li strong { color: var(--brand-strong); font-weight: 700; }

/* ── Página FAQ (.vc-faqpage) + acordeón (.vc-faq) ──────────────────────
   Hero display + intro en prosa; el acordeón vive como filas con hairlines,
   trigger en display peso medio, chevron que gira en aria-expanded. */
.vc-faqpage__hero { padding-bottom: clamp(var(--sp-2), 2.5vw, var(--sp-4)); }
.vc-faqpage__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
	line-height: var(--lh-tight);
	letter-spacing: -0.025em;
	color: var(--brand-strong);
	text-wrap: balance;
}
.vc-faqpage__lead {
	margin-top: var(--sp-4);
	max-width: 55ch;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	line-height: 1.5;
	color: var(--ink-2);
	text-wrap: pretty;
}
.vc-faqpage__body { padding-top: clamp(var(--sp-4), 3vw, var(--sp-6)); }
.vc-faqpage__intro { margin-bottom: clamp(var(--sp-5), 4vw, var(--sp-6)); }

/* Acordeón como filas divididas por hairlines (no tarjetas). */
.vc-faq {
	display: block;
	border-top: var(--border-w) solid var(--line);
}
.vc-faq__item {
	background: none;
	border: 0;
	border-bottom: var(--border-w) solid var(--line);
	border-radius: 0;
	padding: 0;
}
.vc-faq__q {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}
.vc-faq__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: clamp(var(--sp-4), 2.5vw, var(--sp-5)) 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
	line-height: var(--lh-snug);
	letter-spacing: -0.015em;
	color: var(--brand-strong);
	transition: color var(--tr) var(--ease-out);
}
.vc-faq__trigger:hover { color: var(--accent-strong); }
.vc-faq__trigger:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}
.vc-faq__q-text { text-wrap: balance; }
.vc-faq__chevron {
	flex: none;
	display: grid;
	place-items: center;
	color: var(--brand);
	transition: transform var(--tr-slow) var(--ease-out-quint), color var(--tr) var(--ease-out);
}
.vc-faq__chevron svg { width: 22px; height: 22px; }
.vc-faq__trigger:hover .vc-faq__chevron { color: var(--accent-strong); }
/* El JS setea aria-expanded en el trigger y togglea .is-open + [hidden] en el
   panel. La rotación se ancla al estado accesible (aria-expanded). */
.vc-faq__trigger[aria-expanded="true"] .vc-faq__chevron { transform: rotate(180deg); }

.vc-faq__answer {
	padding: 0 0 clamp(var(--sp-4), 3vw, var(--sp-5));
	max-width: 68ch;
	color: var(--ink-2);
}
.vc-faq__answer > :first-child { margin-top: 0; }
/* Colapso: el motor usa el atributo [hidden] (display:none nativo). Sin JS los
   paneles quedan abiertos (aria-expanded arranca en true) → accesible. */
.vc-faq__answer[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.vc-faq__chevron { transition: color var(--tr) var(--ease-out); }
}

/* CTA de cierre del FAQ: panel cálido con hairline, texto display y el único
   botón de acción (rojo, heredado del core). */
.vc-faqpage__cta {
	margin-top: clamp(var(--sp-6), 6vw, var(--sp-7));
	padding: clamp(var(--sp-5), 4vw, var(--sp-6));
	background: var(--surface-2);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-lg);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
}
.vc-faqpage__cta-text {
	margin: 0;
	max-width: 36ch;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--brand-strong);
	text-wrap: balance;
}

/* ── Banda CTA compartida (.vc-cta-band — page-about.php) ────────────────
   El core ya la resuelve como panel --surface-2 con radio card. Le subimos el
   texto a display; los botones (primario rojo / ghost carbón) ya vienen del
   core. Light-only: mantenemos la banda cálida (no la invertimos como v1). */
.vc-cta-band__text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--brand-strong);
	text-wrap: balance;
}

/* ── Tarjeta de entrada de blog (.vc-post-card) ─────────────────────────
   El core arma la estructura (media 16/10, cuerpo, readmore). Añadimos la
   marca: título display, zoom de imagen sobre la media en hover, y readmore
   en carbón que vira a rojo. La card se levanta apenas (translateY). */
.vc-post-card {
	transition: transform var(--tr-slow) var(--ease-out-quint);
}
.vc-post-card__media img {
	transition: transform var(--tr-slow) var(--ease-out-quint);
}
.vc-post-card__cat {
	color: var(--accent-strong);
	font-weight: 600;
}
.vc-post-card__cat a { color: inherit; }
.vc-post-card__cat a:hover { color: var(--accent); }
.vc-post-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: var(--lh-snug);
}
.vc-post-card__title a { color: var(--brand-strong); }
.vc-post-card__title a:hover { color: var(--accent-strong); }

/* Readmore: carbón → rojo con la flecha desplazándose (mismo gesto que los
   __ico de la dirección). Aplica a blog y a resultados de búsqueda. */
.vc-readmore { color: var(--brand); }
.vc-readmore:hover { color: var(--accent-strong); }
.vc-readmore__ico {
	transition: transform var(--tr-slow) var(--ease-out-quint);
}
.vc-readmore:hover .vc-readmore__ico { transform: translate(3px, -3px); }

@media (prefers-reduced-motion: no-preference) {
	.vc-post-card:hover { transform: translateY(-4px); }
	.vc-post-card:hover .vc-post-card__media img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
	.vc-post-card,
	.vc-post-card__media img,
	.vc-readmore__ico { transition: none; }
	.vc-post-card:hover { transform: none; }
	.vc-post-card:hover .vc-post-card__media img { transform: none; }
	.vc-readmore:hover .vc-readmore__ico { transform: none; }
}

/* ── Resultados de búsqueda (.vc-search-item / .vc-results) ──────────────
   El core arma el grid media+cuerpo y los bloques de sección. Marca: título
   display, tipo/etiqueta como micro-label, headings de sección en display. */
.vc-search-item__type {
	color: var(--accent-strong);
	font-weight: 600;
}
.vc-search-item__title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: var(--lh-snug);
}
.vc-search-item__title a { color: var(--brand-strong); }
.vc-search-item__title a:hover { color: var(--accent-strong); }
.vc-search-item__media img {
	transition: transform var(--tr-slow) var(--ease-out-quint);
}
@media (prefers-reduced-motion: no-preference) {
	.vc-search-item__media:hover img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
	.vc-search-item__media img { transition: none; }
	.vc-search-item__media:hover img { transform: none; }
}
.vc-results__heading {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--brand-strong);
}
.vc-results__heading--secondary { color: var(--ink-2); }

/* ── Estado vacío (.vc-empty) ───────────────────────────────────────────
   El core lo centra. Marca: título display. El botón (rojo) y los chips ya
   salen del core. */
.vc-empty__title {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: var(--lh-tight);
	color: var(--brand-strong);
	text-wrap: balance;
}

/* ── 404 (.vc-404) ──────────────────────────────────────────────────────
   El core ya trata el código "404" gigante en display sobre hairline. Le
   damos un pelín más de carácter (peso, tracking negativo) y el título grande.
   La acción principal a la tienda es el único botón rojo (heredado del core). */
.vc-404__code {
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--zv-carbon-100);
}
.vc-404__title {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: var(--lh-tight);
	color: var(--brand-strong);
	text-wrap: balance;
}

/* ── Navegación entre entradas (.vc-postnav) ────────────────────────────
   El core arma el layout prev/next con hairline. Voz display en el título. */
.vc-postnav__label { color: var(--ink-3); }
.vc-postnav__title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--brand-strong);
	transition: color var(--tr) var(--ease-out);
}
.vc-postnav a:hover .vc-postnav__title { color: var(--accent-strong); }

/* ==========================================================================
   PATRONES DE CONTENIDO (bloques Gutenberg .vc-pattern-*)
   hero-cta.php · sobre-nosotros.php · faq.php. Son marcadores [COMPLETAR] que
   el cliente inserta y edita. Sin CSS de core: los vestimos enteros acá con la
   misma dirección (display, hairlines, rojo quirúrgico, media con radio-lg).
   ========================================================================== */

/* Kicker de patrón: micro-eyebrow en rojo con regla previa (coherente con el
   .vc-kicker del core). Sentence-case, sin mayúsculas gritonas. */
.vc-pattern-kicker {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-3);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--accent-strong);
}
.vc-pattern-kicker::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: currentColor;
	border-radius: var(--radius-pill);
}

/* Párrafo apagado del patrón (bajo el título): cuerpo aireado en ink-2. */
.vc-pattern-muted {
	color: var(--ink-2);
	line-height: 1.7;
	max-width: 48ch;
}

/* Media del patrón (about/hero): panel con radio-lg, sombra cálida flotante y
   zoom de imagen en hover — la vidriera premium de la dirección. */
.vc-pattern-media { margin: 0; }
.vc-pattern-media__img {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface-2);
	box-shadow: var(--sh-float);
}
.vc-pattern-media__img img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--tr-slow) var(--ease-out-quint);
}
@media (prefers-reduced-motion: no-preference) {
	.vc-pattern-media__img:hover img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
	.vc-pattern-media__img img { transition: none; }
	.vc-pattern-media__img:hover img { transform: none; }
}

/* Titulares H2 de los patrones: voz display grande y confiada. */
.vc-pattern-about h2,
.vc-pattern-faq h2,
.vc-pattern-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: -0.03em;
	color: var(--brand-strong);
	text-wrap: balance;
}
.vc-pattern-about h2,
.vc-pattern-faq h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }

/* Chips de beneficios del patrón "sobre nosotros": pill en carbón con hairline
   e ícono; NO son rojos (el rojo se reserva para precio/oferta/CTA). */
.vc-pattern-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
}
.vc-pattern-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface-raised);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--brand-strong);
}
.vc-pattern-chip svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--accent);
}

.vc-pattern-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

/* ── Patrón: portada con CTA (hero-cta.php) ──────────────────────────────
   Dos columnas (contenido + media) que colapsan a una en mobile. */
.vc-pattern-hero { padding-block: clamp(var(--sp-6), 6vw, var(--sp-8)); }
.vc-pattern-hero__inner {
	display: grid;
	gap: clamp(var(--sp-6), 5vw, var(--sp-8));
	align-items: center;
}
.vc-pattern-hero__title {
	margin: 0;
	font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem);
	letter-spacing: -0.035em;
	line-height: 1;
}
.vc-pattern-hero__lead {
	margin-top: var(--sp-4);
	max-width: 44ch;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
	line-height: 1.6;
	color: var(--ink-2);
	text-wrap: pretty;
}
.vc-pattern-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}
@media (min-width: 880px) {
	.vc-pattern-hero__inner { grid-template-columns: 1.06fr 0.94fr; }
}

/* ── Patrón: historia de marca (sobre-nosotros.php) ──────────────────────
   El patrón usa columnas de Gutenberg (.wp-block-columns); acá solo alineamos
   el ritmo vertical y la media. El grid de columnas lo administra el core de WP. */
.vc-pattern-about { padding-block: clamp(var(--sp-7), 7vw, var(--sp-9)); }
.vc-pattern-about__inner { gap: clamp(var(--sp-6), 5vw, var(--sp-8)); align-items: center; }
.vc-pattern-about h2 { margin-top: var(--sp-2); }

/* ── Patrón: FAQ nativo (faq.php — details/summary) ──────────────────────
   Distinto del acordeón .vc-faq de la plantilla FAQ: acá es <details> nativo.
   Mismo lenguaje: filas con hairlines, summary display, marcador que gira. */
.vc-pattern-faq { padding-block: clamp(var(--sp-7), 7vw, var(--sp-9)); }
.vc-pattern-section-head { margin-bottom: clamp(var(--sp-5), 4vw, var(--sp-6)); }
.vc-pattern-faq__list {
	border-top: var(--border-w) solid var(--line);
}
.vc-pattern-faq__item {
	border-bottom: var(--border-w) solid var(--line);
	padding: 0;
}
.vc-pattern-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: clamp(var(--sp-4), 2.5vw, var(--sp-5)) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
	line-height: var(--lh-snug);
	letter-spacing: -0.015em;
	color: var(--brand-strong);
	transition: color var(--tr) var(--ease-out);
}
.vc-pattern-faq__item summary:hover { color: var(--accent-strong); }
.vc-pattern-faq__item summary:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}
/* Ocultamos el triángulo nativo y dibujamos un chevron rojo con ::after que
   gira al abrir (::-webkit-details-marker para Safari/Chrome antiguos). */
.vc-pattern-faq__item summary::-webkit-details-marker { display: none; }
.vc-pattern-faq__item summary::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	margin-right: 2px;
	border-right: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: rotate(45deg);
	transform-origin: 60% 60%;
	transition: transform var(--tr-slow) var(--ease-out-quint), border-color var(--tr) var(--ease-out);
}
.vc-pattern-faq__item summary:hover::after { border-color: var(--accent-strong); }
.vc-pattern-faq__item[open] summary::after { transform: rotate(225deg); }
.vc-pattern-faq__item > :not(summary) {
	margin: 0 0 clamp(var(--sp-4), 3vw, var(--sp-5));
	max-width: 68ch;
	color: var(--ink-2);
	line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
	.vc-pattern-faq__item summary::after { transition: border-color var(--tr) var(--ease-out); }
}