/* ==========================================================================
   Bloques: contenido de las secciones libres (Escritorio → Secciones).
   Se carga en la web y también dentro del editor, para que se vea igual.
   .bm-blocks = contenido en la web · .is-root-container = contenido en el editor
   ========================================================================== */

/* Ritmo y textos base -------------------------------------------------- */

.bm-blocks > * + *,
.is-root-container > * + * { margin-top: 1.4em; }
.bm-blocks > *:first-child { margin-top: 0; }
/* Más aire alrededor de los bloques a toda la pantalla */
.bm-blocks > .alignfull,
.bm-blocks > .alignfull + * { margin-top: clamp(40px, 6vw, 80px); }

.bm-blocks :where(h1, h2, h3, h4, h5, h6),
.is-root-container :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-display);
	font-weight: var(--fw-display, 800);
	font-style: var(--title-style, normal);
	line-height: var(--lh-title, 1.05);
	letter-spacing: calc(var(--display-track, 0em) + var(--title-track, 0em));
	color: var(--c-title, var(--paper));
	margin: 0;
}
.bm-blocks :where(h2), .is-root-container :where(h2) { font-size: clamp(1.6rem, 4vw, 2.8rem); }
.bm-blocks :where(h3), .is-root-container :where(h3) { font-size: clamp(1.25rem, 2.6vw, 1.8rem); }
.bm-blocks :where(h4), .is-root-container :where(h4) { font-size: 1.15rem; }

.bm-blocks :where(p, li),
.is-root-container :where(p, li) { color: color-mix(in srgb, var(--paper) 85%, transparent); }
.bm-blocks :where(p:not(.wp-block-button__link) a),
.is-root-container :where(p a) { color: var(--lime); }
.bm-blocks :where(ul, ol), .is-root-container :where(ul, ol) { padding-left: 1.2em; }

.bm-blocks :where(img), .is-root-container :where(img) { border-radius: var(--radius-sm); }
.bm-blocks :where(figcaption, .wp-element-caption),
.is-root-container :where(figcaption, .wp-element-caption) {
	margin-top: 10px;
	font: 500 calc(0.78rem * var(--label-scale, 1)) / 1.4 var(--font-mono);
	letter-spacing: var(--label-track, 0);
	color: var(--muted);
	text-align: left;
}
.bm-blocks .wp-block-columns { gap: clamp(24px, 4vw, 56px); }
.bm-blocks .wp-block-embed iframe { width: 100%; border-radius: var(--radius-sm); }

/* Ancho a toda la pantalla y ancho amplio dentro de una sección */
.bm-blocks .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}
.bm-blocks .alignwide {
	width: auto;
	margin-inline: calc(-1 * min(80px, var(--gutter)));
}
.bm-blocks .alignfull img, .bm-blocks .alignwide img { width: 100%; }
.section--libre { overflow-x: clip; }

/* Opciones de la sección: ancho y espacio arriba/abajo */
.section--w-narrow .bm-blocks { max-width: 760px; margin-inline: auto; }
.wrap--full { max-width: none; padding-inline: 0; }
.wrap--full .bm-blocks > :not(.alignfull):not(.alignwide) { padding-inline: var(--gutter); }
.section.section--sp-compact { padding-block: clamp(48px, 7vw, 90px); }
.section.section--sp-wide { padding-block: clamp(110px, 16vw, 220px); }
.section.section--sp-none { padding-block: 0; }

/* ==========================================================================
   Estilos de bloque (en el editor: panel «Estilos» del bloque)
   ========================================================================== */

/* Encabezado · Título de sección (como «Videojuegos» o «Arte») */
.is-style-bm-seccion {
	font-size: clamp(1.4rem, min(calc(7.2vw * var(--title-scale, 1)), 7.4vw), calc(5.5rem * var(--title-scale, 1))) !important;
	text-transform: var(--title-case, uppercase);
	letter-spacing: calc(-0.03em + var(--title-track, 0em));
}

