/* ============================================================
   SUMI — Motion & block-style refinements
   Lo que theme.json no cubre: transiciones del sistema "Tinta"
   (curva simétrica, sin spring) y los block styles propios.
   Tokens espejo de temporal/sumi-design-system/assets/sumi-tokens.css
   ============================================================ */

:root {
	--sumi-dur-fast: 500ms;
	--sumi-dur-base: 700ms;
	--sumi-dur-slow: 1000ms;
	--sumi-ease: cubic-bezier(.4, 0, .2, 1);
	--sumi-hairline: rgba(17, 17, 17, 0.07);
}

/* ─── Defensa de tipografía de marca ────────────────────────────
   El plugin portfolio-chatbot (chatbot-widget.css) hace un reset
   global `body { font-family: -apple-system, ... }` que pisa la
   fuente del tema. Reafirmamos Plus Jakarta Sans con mayor
   especificidad (html body) para que el cuerpo no caiga al sistema.
   Fix de raíz: el plugin debería acotar esa regla a su widget. */
html body {
	font-family: var(--wp--preset--font-family--sans);
}

/* ─── Transiciones base — micro-interacciones ───────────────── */
a,
.wp-block-button__link,
.wp-block-navigation-item__content {
	transition:
		color var(--sumi-dur-fast) var(--sumi-ease),
		background-color var(--sumi-dur-fast) var(--sumi-ease),
		border-color var(--sumi-dur-fast) var(--sumi-ease),
		opacity var(--sumi-dur-fast) var(--sumi-ease);
}

/* ─── Botón "Outline" — fantasma, dirección Sólido ──────────── */
.wp-block-button.is-style-sumi-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--black);
	border: 1px solid var(--wp--preset--color--black);
	border-radius: 0;
}

.wp-block-button.is-style-sumi-outline .wp-block-button__link:hover,
.wp-block-button.is-style-sumi-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--paper-warm);
}

/* ─── Separador "Hairline" — 1px, cruza toda la columna ─────────
   Core fuerza width:100px en separadores sin estilo "wide"/"dots"
   con especificidad (0,3,0); subimos a (0,4,0) y forzamos width:100%. */
.wp-block-separator.is-style-sumi-hairline:not(.is-style-wide):not(.is-style-dots) {
	border: none;
	border-top: 1px solid var(--sumi-hairline);
	opacity: 1;
	width: 100%;
	max-width: 100%;
	margin-block: var(--wp--preset--spacing--6);
}

/* ─── Site title (wordmark) — sin subrayado, hover sutil ────── */
.wp-block-site-title a {
	text-decoration: none;
}
.wp-block-site-title a:hover {
	opacity: 0.6;
}

/* ─── Entradas de página — sistema "T03 Paralela" (sutil) ───── */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-post-title,
	.wp-block-query-title,
	.wp-block-cover__inner-container {
		animation: sumi-rise var(--sumi-dur-slow) var(--sumi-ease) both;
	}
}

@keyframes sumi-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ─── Énfasis editorial dentro de títulos (firma SUMI) ──────────
   La jerarquía es por tipografía, no por color: el <em>/<i> en
   un título grande va en itálica con opacidad reducida. */
:where(h1, h2, h3) em,
:where(h1, h2, h3) i,
.wp-block-post-title em,
.wp-block-post-title i,
.wp-block-query-title em,
.wp-block-query-title i {
	font-style: italic;
	opacity: 0.4;
}

/* ─── Menú mobile (overlay) — editorial a pantalla completa ─────
   Fondo tinta, links grandes en Cormorant con numeración mono.
   Reemplaza el overlay por defecto (items pegados al borde). */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(56px, 14vh, 110px) var(--wp--preset--spacing--6) var(--wp--preset--spacing--7);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	align-items: stretch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	flex-direction: column;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: var(--wp--preset--spacing--4);
	counter-reset: sumi-nav;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	counter-increment: sumi-nav;
	border-bottom: 1px solid rgba(240, 240, 238, 0.1);
	width: 100%;
	text-align: left;
	padding-bottom: var(--wp--preset--spacing--4);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-decoration: none;
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--4);
	margin-right: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
	content: "0" counter(sumi-nav);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	letter-spacing: 0.16em;
	opacity: 0.4;
	transform: translateY(-0.4em);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--5);
	right: var(--wp--preset--spacing--5);
}

