/*
Theme Name: David Josué Boudoir
Theme URI: https://davidjosueboudoir.com
Description: Child theme editorial (Gutenberg/FSE) para David Josué Boudoir. Generado con wp-gutenberg-builder. Design System v2 (benchmark ktmerry.com): Cormorant Garamond + Nunito, alternancia carbón/marfil, botones fantasma. Todo el diseño vive en theme.json; esta hoja solo contiene lo que theme.json no puede expresar (documentado por qué, regla anti-slop).
Template: twentytwentyfive
Version: 3.3.10
Author: David Josué
Text Domain: dj-boudoir
Requires at least: 6.6
Requires PHP: 8.1
*/

/*
 * REGLA: no agregar estilos aquí sin documentar por qué theme.json no puede expresarlos.
 * Únicos valores no-preset permitidos: hairlines de 1px (design.md §4) y
 * color-mix de currentColor (transparencias contextuales inexpresables en theme.json).
 */

/* 1. Hairlines editoriales (design.md §4: "border-top 1px con el color al ~20%").
      theme.json no puede expresar bordes con transparencia derivada del color de texto
      del contexto (marfil sobre carbón, carbón sobre marfil) — color-mix(currentColor) sí. */
.dj-hairline-top {
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.dj-hairline-bottom {
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* 2. details/summary del FAQ — theme.json no estiliza estos elementos nativos.
      Sin JS: abierto/cerrado funciona por el navegador. Hairline v2 + marcador
      en muted (accent sobre claro falla contraste 2.10:1, verificado). */
.dj-faq details {
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	padding: var(--wp--preset--spacing--40) 0;
}
.dj-faq details:last-of-type {
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.dj-faq summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.dj-faq summary::-webkit-details-marker { display: none; }
.dj-faq summary::after {
	content: "+";
	float: right;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1;
	color: var(--wp--preset--color--muted);
}
.dj-faq details[open] summary::after { content: "\2212"; }

/* 3. Números editoriales del pattern "proceso" — v2: Cormorant enorme en el color de
      texto del contexto, translúcido ("marfil translúcido" sobre carbón, design.md §5).
      La opacidad derivada del contexto no es expresable en theme.json. */
.dj-step-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 300;
	line-height: 1;
	color: currentColor;
	opacity: 0.35;
}

/* 4. Columna angosta de poemas — max-width menor al contentSize global para ritmo
      de lectura de verso. */
.dj-poema .entry-content > * {
	max-width: 34rem;
	margin-left: auto;
	margin-right: auto;
}

/* 5. Hover de botones fantasma — el hover por defecto (llenarse de carbón) vive en
      theme.json (elements.button:hover). Lo que theme.json NO puede expresar es el
      hover CONTEXTUAL: sobre secciones carbón/oliva el botón se llena de marfil.
      Especificidad de 2 clases para ganarle al estilo global. Solo presets. */
.wp-element-button {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.has-contrast-background-color .wp-element-button:hover,
.has-contrast-background-color .wp-element-button:focus-visible,
.has-olive-background-color .wp-element-button:hover,
.has-olive-background-color .wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
}

/* 6. Citas editoriales v2 (patterns "cita" y "testimonios") — el estilo por defecto
      de blockquote (borde lateral / margen del tema padre) rompe el lenguaje de cita
      desnuda centrada del benchmark; theme.json no permite resetear el elemento cite. */
.dj-cita {
	border: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}
.dj-cita cite {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	margin-top: var(--wp--preset--spacing--40);
	opacity: 0.75;
}

/* 7. Lista editorial con hairlines (credenciales / valores, design.md §5 Sobre Mí) —
      bordes por ítem de lista no son expresables en theme.json. */
.dj-lista-editorial {
	list-style: none;
	padding-left: 0;
}
.dj-lista-editorial li {
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	padding: var(--wp--preset--spacing--40) 0;
	margin: 0;
}
.dj-lista-editorial li:last-child {
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* 8. Título del poema alineado a la misma columna de 34rem que los versos —
      el post-title vive fuera de entry-content y la regla 4 no lo alcanza. */
.dj-poema .wp-block-post-title {
	max-width: 34rem;
	margin-left: auto;
	margin-right: auto;
}

/* 8b. Mismo alineamiento de columna para los grupos de apertura/cierre del
       poema (numeral, hairlines, colofón) — sin esto quedan al contentSize
       por defecto del theme (680px), más ancho que la columna de 34rem, y
       la hairline se ve desalineada del título y los versos. */
.dj-poema-col {
	max-width: 34rem;
	margin-left: auto;
	margin-right: auto;
}

/* 8c. Énfasis dentro del poema (onomatopeyas, pausas) — el dorado queda
       prohibido aquí (2.10:1 sobre marfil, regla 6 de theme/CLAUDE.md), así
       que la presencia editorial viene de tracking + escala, no de color. */
.dj-poema .entry-content em {
	letter-spacing: 0.015em;
	font-size: 1.05em;
}

/* 8d. Numeral gigante de apertura (patrón "01", "02"...) — Cormorant en peso
       ligero usa figuras de estilo antiguo que a tamaño display se leen como
       letras ("01" → "OI"). Fuerza figuras alineadas (lining) solo aquí. */
.dj-numeral {
	font-variant-numeric: lining-nums;
}

/* 9. Formulario de contacto (shortcode djb_contact_form, functions.php §8) —
      inputs/textarea nativos de HTML no son bloques Gutenberg, theme.json no
      los alcanza. Estilo minimalista consistente: solo borde inferior, sin
      cajas, foco con acento dorado (permitido aquí: es interacción, no texto
      de lectura). */
.dj-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	max-width: 34rem;
}
.dj-form label {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.dj-form input[type="text"],
.dj-form input[type="email"],
.dj-form input[type="tel"],
.dj-form input[type="number"],
.dj-form textarea {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: none;
	/* 45%, NO 22%: la línea de un CAMPO debe leerse distinta del hairline
	   decorativo que separa módulos (22%) — David, 2026-08-12: "confunde y
	   no me gusta como se ve". Campo = firme; separador = ligero. */
	border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	padding: var(--wp--preset--spacing--30) 0;
	outline: none;
}
.dj-form input:focus,
.dj-form textarea:focus {
	border-bottom-color: var(--wp--preset--color--accent);
}
.dj-form textarea {
	resize: vertical;
	min-height: 7rem;
}
.dj-form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.dj-form-notice {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	font-size: var(--wp--preset--font-size--sm);
	max-width: 34rem;
}

/* 10. Widget de reserva (shortcode djb_booking_app, plugin djb-booking) —
      mismo motivo que §9: radios, checkboxes, fieldset y select son elementos
      nativos de HTML, no bloques Gutenberg, y theme.json no los alcanza. Todo
      valor sale de los presets; el layout sigue el precedente de oferta.php
      (columna angosta a la izquierda con el precio gigante, especificación a la
      derecha) para que la página se lea como parte del mismo sitio. */
.dj-booking-step {
	margin-top: var(--wp--preset--spacing--70);
}
.dj-booking-step__label {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}
.dj-booking-step__numero {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	letter-spacing: normal;
	line-height: 1;
	opacity: 0.4;
}
.dj-booking-step__nota {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	max-width: 34rem;
}

/* Paso 1 — la venta de las tres colecciones. Cada una es una pieza editorial
   completa (titular, cuerpo, para quién es, qué se lleva, precio gigante), no una
   fila de tabla comparativa: se lee, no se compara en un grid apretado. */
.dj-booking-titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	line-height: 1.1;
	margin: 0 0 var(--wp--preset--spacing--40);
}
.dj-booking-entrada {
	color: var(--wp--preset--color--muted);
	max-width: 38rem;
	margin-bottom: var(--wp--preset--spacing--70);
}
.dj-coleccion {
	padding: var(--wp--preset--spacing--70) 0;
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}
.dj-booking-colecciones > .dj-coleccion:last-child {
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
@media (min-width: 782px) {
	.dj-coleccion {
		grid-template-columns: 34% 1fr;
		/* row-gap 0 a propósito: cada elemento de la columna derecha es una fila del
		   grid, así que un row-gap grande abriría un hueco entre el titular, el
		   cuerpo y cada lista. El ritmo vertical lo dan sus propios márgenes. */
		column-gap: var(--wp--preset--spacing--70);
		row-gap: 0;
		align-items: start;
	}
	.dj-coleccion__head {
		position: sticky;
		top: var(--wp--preset--spacing--50);
		/* span 20, no "1 / -1": con filas implícitas (no hay grid-template-rows)
		   el -1 apunta a la línea 1 del grid explícito, así que la cabecera se
		   quedaba en la primera fila y su altura abría un hueco bajo el chip. */
		grid-row: 1 / span 20;
	}
	.dj-coleccion__titular,
	.dj-coleccion__cuerpo,
	.dj-coleccion__micro,
	.dj-coleccion__lista,
	.dj-coleccion__cta,
	.dj-coleccion__llena { grid-column: 2; }
}
.dj-coleccion__nombre {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.dj-coleccion__precio {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 300;
	line-height: 1;
	margin: var(--wp--preset--spacing--20) 0 0;
}
.dj-coleccion__meta {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	margin: var(--wp--preset--spacing--30) 0 0;
}
.dj-coleccion__audiencia,
.dj-precio__audiencia {
	display: inline-block;
	/* justify-self: dentro del grid de la colección este párrafo es un grid item,
	   y por defecto se estira a toda la columna — el chip se veía como una barra. */
	justify-self: start;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.35em 0.9em;
	border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
	margin: 0 0 var(--wp--preset--spacing--30);
}
.dj-coleccion__audiencia + .dj-coleccion__titular {
	margin-top: var(--wp--preset--spacing--30);
}

.dj-coleccion__titular {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-style: italic;
	font-weight: 300;
	line-height: 1.2;
	margin: 0 0 var(--wp--preset--spacing--30);
}
.dj-coleccion__cuerpo {
	margin: 0 0 var(--wp--preset--spacing--50);
	max-width: 34rem;
}
.dj-coleccion__micro {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--20);
}
.dj-coleccion__lista {
	list-style: none;
	padding-left: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	max-width: 34rem;
}
.dj-coleccion__lista + .dj-coleccion__micro {
	margin-top: var(--wp--preset--spacing--40);
}
.dj-coleccion__lista li {
	padding-left: 1.2em;
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--20);
}
.dj-coleccion__lista li::before {
	content: "—";
	position: absolute;
	left: 0;
	opacity: 0.45;
}
.dj-coleccion__lista--incluye li::before { content: "+"; }
.dj-coleccion__llena {
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	color: var(--wp--preset--color--muted);
}
.dj-coleccion--llena .dj-coleccion__precio { opacity: 0.45; }

/* Lista de espera (shortcode djb_booking_app, sección #djb-espera) — bloque
   editorial separado del flujo de reserva por una hairline gruesa de aire. */
.dj-espera {
	margin-top: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.dj-espera__micro {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.dj-espera__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	line-height: 1.1;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
}
.dj-espera__nota {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	max-width: 38rem;
}
.dj-espera__form {
	margin-top: var(--wp--preset--spacing--50);
}
.dj-espera--ok .dj-espera__titulo {
	font-style: italic;
}

/* Lista de noticias (shortcode djb_newsletter) — mismo lenguaje editorial que
   la lista de espera: micro-label, título display, nota corta y formulario
   mínimo (nombre + correo). Vive aquí y no en theme.json porque lo genera PHP
   del plugin, no bloques Gutenberg. */
.dj-noticias {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.dj-noticias__micro {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.dj-noticias__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	line-height: 1.1;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
}
.dj-noticias__nota {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	max-width: 38rem;
}
.dj-noticias__form {
	margin-top: var(--wp--preset--spacing--50);
	max-width: 38rem;
}
.dj-noticias--ok .dj-noticias__titulo {
	font-style: italic;
}

/* Resumen de precios para las páginas de venta (shortcode djb_colecciones) —
   tres columnas con hairline superior, precio en Cormorant grande. Vive aquí y no
   en theme.json porque lo genera PHP del plugin, no bloques Gutenberg. */
.dj-precios__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
}
@media (min-width: 782px) {
	.dj-precios__grid { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--60); }
}
.dj-precio {
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	padding-top: var(--wp--preset--spacing--40);
}
.dj-precio__nombre {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.dj-precio__monto {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	line-height: 1;
	margin: var(--wp--preset--spacing--20) 0 0;
}
.dj-precio__meta {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin: var(--wp--preset--spacing--20) 0 0;
}
.dj-precio__audiencia { margin-top: var(--wp--preset--spacing--30); }

.dj-precio__titular {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30);
}
.dj-precio__incluye {
	list-style: none;
	padding-left: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}
.dj-precio__incluye li {
	padding-left: 1.1em;
	position: relative;
	margin-bottom: var(--wp--preset--spacing--20);
}
.dj-precio__incluye li::before {
	content: "+";
	position: absolute;
	left: 0;
	opacity: 0.45;
}
.dj-precio__anticipo {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: var(--wp--preset--spacing--30) 0 0;
}
.dj-precios__nota {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	max-width: 44rem;
	margin: var(--wp--preset--spacing--50) auto 0;
	text-align: center;
}
.dj-precios__cta {
	margin-top: var(--wp--preset--spacing--50);
	justify-content: center;
}

/* Paso 2 — la colección ya elegida y el miércoles a la vista. */
.dj-elegida {
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	margin-bottom: var(--wp--preset--spacing--50);
}
.dj-elegida__micro {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.dj-elegida__nombre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	line-height: 1;
	margin: var(--wp--preset--spacing--20) 0 0;
}
.dj-elegida__meta {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	margin: var(--wp--preset--spacing--20) 0 0;
}
.dj-elegida__cambiar {
	font-size: var(--wp--preset--font-size--xs);
	margin: var(--wp--preset--spacing--30) 0 0;
}
.dj-dia__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	line-height: 1.1;
	margin: 0 0 var(--wp--preset--spacing--20);
}
.dj-dia__nota {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	max-width: 34rem;
	margin: 0 0 var(--wp--preset--spacing--40);
}
.dj-dia-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.dj-dia-nav__link {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.dj-dia-nav__link--next { margin-left: auto; }

/* Cada colección es un bloque editorial separado por hairline, no una card con
   caja: el benchmark no usa contenedores pesados. */
.dj-booking-collection {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50) 0;
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.dj-booking-collections > .dj-booking-collection:last-child {
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
@media (min-width: 782px) {
	.dj-booking-collection {
		grid-template-columns: 38% 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}
.dj-booking-collection__name {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.dj-booking-collection__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 300;
	line-height: 1;
	margin: var(--wp--preset--spacing--20) 0 0;
}
.dj-booking-collection__meta {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	margin: var(--wp--preset--spacing--30) 0 0;
}
.dj-booking-collection__llena {
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	color: var(--wp--preset--color--muted);
	align-self: center;
	margin: 0;
}
.dj-booking-collection.is-elegida .dj-booking-collection__price {
	opacity: 1;
}
.dj-booking-collection:not(.is-elegida) .dj-booking-collection__price {
	transition: opacity 0.2s ease;
}

.dj-booking-days {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.dj-booking-legend {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--30);
}
.dj-booking-day + .dj-booking-day {
	margin-top: var(--wp--preset--spacing--40);
}
.dj-booking-day__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	margin: 0 0 var(--wp--preset--spacing--20);
}
.dj-booking-times {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

/* Botón fantasma para cada horario (design.md §4: nada sólido-pesado). El input
   queda accesible al teclado y al lector de pantalla — se posiciona fuera de vista
   en vez de display:none, que lo sacaría del orden de foco. */
.dj-booking-time {
	position: relative;
	display: inline-flex;
}
.dj-booking-time input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}
.dj-booking-time__label {
	display: inline-block;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dj-booking-time input:checked + .dj-booking-time__label {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}
.dj-booking-time input:focus-visible + .dj-booking-time__label {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
.has-contrast-background-color .dj-booking-time input:checked + .dj-booking-time__label {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
}

.dj-booking-fields {
	max-width: 34rem;
}
.dj-booking-fields select {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: none;
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	padding: var(--wp--preset--spacing--30) 0;
	outline: none;
	border-radius: 0;
}
.dj-booking-fields select:focus {
	border-bottom-color: var(--wp--preset--color--accent);
}
.dj-booking-opcional {
	letter-spacing: normal;
	text-transform: none;
	font-weight: 400;
	opacity: 0.7;
}

.dj-booking-politica {
	max-width: 44rem;
	font-size: var(--wp--preset--font-size--sm);
}
.dj-booking-casillas {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
	max-width: 44rem;
}
.dj-booking-casilla {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}
.dj-booking-casilla input {
	margin-top: 0.35em;
	accent-color: var(--wp--preset--color--contrast);
	flex-shrink: 0;
}
.dj-booking-submit {
	margin-top: var(--wp--preset--spacing--50);
}
.dj-booking-colofon {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--30);
	max-width: 34rem;
}
.dj-booking-vacio {
	max-width: 34rem;
}

/* Confirmación (shortcode djb_booking_gracias) — resumen en dos columnas con
   hairlines, mismo lenguaje de "especificación tipo revista" que oferta.php. */
.dj-gracias__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	line-height: 1.1;
	margin: 0 0 var(--wp--preset--spacing--40);
}
.dj-gracias-resumen li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}
.dj-gracias-resumen__label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	opacity: 0.7;
}
.dj-gracias-resumen__valor {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
}
.dj-gracias-pasos {
	counter-reset: dj-paso;
	max-width: 34rem;
}
.dj-gracias-pasos li {
	counter-increment: dj-paso;
	font-size: var(--wp--preset--font-size--sm);
}
.dj-gracias-pasos li::before {
	content: counter(dj-paso, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--display);
	font-variant-numeric: lining-nums;
	font-size: var(--wp--preset--font-size--lg);
	opacity: 0.4;
	margin-right: var(--wp--preset--spacing--30);
}

/* 11. Asistente de reserva paso a paso (shortcode djb_booking_app) — una decisión
       por pantalla, pensado para AuDHD (David, 2026-08-03). Los elementos son
       enlaces y campos nativos, no bloques Gutenberg: theme.json no los alcanza. */
.dj-paso__cabecera {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	margin-bottom: var(--wp--preset--spacing--50);
}
.dj-paso__label {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	margin: 0;
}
.dj-paso__label .dj-numeral {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	letter-spacing: normal;
	line-height: 1;
	opacity: 0.4;
}
.dj-paso__de {
	letter-spacing: normal;
	text-transform: none;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	margin-right: var(--wp--preset--spacing--20);
}
.dj-progreso {
	display: flex;
	gap: 6px;
	margin-top: var(--wp--preset--spacing--30);
}
.dj-progreso__punto {
	width: 26px;
	height: 2px;
	background: color-mix(in srgb, currentColor 18%, transparent);
}
.dj-progreso__punto.is-hecho { background: color-mix(in srgb, currentColor 45%, transparent); }
.dj-progreso__punto.is-actual { background: currentColor; }
.dj-paso__h {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 300;
	line-height: 1.1;
	margin: var(--wp--preset--spacing--40) 0 0;
}
.dj-paso__entrada,
.dj-paso__nota {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	max-width: 38rem;
}
.dj-paso__form { margin-top: var(--wp--preset--spacing--50); }

/* Lo ya elegido: siempre a la vista, siempre corregible. */
.dj-elegido {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--50);
	max-width: 38rem;
}
.dj-elegido li {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.dj-elegido__que {
	flex: 0 0 auto;
	min-width: 9.5rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.dj-elegido__valor { flex: 1 1 auto; font-size: var(--wp--preset--font-size--sm); }
.dj-elegido__cambiar { flex: 0 0 auto; font-size: var(--wp--preset--font-size--xs); }

/* Miércoles y horas: fichas grandes, fáciles de picar en el celular. */
.dj-dias,
.dj-horas {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
	max-width: 38rem;
}
.dj-dia-opcion,
.dj-hora-opcion {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.dj-dia-opcion:hover,
a.dj-hora-opcion:hover,
a.dj-dia-opcion:focus-visible,
a.dj-hora-opcion:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}
.dj-dia-opcion__fecha,
.dj-hora-opcion__hora {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
}
.dj-dia-opcion__estado,
.dj-hora-opcion__meta {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
/* Agotado: se ve, dice la verdad, y no se puede entrar. */
.dj-dia-opcion--llena {
	opacity: 0.45;
	cursor: not-allowed;
	border-style: dashed;
}
.dj-dia-opcion--llena .dj-dia-opcion__fecha { text-decoration: line-through; }

/* "¿Quién te recomendó?" solo estorba si no aplica: sin JS se ve siempre (y es
   opcional); con JS aparece cuando elige "me recomendaron". */
.dj-campo-referida.is-oculto { display: none; }

/* 12. Postulación de musas (shortcode djb_musas, plugin djb-booking, landing
      /musas/) — mismo motivo que §9/§10: fieldset, radios, checkbox y el input
      de archivo son elementos nativos de HTML, no bloques Gutenberg, y
      theme.json no los alcanza. Todo valor sale de los presets. Hereda .dj-form
      (§9); aquí solo lo específico de musas. */
.dj-musas {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}
.dj-musas__micro {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.dj-musas__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 300;
	line-height: 1.05;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
}
.dj-musas__nota {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	max-width: 38rem;
}
.dj-musas__form {
	margin-top: var(--wp--preset--spacing--60);
}
.dj-musas--ok .dj-musas__titulo {
	font-style: italic;
}
/* Secciones numeradas del formulario (form UX 2026-08-12: agrupar por
   intención con fieldset/legend — el proceso se siente finito y ordenado).
   El numeral usa el mismo lenguaje editorial que los pasos de la página.
   Legend flotado: evita la muesca clásica del fieldset sobre el hairline. */
.dj-musas__seccion {
	border: none;
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	padding: var(--wp--preset--spacing--50) 0 0;
	margin: var(--wp--preset--spacing--50) 0 0;
	min-width: 0;
}
.dj-musas__seccion legend {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--40);
}
.dj-musas__seccion legend + * { clear: both; }
.dj-musas__seccion > * + * { margin-top: var(--wp--preset--spacing--40); }
.dj-musas__num {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	margin-bottom: var(--wp--preset--spacing--20);
}
.dj-musas__seccion-titulo {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
/* La preferencia de primer contacto: sub-pregunta en micro-caps + radios en
   fila como texto de lectura. */
.dj-musas__radios-label {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: var(--wp--preset--spacing--30);
}
.dj-musas__radios {
	display: flex;
	gap: var(--wp--preset--spacing--60);
}
.dj-musas__radio {
	flex-direction: row !important;
	align-items: center;
	gap: var(--wp--preset--spacing--30) !important;
	font-size: var(--wp--preset--font-size--md) !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--wp--preset--color--contrast) !important;
}
/* !important: pelea contra el selector .dj-form label (§9), que pinta TODOS los
   labels como micro-caps — los radios y el consentimiento son texto de lectura. */
.dj-musas__consent {
	flex-direction: row !important;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30) !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--wp--preset--color--muted) !important;
	line-height: 1.6;
	max-width: 38rem;
}
.dj-musas__consent input {
	margin-top: 0.3em;
}
.dj-musas__hint {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}
.dj-musas input[type="radio"],
.dj-musas input[type="checkbox"] {
	accent-color: var(--wp--preset--color--accent);
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}
/* Foco visible en controles sin caja (radios, casillas, archivo, botón) —
   interacción, no texto de lectura. */
