/*
Theme Name: WP Factory Base
Theme URI: https://leoharing.com
Author: Leo Haring
Description: Tema block-based base de WP Factory. Core-first: theme.json + bloques nativos, cero page builders.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpf-base
*/

/* ============================================================
   Utilidades de diseño — DESIGN_SPEC §1.8. No escaneado por
   validate:tokens: los 4 tratamientos consumen SOLO custom
   properties de theme.json (presets/custom), cero hex/rgb propios
   acá. Los patterns las aplican vía className, sin escribir un
   solo valor suelto.
   ============================================================ */

/* Grilla de plano: dos líneas de 1px repetidas al módulo de la
   grilla (custom.grid.size). Hero, método y cierre. */
.wpf-grid {
	background-image:
		linear-gradient(to right, var(--wp--custom--color--grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--wp--custom--color--grid-line) 1px, transparent 1px);
	background-size: var(--wp--custom--grid--size) var(--wp--custom--grid--size);
}

/* Trama diagonal del adversarial: franjas de 10px alternando
   panel (base-2) y rojo trama (hatch-fail). */
.wpf-hatch-fail {
	background-image: repeating-linear-gradient(
		135deg,
		var(--wp--preset--color--base-2) 0,
		var(--wp--preset--color--base-2) 10px,
		var(--wp--custom--color--hatch-fail) 10px,
		var(--wp--custom--color--hatch-fail) 20px
	);
}

/* Rieles punteados arriba+abajo de la compuerta de auditoría.
   -pass: sección "La auditoría" (RELEASE_OK). -primary: variante
   ámbar para compuertas en estado "decidiendo" (§2.12). */
.wpf-rail-pass,
.wpf-rail-primary {
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-width: var(--wp--custom--line--width);
	border-bottom-width: var(--wp--custom--line--width);
}

.wpf-rail-pass {
	border-top-color: var(--wp--custom--color--pass-soft);
	border-bottom-color: var(--wp--custom--color--pass-soft);
}

.wpf-rail-primary {
	border-top-color: var(--wp--preset--color--primary-soft);
	border-bottom-color: var(--wp--preset--color--primary-soft);
}

/* Sello SVG inline (Marca.dc.html 06.1): bastidor en blanco roto,
   barras + pestaña en ámbar, vía currentColor. El SVG (Fase 2)
   aplica estas clases a sus partes: .wpf-seal en el <svg>
   (bastidor, currentColor por defecto) y .wpf-seal-accent en el
   <g>/<path> de barras+pestaña. */
.wpf-seal {
	color: var(--wp--preset--color--contrast);
}

.wpf-seal .wpf-seal-accent {
	color: var(--wp--preset--color--primary);
}

/* Tamaño del sello por contexto (DESIGN_SPEC §3.1: 34px barra / 30px barra
   mobile / 28px pie). El SVG trae width/height intrínsecos para no generar
   CLS antes de que aplique esta regla. */
.wpf-seal {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: clamp(1.875rem, 1.66rem + 0.55vw, 2.125rem);
}

.wpf-site-footer .wpf-seal {
	height: 1.75rem;
}

/* ============================================================
   Barra sticky — DESIGN_SPEC §2.0 (agregado de Fase 3).
   `position` no es atributo de bloque: vive acá, como declara la spec.
   ============================================================ */

.wpf-bar {
	position: sticky;
	top: 0;
	z-index: 9;
}

/* Gotcha pagado (wp-gotchas.md · wp:navigation): core aplica color al enlace
   con la clase DUPLICADA .wp-block-navigation-item__content.wp-block-navigation-item__content
   (0-3-0). Se iguala/supera con la clase de la barra (0-4-0) — sin !important. */
.wpf-bar .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--20);
}

.wpf-bar .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.wpf-bar .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--custom--color--primary-hover);
}

/* CTA ámbar de la barra: tipografía de cota (§2.0, mock 11px mono) conservando
   área táctil ≥44px. Especificidad 0-2-0 > la de theme.json (0-1-0). */
.wpf-bar__cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--x-small);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

/* CTA outline "Para quién" (pedido de Leo 2026-08-15): clase hermana de
   .wpf-bar__cta — hereda su tipografía/padding de cota (misma regla de
   arriba, matchea por tener ambas clases) y se diferencia visualmente del
   CTA sólido con borde primary + fondo transparente + texto primary.
   Gotcha wp-gotchas.md (especificidad de wp:navigation/core): se pisa el
   estilo sólido del botón (theme.json → .wp-element-button) con la clase
   propia DUPLICADA para subir especificidad, sin !important. */