/* ─── Contenedor de imagen "Registro" (C5 · misceláneas F4) ─────
   Corchetes de registro en 2 esquinas opuestas + imagen inset.
   Geometría cuadrada, 1px, sin radios — lenguaje SUMI. */
.wp-block-post-featured-image.is-style-sumi-registro,
figure.wp-block-image.is-style-sumi-registro {
	position: relative;
	padding: var(--sumi-registro-gap, 8px);
	background: transparent;
}
.wp-block-post-featured-image.is-style-sumi-registro img,
figure.wp-block-image.is-style-sumi-registro img {
	display: block;
	width: 100%;
	border-radius: 0;
}
.wp-block-post-featured-image.is-style-sumi-registro::before,
.wp-block-post-featured-image.is-style-sumi-registro::after,
figure.wp-block-image.is-style-sumi-registro::before,
figure.wp-block-image.is-style-sumi-registro::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	pointer-events: none;
	z-index: 2;
}
/* esquina superior-izquierda */
.wp-block-post-featured-image.is-style-sumi-registro::before,
figure.wp-block-image.is-style-sumi-registro::before {
	top: 0;
	left: 0;
	border-top: 1px solid var(--wp--preset--color--black);
	border-left: 1px solid var(--wp--preset--color--black);
}
/* esquina inferior-derecha */
.wp-block-post-featured-image.is-style-sumi-registro::after,
figure.wp-block-image.is-style-sumi-registro::after {
	bottom: 0;
	right: 0;
	border-bottom: 1px solid var(--wp--preset--color--black);
	border-right: 1px solid var(--wp--preset--color--black);
}

/* Hover sutil sobre la imagen del grid (editorial, sin color) */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-post-featured-image.is-style-sumi-registro img {
		transition: opacity var(--sumi-dur-base) var(--sumi-ease);
	}
	.wp-block-post-featured-image.is-style-sumi-registro a:hover img {
		opacity: 0.82;
	}
}

/* ═══════════════════════════════════════════════════════════════
   ARTÍCULO EDITORIAL — recursos de 「間」(solo posts individuales)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Bajada / lead — primer párrafo como entrada ──────────────
   Más grande y liviano, con aire debajo antes del cuerpo. */
.single-post .wp-block-post-content > p:first-of-type {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: -0.005em;
	margin-bottom: var(--wp--preset--spacing--6);
}

/* ─── Capitular — inicial Cormorant en la apertura del artículo ──
   Sobre la bajada (primera letra del cuerpo), posición editorial
   clásica. El blanco respira alrededor de la letra. */
.single-post .wp-block-post-content > p:first-of-type::first-letter {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: 4em;
	line-height: 0.74;
	float: left;
	margin: 0.02em 0.12em 0 0;
	color: var(--wp--preset--color--black);
}

/* ─── Ritmo vertical (ma) — más aire de lectura en el cuerpo ──── */
.single-post .wp-block-post-content {
	line-height: 1.72;
}
.single-post .wp-block-post-content > * {
	margin-block: var(--wp--preset--spacing--4) 0;
}
.single-post .wp-block-post-content > h2,
.single-post .wp-block-post-content > h3 {
	margin-block-start: var(--wp--preset--spacing--6);
}

/* ═══════════════════════════════════════════════════════════════
   DENSIDAD VISUAL — páginas internas (sistema "document")
   Recursos editoriales: numerales de sección en margen, pull-quotes
   con corchetes, capitular, y el formulario WPForms con lenguaje SUMI.
   El sistema es monocromo; las fotografías van a color.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Imágenes: a todo color (decisión del usuario) ────────────
   Las galerías y fotos van en color; el monocromo es del sistema
   tipográfico/editorial, no de la fotografía. (Sin filtro grayscale.) */

/* ─── Medida de lectura — el cuerpo no corre a 1280px ──────────── */
.sumi-doc :is(p, ul, ol):not(.wp-block-pullquote *) {
	max-width: 68ch;
}