.dj-musas input[type="radio"]:focus-visible,
.dj-musas input[type="checkbox"]:focus-visible,
.dj-musas input[type="file"]:focus-visible,
.dj-musas button:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}
/* Error inline de la validación en blur (JS progresivo) — el mensaje vive
   dentro del label micro-caps, así que resetea su tipografía. */
.dj-musas__inline-error {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
	margin: var(--wp--preset--spacing--20) 0 0;
}
.dj-musas__inline-error:empty { display: none; }
/* Cierre del formulario: botón + línea de confianza. */
.dj-musas__envio {
	margin-top: var(--wp--preset--spacing--60);
}
.dj-musas__envio .dj-musas__hint {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
}
.dj-musas__envio button[disabled] {
	opacity: 0.6;
	cursor: wait;
}
.dj-musas input[type="file"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	padding: var(--wp--preset--spacing--30) 0;
}
/* El botón nativo del file input, vestido de botón fantasma (design.md §4). */
.dj-musas input[type="file"]::file-selector-button {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-right: var(--wp--preset--spacing--40);
	cursor: pointer;
}
.dj-musas input[type="file"]::file-selector-button:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
/* El input numérico de la edad: sin spinners del navegador — con el estilo de
   solo-línea-inferior (§9) las flechitas nativas se ven como un error. */