/* Encabezado · Brillo que recorre el texto (como «¿Hablamos?») */
.is-style-bm-brillo {
	--shine-base: var(--c-title, var(--paper));
	background-image: linear-gradient(100deg, var(--shine-base) calc(50% - var(--shine-w, 18%)), var(--c-shine, var(--lime)) 50%, var(--shine-base) calc(50% + var(--shine-w, 18%)));
	background-size: 300% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	animation: shine var(--shine-speed, 4s) ease-in-out infinite;
}

/* Encabezado · Degradado fijo entre los dos acentos */
.is-style-bm-degradado {
	background-image: linear-gradient(90deg, var(--lime), var(--pink));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}

/* Párrafo · Etiqueta (texto pequeño con punto, como el de la portada) */
p.is-style-bm-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 500 calc(0.8rem * var(--label-scale, 1)) / 1.2 var(--font-mono);
	letter-spacing: calc(0.08em + var(--label-track, 0em));
	text-transform: uppercase;
	color: var(--muted);
}
p.is-style-bm-etiqueta::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lime);
	box-shadow: 0 0 12px var(--lime);
	flex-shrink: 0;
}
p.has-text-align-center.is-style-bm-etiqueta { display: flex; justify-content: center; }

/* Párrafo · Entradilla (texto grande) */
p.is-style-bm-destacado {
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	line-height: 1.45;
	color: var(--paper);
	max-width: 46ch;
}

/* Imagen · Sombra de color (como la foto de «Sobre mí») */
.is-style-bm-sombra img {
	box-shadow: var(--about-sh-x, 14px) var(--about-sh-x, 14px) var(--about-sh-blur, 0) var(--about-sh, var(--lime));
}
/* Imagen · Inclinada (se endereza al pasar el ratón) */
.is-style-bm-inclinada img {
	transform: rotate(-2.5deg);
	box-shadow: var(--about-sh-x, 14px) var(--about-sh-x, 14px) var(--about-sh-blur, 0) var(--about-sh, var(--lime));
	transition: transform calc(0.5s * var(--speed, 1)) var(--ease);
}
.is-style-bm-inclinada img:hover { transform: rotate(0); }
/* Imagen · Marco */
.is-style-bm-marco img {
	padding: 10px;
	background: var(--ink-2);
	border: var(--bw) solid var(--line);
}

/* Galería · Zoom al pasar el ratón */
.wp-block-gallery.is-style-bm-zoom .wp-block-image { overflow: hidden; border-radius: var(--radius-sm); }
.wp-block-gallery.is-style-bm-zoom .wp-block-image img { transition: transform calc(0.6s * var(--speed, 1)) var(--ease); }
.wp-block-gallery.is-style-bm-zoom .wp-block-image:hover img { transform: scale(1.06); }

/* Grupo · Tarjeta */
.wp-block-group.is-style-bm-tarjeta {
	padding: clamp(22px, 3.5vw, 44px);
	background: var(--ink-2);
	border: var(--bw) solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow, none);
}
.wp-block-group.is-style-bm-tarjeta > * + * { margin-top: 0.9em; }
/* Grupo · Tarjeta con borde de acento al pasar el ratón */
.wp-block-group.is-style-bm-tarjeta-hover {
	padding: clamp(22px, 3.5vw, 44px);
	background: var(--ink-2);
	border: var(--bw) solid var(--line);
	border-radius: var(--radius);
	transition: border-color calc(0.35s * var(--speed, 1)) var(--ease), transform calc(0.35s * var(--speed, 1)) var(--ease);
}
.wp-block-group.is-style-bm-tarjeta-hover:hover { border-color: var(--lime); transform: translateY(-4px); }