/* ─── Numerales de sección (00/01/02) en carril de margen ───────
   Reusa la idea del contador del menú móvil. Solo secciones con h2
   (el hero usa h1, no se numera). */
.sumi-doc {
	counter-reset: sumi-sec;
}
.sumi-doc > .wp-block-group:has(> h2) {
	counter-increment: sumi-sec;
	position: relative;
}
@media (min-width: 900px) {
	.sumi-doc > .wp-block-group:has(> h2) {
		padding-left: 6rem;
	}
	.sumi-doc > .wp-block-group:has(> h2)::before {
		content: counter(sumi-sec, decimal-leading-zero);
		position: absolute;
		left: 0;
		top: -0.12em;
		font-family: var(--wp--preset--font-family--display);
		font-weight: 300;
		font-size: clamp(40px, 4.2vw, 64px);
		line-height: 0.8;
		color: var(--wp--preset--color--gray-300);
		pointer-events: none;
	}
}

/* ─── Capitular opt-in (apertura editorial en páginas) ────────── */
.sumi-dropcap::first-letter {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: 4em;
	line-height: 0.74;
	float: left;
	margin: 0.02em 0.12em 0 0;
	color: var(--wp--preset--color--black);
}

/* ─── Pull-quote — cita editorial con corchetes de registro ─────
   theme.json ya da la tipografía (Cormorant italic h-3); acá la
   geometría: sin borde core, padding, y brackets en 2 esquinas. */
.wp-block-pullquote {
	border: 0;
	margin-block: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6);
	text-align: left;
	position: relative;
}
.wp-block-pullquote blockquote {
	margin: 0;
	max-width: 28ch;
}
.wp-block-pullquote::before,
.wp-block-pullquote::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	pointer-events: none;
}
.wp-block-pullquote::before {
	top: 0;
	left: 0;
	border-top: 1px solid var(--wp--preset--color--black);
	border-left: 1px solid var(--wp--preset--color--black);
}
.wp-block-pullquote::after {
	bottom: 0;
	right: 0;
	border-bottom: 1px solid var(--wp--preset--color--black);
	border-right: 1px solid var(--wp--preset--color--black);
}

/* ─── Imagen feature de caso — encabeza la página ancha ───────── */
figure.wp-block-image.alignwide.is-style-sumi-registro {
	margin-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
}
figure.wp-block-image.is-style-sumi-registro img {
	width: 100%;
	height: auto;
}

/* ─── Formulario WPForms — lenguaje SUMI (hoy es default crudo) ── */
.wpforms-container .wpforms-field {
	padding: 0 0 var(--wp--preset--spacing--4);
}
.wpforms-container .wpforms-field-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 500;
	color: var(--wp--preset--color--gray-700);
	margin-bottom: var(--wp--preset--spacing--2);
}
.wpforms-container .wpforms-field-sublabel {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gray-600);
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="tel"],
.wpforms-container textarea,
.wpforms-container select {
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 0;
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--black);
	box-shadow: none;
	transition: border-color var(--sumi-dur-fast) var(--sumi-ease);
}
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
	border-color: var(--wp--preset--color--black);
	outline: none;
	box-shadow: none;
}
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--paper-warm);
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	cursor: pointer;
	transition: background-color var(--sumi-dur-fast) var(--sumi-ease);
}
.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
	background: var(--wp--preset--color--ink);
}

/* ─── Índice de Writing — filas editoriales alternadas (間 / asimetría) ─────
   Cada post es una fila (imagen + texto, centrada). En filas pares invertimos
   el orden (imagen a la derecha) para la asimetría editorial japonesa. */
@media (min-width: 782px) {
	.wp-block-post-template > li:nth-child(even) .sumi-post-row {
		flex-direction: row-reverse;
	}
}

/* ─── Workshops — signature numerados (escalera 01 → 02 → 03) ──────────────
   Numeral grande en Cormorant a un costado del contenido (registro editorial). */
.sumi-wk-num {
	margin: 0;
	font-weight: 300;
	font-size: clamp(3.25rem, 6vw, 5.25rem);
	line-height: 0.82;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--gray-300);
}
@media (max-width: 781px) {
	.sumi-wk-num {
		font-size: 2.75rem;
		line-height: 1;
	}
}