.dj-form input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}
.dj-form input[type="number"]::-webkit-inner-spin-button,
.dj-form input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* (El contacto condicional se retiró 2026-08-12: correo y WhatsApp son
   obligatorios — la clase .is-oculto del canal ya no se emite aquí.) */

/* 13. Landing /musas/ v4 (auditoría editorial 2026-08-12, aprobada por David).
      TODO scoped al template musas-landing vía body class — nada de esto toca
      el resto del sitio. Por qué theme.json no puede: (a) re-mapear el preset
      de fuente body POR TEMPLATE no es expresable; (b) grano, min-height del
      hero y hairlines verticales son capa visual sin preset. */

/* La landing usa la grotesca (Archivo, theme.json slug "grotesk") como fuente
   de texto; Nunito sigue en el resto del sitio. Cuerpo de lectura 17px/1.65
   peso 400 (300 se adelgaza ópticamente sobre tinta). */
body.page-template-musas-landing {
	--wp--preset--font-family--body: var(--wp--preset--font-family--grotesk);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.65;
}

/* Botones: tracking menor que los eyebrows — misma voz, menos grito. */
body.page-template-musas-landing .wp-block-button__link {
	letter-spacing: 0.18em;
}

/* Los actos se tocan: el ritmo vertical lo pone el padding de cada acto, no el
   block-gap del root — sin esto, entre dos actos tinta consecutivos se cuela
   una franja crema de fondo de página. */