.wpf-bar__cta--outline.wpf-bar__cta--outline .wp-block-button__link {
	background-color: transparent;
	border: var(--wp--custom--line--width) solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.wpf-bar__cta--outline.wpf-bar__cta--outline .wp-block-button__link:hover,
.wpf-bar__cta--outline.wpf-bar__cta--outline .wp-block-button__link:focus-visible {
	border-color: var(--wp--custom--color--primary-hover);
	color: var(--wp--custom--color--primary-hover);
}

/* Resolución §6.1-11: en mobile la barra es solo sello + hamburguesa.
   600px = breakpoint del overlay de wp:navigation ("mobile"). El outline
   comparte la clase .wpf-bar__cta, así que esta regla ya lo oculta también. */
@media (max-width: 599px) {

	.wpf-bar .wpf-bar__cta {
		display: none;
	}
}

/* ============================================================
   Diagrama del hero — reglas de .wpf-hero-plan RETIRADAS (cambio aprobado
   por Leo 2026-08-16). El plan de 5 estaciones que estas reglas vestían
   (zebra de columnas pares, min-width + wrap para anchos intermedios) se
   eliminó del pattern: el video wp-factory-metodo.mp4 lo reemplaza dentro
   del mismo marco (.wpf-hero-plan sigue existiendo como className del
   contenedor, pero ya no tiene columnas adentro). Sin selectores que
   apunten a columnas que no existen más.
   ============================================================ */

/* Highlight inline de core (<mark class="has-inline-color">): sin el CSS del
   editor, el browser pinta su amarillo default — se anula (hero: "constructor"). */
mark.has-inline-color {
	background-color: transparent;
}

/* ============================================================
   Foco visible en todo interactivo — DESIGN_SPEC §1.6-5.
   ============================================================ */

:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: var(--wp--custom--line--width-accent) solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ============================================================
   Motion sutil — CSS puro, cero JS (presupuesto V2 intacto).
   Todo detrás de prefers-reduced-motion; navegadores sin soporte
   de scroll-driven animations simplemente no animan (progressive).
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}

	/* Transición entre páginas (cross-document view transitions).
	   Soportado → fundido suave de 150ms; no soportado → navegación normal. */
	@view-transition {
		navigation: auto;
	}

	/* Micro-interacción de botones y links: solo color/sombra, sin movimiento
	   que desplace layout (CLS 0). */
	.wp-block-button__link,
	a {
		transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
	}

	.wp-block-button__link:hover {
		box-shadow: var(--wp--custom--shadow--s, none);
	}

	/* Reveal al entrar al viewport — scroll-driven animation NATIVA (sin JS,
	   sin IntersectionObserver). Solo en navegadores con animation-timeline;
	   el resto muestra el contenido normal desde el inicio. Opt-in por clase:
	   los patterns de la fábrica la aplican a secciones, nunca a texto de lectura. */
	@supports (animation-timeline: view()) {
		.wpf-reveal {
			animation: wpf-reveal-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
	}
}

/* Botones del cierre en mobile — DESIGN_SPEC §2.9 (I-3 check de fidelidad 2026-08-16):
   ancho completo, apilados. .wp-block-button no tiene width propio en core, una sola
   clase alcanza (sin duplicar). El padding-block extra en el link asegura además el
   área táctil ≥44px (§1.6-4, I-5): a 375 el padding por defecto del botón (spacing 20
   vertical) deja WhatsApp en 43px y LinkedIn en 37px, por debajo del piso — subir con
   padding, no font-size. */
@media (max-width: 767px) {

	.wpf-cierre-buttons .wp-block-button {
		width: 100%;
	}

	.wpf-cierre-buttons .wp-block-button__link {
		width: 100%;
		padding-block: var(--wp--preset--spacing--30);
		text-align: center;
	}
}

/* Área táctil del botón hamburguesa de wp:navigation — DESIGN_SPEC §1.6-4 (I-5 check de
   fidelidad 2026-08-16). Medido: 24×24 (0 padding propio, core deja el botón del tamaño
   del ícono). Gotcha wp-gotchas.md (wp:navigation especificidad): acá core NO duplica la
   clase del botón abrir-overlay, así que .wpf-bar + la clase de core (0-2-0) ya gana sin
   necesitar el truco de clase repetida. Subir con padding, no font-size. */
.wpf-bar .wp-block-navigation__responsive-container-open {
	padding: 10px;
}

/* Área táctil de "VER INFORME →" en casos reales (mobile) — DESIGN_SPEC §1.6-4 (I-5).
   Medido: 77×29. El link vive dentro de un wp:paragraph inline; se sube a bloque con
   padding vertical para alcanzar 44px de alto sin tocar el tamaño de fuente. */
.wpf-case-link a {
	display: inline-block;
	padding-block: 12px;
}

/* Casos reales: capturas en desktop, enlace VER INFORME en mobile (contrato Fase 4).
   Clase duplicada a propósito: el display de .is-layout-flex de core se imprime después
   del stylesheet del tema y empata especificidad — mismo truco que wp:navigation. */
.wpf-case-link.wpf-case-link {
	display: none;
}

@media (max-width: 767px) {
	.wpf-case-evidence.wpf-case-evidence {
		display: none;
	}

	.wpf-case-link.wpf-case-link {
		display: flex;
	}
}

/* Reveal: SOLO desplazamiento, sin fundido.
   Medido en qa-entrega (lighthouse-*-anon.json, audit color-contrast): el fotograma
   `from` de este keyframe se queda fijo en todo lo que aún no entró al viewport —
   una scroll-driven animation no "termina" sola. Con `opacity: 0.2` axe medía los
   colores YA COMPUESTOS contra el fondo (ej. secondary #8B8F98 → #2c2e33, contrast
   #ECE8E1 → #3f4042) y reportaba 37 falsos pares de contraste, todos con ratios
   ~1.3-1.7. Los pares reales del sistema pasan AA; el fundido era el que fallaba.
   Cualquier opacidad < 1 en reposo vuelve a romper el gate de Accesibilidad 100,
   así que el reveal se sostiene solo con transform (mismo gesto, CLS 0). */
@keyframes wpf-reveal-in {
	from {
		transform: translateY(14px);
	}

	to {
		transform: none;
	}
}