/* Cita · Cita grande */
.wp-block-quote.is-style-bm-cita-grande {
	margin-inline: 0;
	margin-bottom: 0;
	padding: 0 0 0 clamp(18px, 3vw, 32px);
	border-left: 4px solid var(--lime);
}
.wp-block-quote.is-style-bm-cita-grande p {
	font-family: var(--font-display);
	font-weight: var(--fw-display, 800);
	font-size: clamp(1.4rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	color: var(--paper);
}
.wp-block-quote.is-style-bm-cita-grande cite {
	display: block;
	margin-top: 14px;
	font: 500 calc(0.8rem * var(--label-scale, 1)) / 1.2 var(--font-mono);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

/* Botón · Principal y Contorno (como los de la portada) */
.wp-block-button.is-style-bm-primario .wp-block-button__link,
.wp-block-button.is-style-bm-contorno .wp-block-button__link {
	padding: 0.95em 1.5em;
	border-radius: var(--pill);
	font: 600 0.95rem/1 var(--font-body);
	text-decoration: none;
	transition: background calc(0.35s * var(--speed, 1)) var(--ease), color calc(0.35s * var(--speed, 1)) var(--ease), border-color calc(0.35s * var(--speed, 1)) var(--ease);
}
.wp-block-button.is-style-bm-primario .wp-block-button__link {
	background: var(--lime);
	color: var(--on-accent);
	border: calc(var(--bw) * 1.5) solid var(--lime);
}
.wp-block-button.is-style-bm-primario .wp-block-button__link:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.wp-block-button.is-style-bm-contorno .wp-block-button__link {
	background: transparent;
	color: var(--paper);
	border: calc(var(--bw) * 1.5) solid var(--line);
}
.wp-block-button.is-style-bm-contorno .wp-block-button__link:hover { background: var(--lime); border-color: var(--lime); color: var(--on-accent); }

/* Separador · Línea corta de acento (como la de los números de sección) */
.wp-block-separator.is-style-bm-acento {
	width: 64px;
	max-width: 64px;
	height: 0;
	margin-inline: 0;
	border: 0;
	border-top: 2px solid var(--lime);
	opacity: 1;
}

/* ==========================================================================
   Bloques propios: Texto curvado e Imagen con parallax
   ========================================================================== */

.bm-curvo { margin: 0; }
.bm-curvo svg { display: block; width: 100%; height: auto; margin-inline: auto; overflow: visible; }
.bm-curvo text {
	font-family: var(--font-display);
	font-weight: var(--fw-display, 800);
	letter-spacing: calc(var(--display-track, 0em) + var(--title-track, 0em));
	text-transform: var(--title-case, uppercase);
	fill: var(--c-title, var(--paper));
}
.bm-curvo--accent text { fill: var(--lime); }
.bm-curvo--accent2 text { fill: var(--pink); }
.bm-curvo--text text { fill: var(--paper); }
.bm-curvo--muted text { fill: var(--muted); }

.bm-parallax {
	position: relative;
	height: var(--bm-h, 60vh);
	min-height: 180px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--ink-3);
}
.bm-parallax.alignfull { border-radius: 0; }
.bm-parallax img {
	position: absolute;
	left: 0;
	top: -25%;
	width: 100%;
	height: 150%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	will-change: transform;
}
.bm-parallax::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ink);
	opacity: var(--bm-dim, 0);
	pointer-events: none;
}
.bm-parallax__vacia {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--muted);
	font: 500 0.85rem/1.4 var(--font-mono);
}

/* Sin movimiento: el brillo y el parallax se quedan quietos */
@media (prefers-reduced-motion: reduce) {
	.is-style-bm-brillo { animation: none; }
	.bm-parallax img { transform: none !important; }
}
body.bm-motion-none .is-style-bm-brillo,
body.bm-motion-soft .is-style-bm-brillo { animation: none; }

/* Editor: el título de la entrada con la tipografía de la web */
.editor-post-title,
.wp-block-post-title {
	font-family: var(--font-display);
	font-weight: var(--fw-display, 800);
	text-transform: var(--title-case, uppercase);
	color: var(--c-title, var(--paper));
}