body.page-template-musas-landing .entry-content > * {
	margin-block-start: 0;
}

/* Grano de papel en los actos crema — un solo asset tileable (384px, alpha
   bajísimo), generado en repo. Se pinta sobre el fondo de página. */
.dj-grain {
	background-image: url(assets/img/grain.png);
}

/* Pausa editorial: hairline corta y centrada — un silencio entre movimientos.
   Ancho de la escala de espaciado (no valor mágico). */
.dj-pausa {
	width: var(--wp--preset--spacing--70);
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* Offsets del escalonado fotográfico (pares del acto 2 y galería): el
   padding-top preset viene inline del pattern y no es responsive — apiladas
   en móvil, 160px entre dos fotos del mismo par es un hueco, no un ritmo.
   !important: única forma de ganarle a un style inline. */
@media (max-width: 781px) {
	.dj-offset {
		padding-top: var(--wp--preset--spacing--40) !important;
	}
}

/* Hero split (media-text): altura editorial sin JS; la foto (imageFill) llena
   la fila y llega a los bordes. */
.dj-hero-musas {
	min-height: min(92svh, 56rem);
}
/* En móvil (apilado), la banda de imageFill recorta la silueta (David,
   2026-08-12: "se ve cortada") — proporción REAL de la foto (alma-005 es
   1020×1536 ≈ 2:3): la imagen completa, sin recorte. Y el ORDEN se invierte
   (David: "primero el hero title y botón y todo y después la foto"): la
   entrada en móvil es tipografía, la imagen llega después.
   600px = el breakpoint de apilado de core para media-text (verificado en el
   CSS inline servido); 4 clases para ganarle a su regla de 3 (grid-row:1). */
@media (max-width: 600px) {
	.wp-block-media-text.dj-hero-musas.is-stacked-on-mobile > .wp-block-media-text__media {
		aspect-ratio: 2 / 3;
		height: auto;
		min-height: 0;
		grid-row: 2;
	}
	.wp-block-media-text.dj-hero-musas.is-stacked-on-mobile > .wp-block-media-text__content {
		grid-row: 1;
	}
}

/* (La puerta de edad visual de /musas/ se retiró 2026-08-13 — la señalización
   real para menores es el meta rating adult/RTA por página, functions.php §5c.) */


@media (min-width: 782px) {
	/* Banda LO ESENCIAL: reserva de 2 líneas para el numeral, alineado por su
	   base — "OBRA PÚBLICA" quiebra a 2 líneas y sin esto las captions de las
	   4 columnas quedan a alturas distintas. Solo desktop (apiladas no aplica). */
	.dj-esencial .dj-numeral {
		min-height: 2em;
		display: flex;
		align-items: flex-end;
	}
	/* Hairlines verticales entre las fichas de usos — misma técnica que las
	   horizontales (§1): currentColor al 22%. */
	.dj-usos .wp-block-column + .wp-block-column {
		border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
		padding-left: var(--wp--preset--spacing--50);
	}
}

/* Las dos casillas de consentimiento respiran juntas (el hairline lo pone la
   sección 05 del formulario, .dj-musas__seccion). Wrapper emitido por
   MusasForm (plugin djb-booking). */
.dj-musas__acuerdos {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}