/*
 * OverFuture — sistema de diseño v1.2 (fuente única; ver plantillas/SISTEMA_DISENO.md).
 * Valores de referencia extraídos del CSS publicado (15/10/2026):
 *   botón primario = «MÁS INFORMACIÓN» del hero de la home (variante A aprobada por Aitor);
 *   antetítulo y H1 = cabecera de /desarrollo-de-videojuegos-en-meta-quest/.
 * Decisión de Aitor (15/10/2026): el sistema tipográfico se aplica en ESCRITORIO (≥ 981 px). En móvil y tablet
 * (≤ 980 px) cada sección conserva su presentación actual («antes»), salvo los botones: la regla de marca del botón
 * primario (texto blanco, nunca oscuro sobre coral) rige en todos los anchos.
 * Alias de migración: las clases heredadas de Codex (codex-heading-kicker, of-btn--primary/--secondary, of-card,
 * of-lead-card, of-form-title…) reciben aquí los valores del sistema; ningún módulo define estilos propios.
 */
:root {
	--of-font-head: Roboto, sans-serif;
	--of-font-body: "Open Sans", Arial, sans-serif;
	--of-white: #ffffff;
	/* Botón primario: variante A (aprobada). */
	--of-btn-from: #f7828e;
	--of-btn-to: #fcb6ab;
	--of-btn-size: 14px;
	--of-btn-ls: 5px;
	--of-btn-shadow: rgba(247, 130, 142, 0.4) 0 20px 30px -10px;
	/* Paleta con roles (§4) */
	--of-bg-brand: linear-gradient(130deg, #352597 0%, #5b4fd6 100%);
	--of-bg-soft: #f7f5fc;
	--of-bg-dark: #16121f;
	--of-surface: #ffffff;
	--of-brand: #6849c5;
	--of-text: #241d35;
	--of-text-body: #666666;
	--of-border: #e4def4;
	--of-field-border: #8a80a8;
	--of-success: #1e7a4f;
	--of-error: #c62828;
}

/* Botón reforzado del contenido (variante B) solo donde la página lo pide: clase de body of-btn-contenido-b
   (meta _of_btn_contenido = B). Decisión de Aitor para la página de videojuegos (1050) y las landings derivadas. */
.of-btn-contenido-b #main-content .et_pb_section:not(.et_pb_section_0) {
	--of-btn-from: #e94e63;
	--of-btn-to: #f0695c;
	--of-btn-size: 19px;
	--of-btn-shadow: rgba(233, 78, 99, 0.45) 0 20px 30px -10px;
}

/* =====================================================================================
   1. BOTÓN PRIMARIO — todos los anchos
   ===================================================================================== */
body #page-container .of-btn-primary,
body #page-container .et_pb_section .of-btn-primary,
body #page-container .et_pb_section .et_pb_module .of-btn-primary,
body #page-container .et_pb_section .et_pb_button.of-btn--primary,
body #page-container .wpcf7 .wpcf7-submit,
.of-btn-primary {
	display: inline-block;
	font-family: var(--of-font-head) !important;
	font-size: var(--of-btn-size) !important;
	font-weight: 700 !important;
	line-height: 1.7 !important;
	letter-spacing: var(--of-btn-ls) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	color: var(--of-white) !important;
	background-color: transparent !important;
	background-image: linear-gradient(90deg, var(--of-btn-from) 0%, var(--of-btn-to) 100%) !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 18px 34px !important;
	box-shadow: var(--of-btn-shadow) !important;
	cursor: pointer;
	transition: letter-spacing 300ms, box-shadow 300ms;
	-webkit-appearance: none;
	appearance: none;
}
body #page-container .of-btn-primary:hover,
body #page-container .et_pb_section .of-btn-primary:hover,
body #page-container .et_pb_section .et_pb_button.of-btn--primary:hover,
body #page-container .wpcf7 .wpcf7-submit:hover,
.of-btn-primary:hover {
	letter-spacing: calc(var(--of-btn-ls) + 0.5px) !important;
	color: var(--of-white) !important;
	background-image: linear-gradient(90deg, var(--of-btn-from) 0%, var(--of-btn-to) 100%) !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 18px 34px !important;
}
.of-btn-primary:focus-visible, .wpcf7 .wpcf7-submit:focus-visible { outline: 3px solid var(--of-white); outline-offset: 3px; }
.wpcf7 .wpcf7-submit, .wpcf7 .of-btn-primary { width: 100%; }
@media only screen and (max-width: 767px) {
	/* La variante B tiene 19 px: en móvil se reduce el tracking para que no desborde. */
	.of-btn-contenido-b #main-content .et_pb_section:not(.et_pb_section_0) .of-btn-primary,
	.of-btn-contenido-b #main-content .et_pb_section:not(.et_pb_section_0) .wpcf7-submit { letter-spacing: 3px !important; padding: 16px 24px !important; white-space: normal !important; }
}

/* =====================================================================================
   2. ESCRITORIO (≥ 981 px): tipografía, antetítulo, cabecera, secundario y componentes
   ===================================================================================== */
@media only screen and (min-width: 981px) {

	/* ---- Antetítulo único (Meta Quest) ---- */
	body #page-container .of-eyebrow,
	body #page-container .codex-heading-kicker,
	body #page-container .codex-project-archive__kicker,
	body #page-container .of-eyebrow-module .et_pb_text_inner > *,
	body #page-container .codex-cluster-eyebrow,
	body #page-container .et_pb_section_0 .et_pb_text_inner > :is(p, h2, h3, h4, h5, h6):has(+ h1),
	body #page-container .et_pb_bg_layout_dark .et_pb_text_inner > :is(p, h3, h4, h5, h6):has(+ h2),
	body #page-container .et_pb_text_inner > :is(p, h3, h4, h5, h6):first-child:has(+ h2) {
		font-family: var(--of-font-head) !important;
		font-size: 24px !important;
		font-weight: 700 !important;
		line-height: 2em !important;
		letter-spacing: 10px !important;
		text-transform: uppercase !important;
		color: var(--of-eyebrow-color, var(--of-white)) !important;
		margin: 0 !important;
		padding-bottom: 10px !important;
	}

	/* Centrado óptico: el letter-spacing deja 10 px tras la última letra; en antetítulos centrados se compensa a la izquierda
	   para que la tinta quede centrada (medido con tools/center_check.py). */
	body #page-container .et_pb_text_align_center .et_pb_text_inner > :is(p, h2, h3, h4, h5, h6):has(+ :is(h1, h2)),
	body #page-container .et_pb_text_align_center .codex-heading-kicker { padding-left: 10px !important; }
	body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_center .et_pb_button { text-indent: 5px; }

	/* Pie: fila inferior (copyright + enlaces legales) alineada en vertical; botón de reseña en dos líneas como máximo. */
	.et-l--footer .et_pb_row:has(.of-ft-legal) { display: flex; align-items: center; }
	.et-l--footer .et_pb_row:has(.of-ft-legal) > .et_pb_column { margin-bottom: 0 !important; }
	.et-l--footer .et_pb_row:has(.of-ft-legal) .et_pb_text_inner > *, .et-l--footer .of-ft-legal ul { margin-top: 0 !important; margin-bottom: 0 !important; }
	body #page-container .et-l--footer .et_pb_section .et_pb_button.of-btn-secondary, body #page-container .et-l--footer .et_pb_section .et_pb_button.of-btn--secondary { letter-spacing: 2px !important; padding: 14px 20px !important; }

	/* En fondos claros el antetítulo solo cambia de color (morado de marca). */
	body #page-container .et_pb_bg_layout_light .et_pb_text_inner > :is(p, h3, h4, h5, h6):first-child:has(+ h2) { --of-eyebrow-color: #6849c5; }

	/* ---- H1 de cabecera ---- */
	body #page-container .of-hero-h1,
	body #page-container .et_pb_section_0 .et_pb_text_inner > h1,
	body #page-container .codex-project-archive__header h1 {
		font-family: var(--of-font-head) !important;
		font-size: 80px !important;
		font-weight: 700 !important;
		line-height: 1.2em !important;
		letter-spacing: normal !important;
		text-transform: none !important;
		/* Sin color forzado: el H1 conserva el de su cabecera (blanco en las de marca; oscuro en cabeceras claras como /tips…/).
		   Forzar el blanco dejó invisible el H1 de una cabecera clara (QA visual 15/10/2026). */
		padding-bottom: 10px !important;
	}
	body #page-container .of-hero .et_pb_text_inner > h1, body #page-container .codex-project-archive__header h1, body #page-container .of-hero-h1 { color: var(--of-white) !important; }
	/* ---- H1 de entrada o página sin cabecera ---- */
	body #page-container .of-page-h1,
	body.single-post #page-container .entry-title,
	body #page-container .et_pb_post_title .entry-title,
	body #page-container #main-content h1.main_title,
	body #page-container #main-content h1.entry-title {
		font-family: var(--of-font-head) !important; font-weight: 700 !important; font-size: 48px !important; line-height: 1.2 !important;
		letter-spacing: normal !important; color: var(--of-text) !important;
	}

	/* ---- Titulares: Roboto 700 en todo el contenido (sustituye Poppins/Open Sans en titulares) ---- */
	body #page-container #main-content :is(h2, h3, h4, h5, h6),
	body #page-container .of-form-title,
	body #page-container .of-card .et_pb_module_header,
	body #page-container .of-trust-item .et_pb_module_header,
	body #page-container .of-trust-item p,
	body #page-container .of-project .et_pb_module_header,
	body #page-container .of-project .et_pb_module_header a,
	body #page-container .of-ft-title {
		font-family: var(--of-font-head) !important;
		font-weight: 700 !important;
	}
	body #page-container .of-h2, body #page-container .of-brand-service-copy h2, .of-content h2 { font-size: 45px !important; line-height: 1.2 !important; letter-spacing: normal !important; color: var(--of-heading-color, var(--of-text)) !important; }
	body #page-container .of-h3, body #page-container .of-card .et_pb_module_header, body #page-container .of-step .et_pb_module_header, .of-content h3 { font-size: 22px !important; line-height: 1.3 !important; letter-spacing: normal !important; }
	body #page-container .of-h4, .of-content h4 { font-size: 18px !important; line-height: 1.4 !important; }
	.of-dark, .of-on-dark { --of-heading-color: #ffffff; }

	/* ---- Botón secundario (contorno) ---- */
	body #page-container .of-btn-secondary,
	body #page-container .et_pb_section .et_pb_button.of-btn--secondary {
		display: inline-block;
		font-family: var(--of-font-head) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.7 !important;
		letter-spacing: 5px !important; text-transform: uppercase !important; text-decoration: none !important;
		color: var(--of-btn2-color, #6849c5) !important; background: transparent !important;
		border: 2px solid currentColor !important; border-radius: 4px !important; padding: 16px 32px !important; box-shadow: none !important;
		transition: letter-spacing 300ms, background-color 300ms;
	}
	body #page-container .of-btn-secondary:hover,
	body #page-container .et_pb_section .et_pb_button.of-btn--secondary:hover {
		letter-spacing: 5.5px !important; background: var(--of-btn2-hover, rgba(104, 73, 197, 0.08)) !important; border: 2px solid currentColor !important; border-radius: 4px !important; padding: 16px 32px !important;
	}
	/* Caja «Capacidades relacionadas» (inserción de Codex): botón como secundario morado, etiqueta como antetítulo. */
	body #page-container .codex-cluster-button {
		display: inline-block; font-family: var(--of-font-head) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 5px !important;
		text-transform: uppercase !important; color: #6849c5 !important; background: transparent !important; border: 2px solid #6849c5 !important;
		border-radius: 4px !important; padding: 16px 32px !important; box-shadow: none !important; text-decoration: none !important;
	}
	body #page-container .codex-cluster-eyebrow { --of-eyebrow-color: #6849c5; }
	body #page-container .of-eyebrow-module { --of-eyebrow-color: #ffffff; }
	/* El secundario se adapta al fondo (regla del sistema): morado de marca sobre claro (por defecto); blanco en cabeceras,
	   bandas CTA, secciones oscuras y pie. */
	.et_pb_section_0.et_pb_with_background, .of-hero, .of-cta-band, .of-dark, .of-on-dark, .of-feature, .of-footer, .et-l--footer { --of-btn2-color: #ffffff; --of-btn2-hover: rgba(255, 255, 255, 0.12); }
	.of-on-light, .of-btn-secondary.of-on-light { --of-btn2-color: #6849c5; --of-btn2-hover: rgba(104, 73, 197, 0.08); }

	/* ---- Cuerpo y enlaces ---- */
	.of-content, .of-content p, .of-content li { font-family: var(--of-font-body); font-weight: 500; font-size: 16px; line-height: 1.7; color: var(--of-text-body); }
	.of-content a:not([class*="of-btn"]) { color: var(--of-brand); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

	/* ---- Tarjeta ---- */
	.of-card { border-radius: 16px !important; border-color: var(--of-border) !important; box-shadow: 0 14px 38px -12px rgba(39, 25, 76, 0.12) !important; }
	.of-lead-card { border-radius: 16px !important; }

	/* ---- Formularios (CF7) ---- */
	.wpcf7 label, .of-lead-card .of-cf7-grid .of-field label { font-family: var(--of-font-body); font-weight: 600; color: var(--of-text); }
	.wpcf7 input:not([type=submit]):not([type=checkbox]), .wpcf7 select, .wpcf7 textarea { font-family: var(--of-font-body); font-size: 16px; border-color: var(--of-field-border) !important; border-radius: 8px !important; }
	.wpcf7 input:not([type=submit]):not([type=checkbox]), .wpcf7 select { min-height: 52px; }
	.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--of-brand) !important; box-shadow: 0 0 0 3px rgba(104, 73, 197, 0.3) !important; }

	/* ---- Banda CTA final ---- */
	.of-cta-band .of-h2, .of-cta-band h2 { color: #ffffff !important; font-size: 50px !important; line-height: 1.3 !important; }

	/* ---- Ritmo vertical de secciones (páginas migradas: clase de body of-sys) ----
	   Contenido entre la cabecera y la CTA final: 96 px arriba y abajo, como la página de IA (retícula de 8). */
	.of-sys #main-content .et_pb_section:not(.et_pb_section_0):not(:last-of-type):not(.of-trust-section) { padding-top: 96px !important; padding-bottom: 96px !important; }

	/* ---- Degradado de marca en cabecera y CTA final de las páginas migradas (final #5b4fd6: entradilla blanca ≥ 4,5:1) ---- */
	.of-sys #main-content .et_pb_section_0.et_pb_with_background,
	#main-content .et_pb_section.of-hero,
	#main-content .et_pb_section.of-cta-band { background-image: var(--of-bg-brand) !important; }

	/* ---- Cuerpo en Open Sans (retira Inter, EB Garamond, Georgia, Times y Arial de las páginas heredadas) ---- */
	#main-content :where(p, li, td, th, blockquote, figcaption, dd, dt) { font-family: var(--of-font-body) !important; }
}

/* =====================================================================================
   3. Utilidades de todos los anchos (no alteran la presentación)
   ===================================================================================== */
.of-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.of-table-wrap table { min-width: 560px; }
.of-table-wrap th, .of-table-wrap td { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.wpcf7 .wpcf7-not-valid-tip { color: var(--of-error); }

/* =====================================================================================
   4. Plantillas doradas (CPT nuevos): CTA discreto en comparativas y hubs; cuerpo con el sistema en todos los anchos
   ===================================================================================== */
.of-kind-comparativa .of-trust-section, .of-kind-comparativa .of-lead-section,
.of-kind-hub_city .of-lead-section, .of-kind-hub_sector .of-lead-section { display: none !important; }
.of-landing-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.of-landing-body th, .of-landing-body td { border-bottom: 1px solid var(--of-border); padding: 12px 10px; text-align: left; vertical-align: top; }
.of-landing-body th { color: var(--of-text); font-weight: 700; }
.of-landing-body details { border: 1px solid var(--of-border); border-radius: 16px; padding: 16px 20px; margin: 0 0 16px; background: #fff; }
.of-landing-body details summary { cursor: pointer; font-family: var(--of-font-head); font-weight: 700; font-size: 18px; color: var(--of-text); }
.of-landing-body details p { margin: 12px 0 0; }
.of-landing-body h2 { margin-top: 56px; }
.of-landing-body h2:first-child { margin-top: 0; }
.of-landing-body ul, .of-landing-body ol { margin: 0 0 24px 20px; }
.of-landing-body li { margin-bottom: 8px; }
@media only screen and (max-width: 767px) {
	.of-landing-body { overflow-wrap: anywhere; }
	.of-landing-body table:not(.of-table-wrap table) { display: block; overflow-x: auto; }
	.of-landing-body h2 { margin-top: 40px; font-size: 26px; line-height: 1.25; }
}

/* Alineación de botones declarada en cada módulo (reglas base de Divi): garantiza el centrado aunque el CSS dinámico
   de Divi de una página no incluya su fichero «late» (caso detectado en la 1050). No cambia ningún diseño. */
.et_pb_button_module_wrapper.et_pb_button_alignment_center { text-align: center; }
.et_pb_button_module_wrapper.et_pb_button_alignment_left { text-align: left; }
.et_pb_button_module_wrapper.et_pb_button_alignment_right { text-align: right; }
@media only screen and (max-width: 980px) {
	.et_pb_button_module_wrapper.et_pb_button_alignment_tablet_center { text-align: center; }
	.et_pb_button_module_wrapper.et_pb_button_alignment_tablet_left { text-align: left; }
}
@media only screen and (max-width: 767px) {
	.et_pb_button_module_wrapper.et_pb_button_alignment_phone_center { text-align: center; }
	.et_pb_button_module_wrapper.et_pb_button_alignment_phone_left { text-align: left; }
}

/* Patrones del cuerpo de las plantillas doradas (todos los anchos: las páginas nuevas no tienen versión «antes») */
.of-landing-body .of-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 8px; }
.of-landing-body .of-card { background: #fff; border: 1px solid var(--of-border); border-radius: 16px; box-shadow: 0 14px 38px -12px rgba(39, 25, 76, 0.12); padding: 24px; }
.of-landing-body .of-card h3 { font-family: var(--of-font-head); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--of-text); margin: 0 0 8px; padding: 0; }
.of-landing-body .of-card p { margin: 0; font-size: 15px; line-height: 1.6; }
.of-landing-body ol.of-steps-list { list-style: none; counter-reset: of-step; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.of-landing-body ol.of-steps-list li { counter-increment: of-step; position: relative; padding-top: 56px; margin: 0; }
.of-landing-body ol.of-steps-list li::before { content: counter(of-step, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--of-brand); color: #fff; font-family: var(--of-font-head); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.of-landing-body .of-links { display: flex; flex-wrap: wrap; gap: 8px; }
.of-landing-body .of-links a { display: inline-block; border: 1px solid var(--of-border); border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--of-brand); text-decoration: none; background: #fff; }
.of-landing-body .of-links a:hover { border-color: var(--of-brand); }
.of-landing-body a { color: var(--of-brand); }
@media only screen and (max-width: 980px) {
	.of-landing-body .of-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.of-landing-body ol.of-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 767px) {
	.of-landing-body .of-grid, .of-landing-body ol.of-steps-list { grid-template-columns: 1fr; }
	.of-landing-body ol.of-steps-list li { padding-top: 0; padding-left: 56px; min-height: 40px; }
}

/* Plantilla de artículo (T-ART) */
.of-article-aside .of-toc { position: sticky; top: 140px; background: var(--of-bg-soft); border-radius: 16px; padding: 20px; }
.of-toc .of-toc-title { font-family: var(--of-font-head); font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--of-text); margin: 0 0 12px; }
.of-toc ol { margin: 0; padding-left: 18px; }
.of-toc li { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.of-toc a { color: var(--of-brand); text-decoration: none; }
.of-article-body h2 { scroll-margin-top: 140px; }
.of-cta-box .of-cta-box-inner { background: var(--of-bg-soft); border: 1px solid var(--of-border); border-radius: 16px; padding: 32px; margin: 40px 0; }
.of-cta-box h3 { font-family: var(--of-font-head); font-weight: 700; font-size: 24px; color: var(--of-text); margin: 0 0 8px; }
.of-cta-box p { margin: 0 0 20px; }
.of-related h3 { font-family: var(--of-font-head); font-weight: 700; font-size: 20px; color: var(--of-text); margin: 0 0 12px; }
.of-related .of-links { display: flex; flex-wrap: wrap; gap: 8px; }
.of-related .of-links a { display: inline-block; border: 1px solid var(--of-border); border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--of-brand); text-decoration: none; }
@media only screen and (max-width: 980px) {
	.of-article-aside .of-toc { position: static; margin-bottom: 24px; }
}

/* Plantilla de proyecto (T-PROY): vídeo, galería, tecnología y botones de tienda */
.of-project-body .of-video { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; margin: 24px 0; background: #000; }
.of-project-body .of-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.of-project-body .of-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 8px; }
.of-project-body .of-gallery br, .of-project-body .of-gallery noscript { display: none; }
.of-project-body .of-gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; display: block; }
.of-landing-body .of-links span { display: inline-block; border: 1px solid var(--of-border); border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--of-text); background: var(--of-bg-soft); }
.of-project-body .of-store-btns { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.of-landing-body .of-btn-secondary.of-on-light { display: inline-block; font-family: var(--of-font-head); font-weight: 700; font-size: 14px; letter-spacing: 5px; text-transform: uppercase; color: #6849c5; border: 2px solid #6849c5; border-radius: 4px; padding: 16px 32px; text-decoration: none; background: transparent; }
@media only screen and (max-width: 767px) {
	.of-project-body .of-gallery { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contraste AA (auditoría final 15/10/2026) · TODOS LOS ANCHOS
   Es accesibilidad, no presentación: no altera la decisión «móvil antes» (tipografía y cabeceras).
   ========================================================================== */
/* Acento heredado de Divi #9370db (3,76:1 sobre blanco) → morado de marca #6849c5 (≥ 6:1) */
html body a,
html body .et_pb_gallery_pagination ul li a.active, html body .wp-pagenavi span.current, html body .wp-pagenavi a:hover,
html body .nav-single a, html body .tagged_as a, html body .posted_in a { color: #6849c5; }
#main-content [style*="#9370db"], #main-content [style*="#9370DB"], #main-content [style*="rgb(147, 112, 219)"],
#main-content [style*="#cc99ff"], #main-content [style*="#CC99FF"] { color: #6849c5 !important; }
/* Caja de servicios de Codex y CTA de apps: fondo #8f5fe8 (4,2:1 con blanco) → #6849c5 */
.codex-cluster-bridge .codex-cluster-button, a.et_pb_button.codex-growth-apps-p1-cta { background: #6849c5 !important; border-color: #6849c5 !important; }
/* Artículos de Codex: CTA sobre fondo oscuro y antetítulo de la cabecera clara */
.of-article .of-cta h2, .of-article .of-cta h3 { color: #fff !important; }
.of-article .of-article-header .of-eyebrow { color: #6849c5 !important; }
/* Páginas heredadas con colores propios de bajo contraste */
.page-id-1178 #main-content .et_pb_button_0 { color: #241d35 !important; }
.page-id-990 #main-content .et_pb_button_6, .page-id-990 #main-content .et_pb_cta_2 .et_pb_promo_button { color: #1d6f6f !important; }
.page-id-990 #main-content [style*="#3cbebe"], .page-id-990 #main-content [style*="#3CBEBE"] { color: #1d6f6f !important; }
.postid-693 #main-content li a { color: #6849c5; }
@media only screen and (max-width: 980px) {
	/* Tablas de entradas y páginas legales: scroll horizontal en lugar de recorte; URL largas sin desbordar */
	#main-content .entry-content table:not(.of-table-wrap table), #main-content .et_pb_text table:not(.of-table-wrap table) { display: block; overflow-x: auto; max-width: 100%; }
	#main-content .entry-content p a, #main-content .et_pb_text p a { overflow-wrap: anywhere; }
}
/* Contraste AA · segunda pasada (reauditoría 15/10/2026) */
body #page-container .of-article .of-article-header { --of-eyebrow-color: #6849c5; }
html body .et_pb_gallery_pagination ul li a { color: #5b5470; }
html body .et_pb_gallery_pagination ul li a.active { color: #6849c5; }
.postid-2295 #main-content .et_pb_text_3 h2, .postid-2295 #main-content .et_pb_text_3 h2 strong { color: #6849c5 !important; }
.page-id-990 #main-content .et-pb-icon { color: #1d7f7f !important; }
.page-id-990 #main-content .et_pb_fullwidth_header_0 .et_pb_header_content_wrapper, .page-id-990 #main-content .et_pb_fullwidth_header_0 .et_pb_module_header { color: #241d35 !important; }
/* /codigo-con-inteligencia-artificial-…/ (1183): mismo degradado azul→turquesa de la cabecera, más profundo (blanco ≥ 5:1) */
body.page-id-1183 #page-container #main-content .et_pb_section_0 { background-image: linear-gradient(180deg, #1d5f9e 0%, #137366 100%) !important; }
/* /zaragoza/ (647): columnas con imagen + capa: capa más densa bajo el texto */
.page-id-647 #main-content .et_pb_column_9, .page-id-647 #main-content .et_pb_column_10 { box-shadow: inset 0 0 0 100vmax rgba(20, 12, 40, 0.35); }
.page-id-647 #main-content .et_pb_text_13 p, .page-id-647 #main-content .et_pb_text_15 p { color: #ffffff !important; }
@media only screen and (max-width: 980px) {
	/* Móvil «antes»: mismo degradado de marca de cabeceras y bandas CTA (#352597 → …), con el extremo claro #8686ff llevado a
	   #6461cc para que el texto blanco cumpla 4,5:1 (en escritorio rige el degradado del sistema #352597 → #5B4FD6). */
	body #page-container #main-content .of-hero.et_pb_with_background, body #page-container #main-content .of-cta-band.et_pb_with_background { background-image: linear-gradient(130deg, #352597 0%, #6461cc 100%) !important; }
	/* /desarrolla-tu-web-con-ia/ (968): su degradado violeta→rosa, más profundo */
	body.page-id-968 #page-container #main-content .et_pb_section_0 { background-image: linear-gradient(60deg, #6a1fd0 0%, #9a36c4 100%) !important; }
	/* Metadatos de entradas (categorías) y enlaces largos: sin recorte */
	#main-content .et_post_meta_wrapper .post-meta, #main-content p.post-meta { white-space: normal; overflow-wrap: anywhere; }
	#main-content .entry-content table, #main-content .et_pb_post_content table { display: block; overflow-x: auto; max-width: 100%; }
}
/* R1 en todos los anchos: el COLOR del secundario se adapta al fondo también en móvil (en móvil se conserva el resto de su
   presentación «antes»; aquí solo se evita que quede invisible). Listas centradas: viñeta junto al texto. */
@media only screen and (max-width: 980px) {
	body #page-container .of-btn-secondary, body #page-container .et_pb_section .et_pb_button.of-btn--secondary { color: var(--of-btn2-color, #6849c5) !important; border-color: currentColor !important; }
	.et_pb_section_0.et_pb_with_background, .of-hero, .of-cta-band, .of-dark, .of-on-dark, .of-feature, .of-footer, .et-l--footer { --of-btn2-color: #ffffff; }
}
#main-content .et_pb_text_align_center ul, #main-content .et_pb_text_align_center ol { list-style-position: inside; padding-left: 0; }
/* Familias: fuentes en línea pegadas en el contenido (Georgia, Times, Arial…) → la del contexto; el código conserva su monoespaciada */
#main-content :is(p, span, li, td, th, div, strong, em, b, i, a, h2, h3, h4, h5, h6)[style*="font-family"]:not(code, pre, kbd, samp) { font-family: inherit !important; }
#main-content :is(font)[face] { font-family: inherit !important; }
/* /project/virtual-hheroess/ (809): botones coral también a 700 en móvil (contrato del primario) */
.postid-809 #main-content .et_pb_button_1, .postid-809 #main-content .et_pb_button_2 { font-weight: 700 !important; }
@media only screen and (min-width: 981px) {
	/* /desarrolla-tu-web-con-ia/ (968): «OverFuture Dev» sobre el H1 = antetítulo del sistema */
	body.page-id-968 #page-container .et_pb_section_0 .et_pb_text_0 .et_pb_text_inner > p:first-child {
		font-family: var(--of-font-head) !important; font-size: 24px !important; font-weight: 700 !important; line-height: 2em !important;
		letter-spacing: 10px !important; text-transform: uppercase !important; color: #ffffff !important; margin: 0 !important; padding-bottom: 10px !important;
	}
}
@media only screen and (max-width: 980px) {
	/* 2868: los dos enlaces secundarios (terror VR, proyectos) son secundarios en todos los anchos (contorno morado) */
	.postid-2868 #main-content .et_pb_button.of-btn-secondary { background: transparent !important; background-image: none !important; border: 2px solid #6849c5 !important; color: #6849c5 !important; }
}
#main-content .et_pb_gallery_pagination ul li a { color: #5b5470 !important; }
#main-content .et_pb_gallery_pagination ul li a.active { color: #6849c5 !important; }
@media only screen and (max-width: 980px) {
	/* /proyectos/: cabecera del archivo (Codex) con el mismo degradado de marca ajustado a 4,5:1 */
	body #page-container .codex-project-archive__header { background: linear-gradient(130deg, #352597 0%, #6461cc 100%) !important; }
	/* /zaragoza/ (647): texto blanco sobre imagen con zonas claras → fondo del color de la sección bajo el texto */
	.page-id-647 #main-content .et_pb_text_13, .page-id-647 #main-content .et_pb_text_15 { background-color: rgba(15, 1, 34, 0.92) !important; border-radius: 12px; padding: 16px !important; }
}
/* R6 · Las filas envuelven a sus columnas: algunas reglas de Codex (p. ej. .of-cards:after{display:none}) quitan el clearfix de
   Divi; en móvil (filas en bloque, columnas flotantes) la fila colapsa y el contenido se sale del fondo de su sección. */
@media only screen and (max-width: 980px) {
	#main-content .et_pb_row::after { content: "" !important; display: block !important; clear: both !important; visibility: hidden; height: 0; }
}
/* R5/R1 · Enlaces de texto en contextos oscuros (cabecera, banda CTA, secciones oscuras, filas destacadas): blancos y subrayados */
#main-content :is(.of-cta-band, .of-hero, .of-dark, .of-feature) a:not([class]) { color: #ffffff !important; text-decoration: underline; text-underline-offset: 3px; }
/* R7 · Imágenes sin deformar: si la caja impone otra proporción, se recorta (cover) en lugar de estirarse */
#main-content .et_pb_image img, #main-content .et_pb_blurb_content img, #main-content .wp-block-image img { object-fit: cover; }
@media only screen and (min-width: 981px) {
	/* Irenem (1048): banda CTA heredada (columna 2/3 desplazada + 1/3 vacía) → texto centrado en la página (R3) */
	.page-id-1048 #main-content .et_pb_section_5 .et_pb_row_7 { margin-left: auto !important; margin-right: auto !important; width: 80% !important; max-width: 1080px !important; }
	.page-id-1048 #main-content .et_pb_section_5 .et_pb_column_13 { width: 100% !important; margin-right: 0 !important; float: none !important; }
	.page-id-1048 #main-content .et_pb_section_5 .et_pb_text_6 { padding-left: 0 !important; }
	.page-id-1048 #main-content .et_pb_section_5 .et_pb_button_0_wrapper { margin-right: 0 !important; }
	.page-id-1048 #main-content .et_pb_section_5 .et_pb_column_14:not(:has(.et_pb_module)) { display: none !important; }
}
/* Tarjetas claras dentro de contextos oscuros (p. ej. .codex-growth-apps-p1 en la banda CTA de apps): enlaces en morado de marca */
#main-content :is(.of-cta-band, .of-hero, .of-dark, .of-feature) :is(.codex-growth-apps-p1, .codex-cluster-bridge, .of-card, .of-cta-box) a:not([class]) { color: #6849c5 !important; }
/* Caja de Codex integrada como sección (codex-bridges.php): el fondo lo pone la sección anterior; sin relleno propio */
#main-content .et_pb_section.of-bridge-section { padding: 1px 0 !important; }
/* Irenem: bloque centrado con relleno asimétrico (47 px solo a la derecha) → simétrico (R3) */
.page-id-1048 #destino-principal { padding-right: 0 !important; }
@media only screen and (max-width: 980px) {
	/* /proyectos/: la decoración de la cabecera del archivo pasa por detrás del H1 en móvil → se retira en móvil */
	body #page-container .codex-project-archive__header::before, body #page-container .codex-project-archive__header::after { display: none !important; }
	/* Botones: nunca partidos como texto en línea (el borde no cruza las letras) */
	#main-content a.et_pb_button { display: inline-block !important; max-width: 100%; white-space: normal; }
}
/* R5 en la cabecera global: barra superior y elemento activo del menú con el morado de marca (#9370db daba 3,76:1) */
html body #top-header, html body.et_secondary_nav_enabled #page-container #top-header { background-color: #6849c5 !important; }
html body #top-menu li.current-menu-item > a, html body #top-menu li.current-menu-ancestor > a, html body #top-menu li.current_page_item > a, html body .et_mobile_menu li.current-menu-item > a { color: #6849c5 !important; }
html body #et-secondary-nav li ul { background-color: #6849c5 !important; }